JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path id='path' fill="transparent" stroke='red' stroke-width='6'/>
  <text x="100" y="100" font-family="Verdana" font-size="50" fill="blue" text-anchor='middle'>5</text>
  <circle cx="100" cy="100" fill="black" r="2"/>
  <circle cx="100" cy="50" fill="black" r="2"/>
</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;       
}

$('#path').attr("d", describeArc(100, 100, 50, 0, 180));