title: SVG: filled arc animation?
body: <p>This question is an extension of <a href="https://stackoverflow.com/questions/3256943/define-a-circle-arc-animation-in-svg">Define a circle / arc animation in SVG</a> and <a href="https://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle/43211655#43211655">How to calculate the SVG Path for an arc (of a circle)</a>.</p>
  
  <p>I have modified the answer of <a href="https://stackoverflow.com/a/18473154/5623899">@opsb</a> as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function calculateArcPath(x, y, radius, spread, startAngle, endAngle){
      var innerStart = polarToCartesian(x, y, radius, endAngle);
     var innerEnd = polarToCartesian(x, y, radius, startAngle);
      var outerStart = polarToCartesian(x, y, radius + spread, endAngle);
      var outerEnd = polarToCartesian(x, y, radius + spread, startAngle);
      var largeArcFlag = endAngle - startAngle &lt;= 180 ? "0" : "1";
    
      var d = [
          "M", outerStart.x, outerStart.y,
          "A", radius + spread, radius + spread, 0, largeArcFlag, 0, outerEnd.x, outerEnd.y,
          "L", innerEnd.x, innerEnd.y, 
          "A", radius, radius, 0, largeArcFlag, 1, innerStart.x, innerStart.y, 
          "L", outerStart.x, outerStart.y, "Z"
      ].join(" ");
  
      return d;
  }
  
  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))
    };
  }
  
  var startPath = calculateArcPath(250, 250, 50, 30, 0, 30)
  var endPath = calculateArcPath(250, 250, 50, 30, 0, 150)
  
  d3.select("path").attr("d", startPath)
  d3.select("path").transition().duration(2000).attr("d", endPath)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;svg width="500" height="500" style="border:1px gray solid"&gt;  
    &lt;path id="path" fill="blue" stroke="black"&gt;&lt;/path&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, the path isnt a smooth transition around the circle. </p>