JSFiddle - React, Tailwind, and code Playground

by Andy Jones

HTML

<svg width="900" height="900">

</svg>

CSS

svg {
    background: #383838;
    
}

.menu-segment {
    fill: #282828;
}

.menu-segment:hover {
    fill: #888888;
}

image {
    pointer-events: none;
}

JavaScript

var menu = function() {
    
     // Protect against missing new keyword
    if (!(this instanceof menu)) {
        return new menu();
    }
    
    // The following variables have getter/setter functions exposed
    var data = [{}];
    var padding = 1;
    var radius = 50;
    var thickness = 20;
    var iconSize = 16;
    
    // Private Variables
    var offsetAngleDeg = -180 / data.length;   // Initial rotation to put the centre of the first segment at the top
    var control = {};                          // The control that will be augmented and returned
    var pie;
    var arc;
    var segmentLayer;
    var animationDuration = 250;
    
     /**
     * Changes the padding between segments used by the menu
     * @param {object} The padding between segments to be used by the menu
     * @returns {number} The padding between segments used by the menu or the control
     */
    control.padding = function (_) {
        if (!arguments.length) return padding;
        padding = _;
        return control;
    };
    
     /**
     * Changes the iconSize used by the menu icons
     * @param {object} The iconSize used by the menu icons
     * @returns {number} The iconSize used by the menu icons or the control
     */
    control.iconSize = function (_) {
        if (!arguments.length) return iconSize;
        iconSize = _;
        return control;
    };
    
    /**
     * Changes the radius of the menu
     * @param {object} The radius to be used by the menu
     * @returns {number} The radius used by the menu or the control
     */
    control.radius = function (_) {
        if (!arguments.length) return radius;
        radius = _;
        arc.innerRadius(radius);
        arc.outerRadius(radius + thickness);
        return control;
    };
    
    /**
     * Changes the thickness of the menu
     * @param {object} The thickness to be used by the menu
     * @returns {number} The thickness used by the menu or the control
     */
    control.thickness = function...