JSFiddle - React, Tailwind, and code Playground

HTML

<svg> 
   <path d="M200,200 " id="arc" fill="none" stroke="gray" stroke-width="2" />
   <path d="M200,200 " id="arc" fill="none" stroke="red" stroke-width="4" />
</svg>
<input type="number" value="10" id="val" />
<button>Update</button>

CSS

svg {
    width: 200px;
    height: 200px;
    display: block;
}

JavaScript

function setArc(arc, percent) {

    var angle = 75;
    var radius = 50;

    var path = "M200,200";
    
    for(var i = 0; i <= percent; i++) {
        angle -=3.6;  
        angle %= 360;
        var radians= (angle/180) * Math.PI;
        
        var x = 100 + Math.cos(radians) * -1 * radius;
        var y = 100 + Math.sin(radians) * radius;
        
        if(i==0) {
            path += ' M ' + x + ' ' + y;
        }
        else {
            path += ' L ' + x + ' ' + y;
        }
    }

    arc.setAttribute('d', path);
}
    
var back = $('svg > path:first')[0];
var fill = $('svg > path:last')[0];

setArc(back, 90)
setArc(fill, 9)

$('button').click(function() {
    setArc(fill, parseInt($('#val').val(), 10) / 100.00 * 90);
});