JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<svg width="200" height="200">
    <path stroke="red" fill="none" stroke-width="12" />
</svg>
<input type="number" placeholder="Number in Degrees*">

JavaScript

var canvasSize = 200,
    centre = canvasSize / 2,
    radius = canvasSize * 0.8 / 2,
    s = $('svg path'),
    startY = centre - radius;

function adjust(degrees) {

    if (degrees == 360) degrees = 359.9999;

    var d = degrees,
        dr = d - 90,
        radians = Math.PI * (dr) / 180,
        endx = centre + radius * Math.cos(radians),
        endy = centre + radius * Math.sin(radians),
        largeArc = d > 180 ? 1 : 0,
        path = "M" + centre + "," + startY + " A" + radius + "," + radius + " 0 " + largeArc + ",1 " + endx + "," + endy;

    s.attr("d", path);
}

$('input').on('keyup', function () {
    adjust($(this).val());
});