JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<body>
	<div id="radialDiv"></div>
</body>

JavaScript

var w = 300;
var h = 300;
var x = w / 2;
var y = h / 2;    
var r1 = 55;
var r2 = 120;

var canvas = d3.select("#radialDiv").append("svg")
.attr("width", w)
.attr("height", h);

var defs = canvas.append("svg:defs");
canvas.append("g");

var beginColor = [0x37,0xba,0xd6],
    endColor = [0x90,0x53,0x87];

var noOfSeg = 6;
var startAngle = 0;
var stopAngle = (2 * (Math.PI))/noOfSeg;

var startColor = beginColor,
    stopColor = calculateStopColor(1);
console.log("stopColor",stopColor);

for(var i=1; i<= noOfSeg; i++){

    var gradientRing = defs.append("svg:linearGradient")
    .attr("id", ("gradientRing" + i))
    .attr("gradientUnits", "userSpaceOnUse")
    .attr("x1", r1 * Math.sin(startAngle))
    .attr("y1", -r1 * Math.cos(startAngle))
    .attr("x2", r1 * Math.sin(stopAngle))
    .attr("y2", -r1 * Math.cos(stopAngle));
    
    gradientRing.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "rgb("+startColor.join(',')+")");
    
    gradientRing.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "rgb("+stopColor.join(',')+")");
    
    var arc = d3.svg.arc()
    .innerRadius(r1)
    .outerRadius(r2)
    .startAngle(startAngle)
    // Add a fraction of a degree to the end angle so that the arcs overlap 
    // slightly and we don't see the gap caused by antialiasing.
    .endAngle(stopAngle + 0.005);
    
    var id = "#gradientRing" + i;	
    var url = "url(" + id + ")";
    canvas.append("path")
    .attr("d", arc)
    .attr("fill", url)
    .attr("transform", "translate(" + x + "," + y + ")");
    
    startAngle = stopAngle;
    stopAngle = stopAngle + (2 * (Math.PI))/noOfSeg;
    startColor = stopColor;
    stopColor = calculateStopColor(i+1);
console.log("stopColor",stopColor);
}

function  calculateStopColor(ii) {
    return [ Math.round(beginColor[0] + (endColor[0]-beginColor[0]) * ii / noOfSeg),
             Math.round(beginColor[1] + (endColor[1]-beginColor[1]) * ii / noOfSeg),
            ...