JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<svg width="200" height="200">
    <path class='circle' d="
    M 100,100
    m -90, 0
    a 90,90 0 1,1 180,0
    a 90,90 0 1,1 -180,0
    " />
   <path  id='arc' d="
          
    " />    
</svg>

CSS

.circle{
    stroke-width:2px;
    stroke:red;
    fill:none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 1.5s linear forwards;
}
@keyframes dash {
  
    to {
    stroke-dashoffset: 0;
    
  }
}
#arc{
    stroke:blue;
    fill:none;  
    stroke-width:2px;
    animation: dash1 1.5s linear forwards;
}
@keyframes dash1 {
    from{
        fill:transparent;
    }
    to {
    stroke-dashoffset: 0;
    fill:blue;
  }
}

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,
        "L", x,y,
        "L", start.x, start.y
    ].join(" ");

    return d;       
}

document.getElementById("arc").setAttribute("d", describeArc(100, 100, 90, 20, 260));