JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<svg>
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />
</svg>

<script src="https://d3js.org/d3.v3.min.js"></script>

CSS

svg {
  height: 1000px;
  width: 1000px;
}

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 startAngleInitial = startAngle;
		if(startAngle > 360){
    console.log("B4", startAngle)
   	// startAngle = startAngle % 360;
     //console.log("AFTER", startAngle)
    }
    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);
		var c =  endAngle - startAngleInitial  >= 0;
   //console.log(c, endAngle, startAngle, endAngle - startAngle)
     var sweepFlag =  c ? 0 : 1;
     //startAngle = startAngle  % 360;
     
     var a = Math.abs(endAngle - startAngle) ;
    var largeArcFlag = a > 180 && a < 360? "1" : "0";
    if(!c){
    //console.log(" Math.abs(endAngle - startAngle)",  Math.abs(endAngle - startAngle))
    }
    var xAxisRotation = sweepFlag ? 1 : 0;

		var d = [
        "M", start.x, start.y, 
        //A rx ry x-axis-rotation large-arc-flag sweep-flag x y
        "A", radius, radius, xAxisRotation, largeArcFlag, sweepFlag, end.x, end.y
    ].join(" ");
    
    return d;       
}

  var i = 0;
  var interval = setInterval(function(){
    i++
  
    if (i/360 > 3) {
      i = 0;
      // clearInterval(interval);
    }
    else{
     document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, i, 270));
    }
 }
 , 10);