title: How to change size of SVG circle
body: <p>I want to resize my first SVG circle from <a href="http://jsfiddle.net/1zekermit/t7jgL9pa/10/" rel="nofollow">here</a>, so I made the second, but there is a problem in the animation, the animation is not the same.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="loader"&gt;
      &lt;svg class="circular"&gt;
          &lt;circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  
  
  &lt;div style="margin-top: 50px;" class="loader"&gt;
      &lt;svg class="circular"&gt;
          &lt;circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body, svg, circle {
      margin: 0px !important;
      padding: 0px !important;
  }
  .loader {
      position: relative;
      margin: 0px auto;
      padding: 0px;
      width: 100px;
      height: 100px;
      zoom: 1;
      background-color: grey;
  }
  .circular {
      -webkit-animation: rotate 3s linear infinite;
      animation: rotate 3s linear infinite;
      height: 100px;
      position: relative;
      width: 100px;
  }
  .path {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
      -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
      animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
      stroke-linecap: round;
  }
  @-webkit-keyframes rotate {
      100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  @keyframes rotate {
      100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  @-webkit-keyframes dash {
      0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
      }
      50% {
          stroke-dasharray: 89, 200;
          stroke-dashoffset: -35;
      }
      100% {
          stroke-dasharray: 89, 200;
          stroke-dashoffset: -124;
      }
  }
  @keyframes dash {
      0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
      }
      50% {
          stroke-dasharray: 89, 200;
          stroke-dashoffset: -35;
      }
      100% {
          stroke-dasharray: 89, 200;
          stroke-dashoffset: -124;
      }
  }
  @-webkit-keyframes color {
      100%, 0% {
          stroke: #d62d20;
      }
      40% {
          stroke: #0057e7;
      }
      66% {
          stroke: #008744;
      }
      80%, 90% {
          stroke: #ffa700;
      }
  }
  @keyframes color {
      100%, 0% {
          stroke: #d62d20;
      }
      40% {
          stroke: #0057e7;
      }
      66% {
          stroke: #008744;
      }
      80%, 90% {
          stroke: #ffa700;
      }
  }
  </code></pre>
  
  <p>How to properly resize it? </p>