title: Animate radius in svg with javascript
body: <p>I am trying to create an svg donut chart with vanilla JS. I was able to animate the fill stroke, though I want a pointer that starts from the center and goes to circumference to animate along with the value of donut. I could write a function to draw in the pointer but cannot come up with something to animate it.</p>
  
  <p><a href="https://i.stack.imgur.com/QZZOe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QZZOe.png" alt="Donut animation"></a></p>
  
  <p>My JS goes something like:</p>
  
  <pre><code>var svgCircle = document.querySelector('.progress');
  var progressValue = document.querySelector('.progress__value');
  
  var RADIUS = 108;
  var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
  
  function progress(value) {
    var progress = value / 100;
    var dashoffset = CIRCUMFERENCE * (1 - progress);
    var innerCircle = drawInnerCircle();
    var handOfTheKing = drawHand(value);
  
    progressValue.style.strokeDashoffset = dashoffset;
    svgCircle.appendChild(handOfTheKing);
  
    svgCircle.appendChild(innerCircle);
  
  }
  
  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;
  }
  
  function drawHand(per) {
    var anglePartition = 2*Math.PI/100;
    var percentageWithOffset = per;
    var x = 120 + (120 * Math.cos(anglePartition * percentageWithOffset));
    var y = 120 + 120 * Math.sin(anglePartition * percentageWithOffset);
    var clockHand = document.createElementNS('http://www.w3.org/2000/svg','path');
    clockHand.setAttribute("id", "clockHand");
    clockHand.setAttribute("d", "M 120 120 L" + x + " " + y);
    clockHand.setAttribute("stroke", "black");
    clockHand.setAttribute("stroke-width", '1');
    return clockHand;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/adfiddle/3rsmvpgq/1/" rel="nofollow noreferrer">Here's a fiddle for this.</a></p>
  
  <p>Can anyone help?
  TIA</p>
  
  <p>EDIT: 
  I want help with animating the arrow hand, not the donut fill stroke. </p>
  
  <p><a href="https://i.stack.imgur.com/EAB9V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EAB9V.png" alt="What&#39;s needed"></a></p>