JSFiddle - React, Tailwind, and code Playground

by Stafox

HTML

<svg width="400px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path id="arc0" fill="none" stroke="#ccc" stroke-width="20" />
    <path id="arc1" fill="none" stroke="#aeff00" stroke-width="10" />
    <path id="arc2" fill="none" stroke="#96db02" stroke-width="10" />
    
    <path id="arc3" fill="none" stroke="#ccc" stroke-width="20" />
    <path id="arc4" fill="none" stroke="#fff200" stroke-width="10" />
    <path id="arc5" fill="none" stroke="#f2e600" stroke-width="10" />
    
    <path id="arc6" fill="none" stroke="#ccc" stroke-width="20" />
    <path id="arc7" fill="none" stroke="#ff4626" stroke-width="10" />
    <path id="arc8" fill="none" stroke="#e82600" stroke-width="10" />    
</svg>

JavaScript

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, arcSweep, 0, end.x, end.y
    ].join(" ");

    return d;       
}

document.getElementById("arc0").setAttribute("d", describeArc(200, 200, 95, 180, 450));
document.getElementById("arc1").setAttribute("d", describeArc(200, 200, 90, 180, 300));
document.getElementById("arc2").setAttribute("d", describeArc(200, 200, 100, 180, 300));

document.getElementById("arc3").setAttribute("d", describeArc(200, 200, 65, 180, 450));
document.getElementById("arc4").setAttribute("d", describeArc(200, 200, 60, 180, 280));
document.getElementById("arc5").setAttribute("d", describeArc(200, 200, 70, 180, 280));

document.getElementById("arc6").setAttribute("d", describeArc(200, 200, 125, 180, 450));
document.getElementById("arc7").setAttribute("d", describeArc(200, 200, 120, 180, 330));
document.getElementById("arc8").setAttribute("d", describeArc(200, 200, 130, 180, 330));