Animating growing/shrinking pie using SVG and Javascript
<p>I want to create a growing pie animation using Javascript and SVG embedded in HTML. Input should be percentage and output should be an image. It should animate like this:</p>

<p><img src="https://i.stack.imgur.com/Zerv7.png" alt="image description"></p>

<p>This should work like GUI mouse hold action feedback (user needs long press something). This is also why I can't use GIF animation as the timeout may vary.</p>

<p>I tried to make this in Inkscape and then reverse-engineer the XML but I don't understand it at all. There's a <code>&lt;path&gt;</code> node which has property <code>d</code> full of gibberish numbers:</p>

<pre><code>d="m 250.78761,446.46564 a 28.183382,28.183382 0 0 1 -24.596,27.95413 28.183382,28.183382 0 0 1 -30.85751,-20.83773"
</code></pre>

<p>I assume these are some points of path. But can't I just make circle and mention percentage of how it's full? How are these points even generated?</p>

<p>This is what I played with:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
  padding: 0px; 
  margin: 0px;
  border: 1px solid grey;
  }
svg {
  /** to fit svg in the viewbox**/
  max-height: 400px;
  border: 1px solid black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg class="test" viewBox="-20 -20 1000 1000"&gt;

    &lt;path
       id="circle4146"
       style="stroke:#61a4ff;stroke-width:15.00000095;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"
       sodipodi:type="arc"
       sodipodi:cx="140.71873"
       sodipodi:cy="446.46564"
       sodipodi:rx="28.183382"
       sodipodi:ry="28.183382"
       sodipodi:start="0"
       sodipodi:end="1.1720792"
       sodipodi:open="true"
       d="m 168.90212,446.46564 a 28.183382,28.183382 0 0 1 -17.24157,25.97267" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>The sodipodi stuff is probably used by inkscape, changing it has no effect. I know that the <code>d</code> attribute describes complex path. What I really need is for someone to highlight me which points should be moved (using sin and cos I assume) to achieve desired effect.</p>

<p>Also I was unable to adjust the viewport to the circle. Apparently some of the coordinates are not X and Y.</p>