title: Increasing the size of an SVG circle
body: <p>I came across this fiddle:</p>
  
  <p><a href="http://jsfiddle.net/wz32sy7y/1/" rel="nofollow">http://jsfiddle.net/wz32sy7y/1/</a></p>
  
  <p>I'm having a hard time understanding how I would expand the circle to have a bigger radius.</p>
  
  <p>I tried change the radius property <code>r</code>, but this desynchronizez the animation.</p>
  
  <p>The radius seems to be some magical number, but I cannot determine how it's calculated. </p>
  
  <pre><code> &lt;svg width="160" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
       &lt;g&gt;
        &lt;title&gt;Layer 1&lt;/title&gt;
        &lt;circle id="circle" class="circle_animation" r="79.85699"
         cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/&gt;
       &lt;/g&gt;
   &lt;/svg&gt;
  </code></pre>