JSFiddle - React, Tailwind, and code Playground

HTML

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

</svg>

CSS

.menu {
    stroke: #ACACAC;
}

circle {
    fill: black;
    stroke: red;
}

JavaScript

var menu = [ 
    { index: 0, icon : "0", color: "red" },
    { index: 1, icon : "1", color: "blue" },
    { index: 2, icon : "2", color: "yellow" },
    { index: 3, icon : "3", color: "green" }
];
    
    
function renderMenu(radius) {
    
    var count = menu.length;         // Number of segments
    var offsetAngle = 0;  // Initial rotation angle of the pie  
    var thickness = 20;
    
    // Calculate the mid point of an arc
    function calcMid(d) {
        var offset = offsetAngle * (Math.PI / 180);
        var angle = offset;
        var r = radius + (thickness/2);
        return {
            x: r * Math.cos(angle),
            y: r * Math.sin(angle),
        };
    };
    
    // Set the layout function to be based on the number of segments
    // and apply a small amount of padding in between the segments
    var pie = d3.layout.pie()
                       .value(function(d) { return count });
    
    // Create the arc function
    var arc = d3.svg.arc()
                    .innerRadius(radius)
                    .outerRadius(radius + thickness);
       
    // Create the visualiziation   
    var segments = d3.select("svg")
                     .append("g")
                     .attr("transform", "translate(100,100)");
    
    var enterMenu = segments.selectAll(".menu")
                        .data(pie(menu))
                        .enter();
        
    enterMenu.append("path")
            .attr("class", "menu")
            .attr("d", arc)
            .style("fill", function(d) { return d.data.color; });
    
    enterMenu.append("circle")
                .attr("r", 10)
                .attr("cx", function(d) { return calcMid(d).x; })
                .attr("cy", function(d) { return calcMid(d).y; });
};
    
renderMenu(80);