title: Resize donut chart that's using SVG circles whilst maintaining the proportions of the segments
body: <p>I am <a href="https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72" rel="nofollow noreferrer">following a tutorial</a> which goes into details on creating donut charts using SVG circles and strokes.</p>
  
  <p>However, am struggling to work out how I can resize the final object to any size to my liking, for example, I want the donut chart to scale fully to whatever the svg element is set to (in this case 500x500). </p>
  
  <p>My goal is to start off at 500x500 donut chart and resize later (based on the presence of css class) to 50x50</p>
  
  <p>This is the basic code (but see jsfiddle for the whole thing)</p>
  
  <pre><code>&lt;svg width="100%" height="100%" viewBox="0 0 42 42" class="donut"&gt;
    &lt;circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"&gt;&lt;/circle&gt;
    &lt;circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"&gt;&lt;/circle&gt;
  
    &lt;circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="25"&gt;&lt;/circle&gt;
    &lt;circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b1c94e" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="85"&gt;&lt;/circle&gt;
    &lt;circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#377bbc" stroke-width="3" stroke-dasharray="30 70" stroke-dashoffset="65"&gt;&lt;/circle&gt;
    &lt;!-- unused 10% --&gt;
    &lt;g class="chart-text"&gt;
      &lt;text x="50%" y="50%" class="chart-number"&gt;
        10
      &lt;/text&gt;
      &lt;text x="50%" y="50%" class="chart-label"&gt;
        Beers
      &lt;/text&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/BrightPixels/99symn4L/" rel="nofollow noreferrer">https://jsfiddle.net/BrightPixels/99symn4L/</a></p>