title: svg circle showing as square
body: <p>I am trying to use an svg to make a pie chart so I found this <a href="https://codepen.io/rvmook/pen/LNLGoE" rel="nofollow noreferrer">codepen</a> that has an animated pie chart</p>
  
  <p>I am trying to make that pie chart 20 x 20 instead of 50 x 50 so I thought I could just change the width and height and then half that for the radius, and center points.</p>
  
  <p>I also changed the stroke width in the css to 20 and the circumference to 63 (2 x pie x 10) so I am not sure what else I need to change to make the square back into a circle.</p>
  
  <p>However, I get a weird bug in that the pie piece turns into a square: <a href="https://codepen.io/anon/pen/prwXyM" rel="nofollow noreferrer">click on the 100% button</a>.</p>
  
  <p>Is there anyway to make that second circle into a circle again?</p>
  
  <p>I have included the following snippet but it doesn't allow for scss so I could not get it to replicate the pen, but it demonstrates the square issue.</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-css lang-css prettyprint-override"><code>body {
    /* Appearance */
    background-color: #2c333b;
  }
  
  a, h5, h3 {
    /* Display &amp; Box Model */
    margin: 10px 0;
    /* Text */
    font-family: sans-serif;
    font-weight: normal;
    letter-spacing: 1px;
    /* Appearance */
    color: #fff;
  }
  
  .svg {
    /* Appearance */
    transform: rotate(-90deg);
  }
  
  .circle {
    /* Appearance */
    fill: #fdded9;
  }
  
  #pie {
    /* Appearance */
    stroke: #ff4081;
    stroke-dasharray: 0 63;
    stroke-width: 20;
    transition: stroke-dasharray .2s linear;
  }
  #pie.percent-10 {
    stroke-dasharray: 6.3 63;
  }
  #pie.percent-20 {
    stroke-dasharray: 12.6 63;
  }
  #pie.percent-30 {
    stroke-dasharray: 18.9 63;
  }
  #pie.percent-40 {
    stroke-dasharray: 25.2 63;
  }
  #pie.percent-50 {
    stroke-dasharray: 31.5 63;
  }
  #pie.percent-60 {
    stroke-dasharray: 37.8 63;
  }
  #pie.percent-70 {
    stroke-dasharray: 44.1 63;
  }
  #pie.percent-80 {
    stroke-dasharray: 50.4 63;
  }
  #pie.percent-90 {
    stroke-dasharray: 56.7 63;
  }
  #pie.percent-100 {
    stroke-dasharray: 63 63;
  }
  
  .wrapper {
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    /* Display &amp; Box Model */
    width: 100px;
    /* Appearance */
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper"&gt;
   &lt;svg width="20" height="20" class="svg"&gt;
    &lt;circle r="10" cx="10" cy="10" class="circle"/&gt;
    &lt;circle id="pie" r="10" cx="10" cy="10" class="circle percent-100"/&gt;
   &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>