JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="progress" width="240" height="240" viewBox="0 0 240 240">   
        <path d="M8 4 L4 0 L0 4 Z"></path>
    <path id="clockHand" d="M8 210 110 L120" stroke="black" stroke-width="1"></path>
    <circle class="progress__meter" cx="120" cy="120" r="108" stroke-width="2" />    
    <circle class="progress__value" cx="120" cy="120" r="108" stroke-width="12" stroke-dashoffset="678" />

  </svg>

CSS

.progress {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .progress__meter,
  .progress__value {
    fill: none;
  }
  .progress__meter {
    stroke: #e6e6e6;
  }
  .progress__value {
    stroke: #f77a52;
    stroke-linecap: linear;
  
  }

JavaScript

var control = document.getElementById('control');
    var svgCircle = document.querySelector('.progress');
    var progressValue = document.querySelector('.progress__value');

    var RADIUS = 108;
    var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
    progressValue.style.strokeDashoffset = CIRCUMFERENCE;    

    function drawInnerCircle () {

      var innerCircle = document.createElementNS('http://www.w3.org/2000/svg','circle');
      innerCircle.setAttribute("id", "innerCircle");
      innerCircle.setAttribute("cx", "120");
      innerCircle.setAttribute("cy", "120");
      innerCircle.setAttribute("r", '10');
      innerCircle.setAttribute("stroke-width", '1');
      innerCircle.setAttribute("stroke", '#000');
      innerCircle.setAttribute("fill", '#fff');
      return innerCircle;
    }

   progressValue.style.strokeDasharray = CIRCUMFERENCE;

    var starttime

    function plot(timestamp, dist, duration){
      var timestamp = timestamp || new Date().getTime();
      var runtime = timestamp - starttime;
      var progress = runtime / duration;
      progress = inOutQuad(Math.min(progress, 1));
			
      //clock handle animation
      var anglePartition = 2*Math.PI/100;
      var percentageWithOffset = (dist * progress);
      var x = 120 + (120 * Math.cos(anglePartition * percentageWithOffset));
      var y = 120 + 120 * Math.sin(anglePartition * percentageWithOffset);
      var clockHand = document.getElementById('clockHand')
     	clockHand.setAttribute("d", "M 120 120 L" + x + " " + y);
      clockHand.setAttribute("stroke", "black");
      clockHand.setAttribute("stroke-width", '1');
      
      //arc animation
      progressValue.style.strokeDashoffset = CIRCUMFERENCE * (1 - (progress * dist /100));
      if (runtime < duration){ 
        requestAnimationFrame(function(timestamp){ 
          plot(timestamp, dist, duration)
        })
      }
    }
    setTimeout(function(){
    	 requestAnimationFrame(function(timestamp){
        starttime = timestamp...