title: How can I stroke svg multiple circles up to 100 percent?
body: <p>I followed a simple example on how to build a simple svg chart. I tried to add multiple circles in the same viewBox which will be filled with color between 0 to 100% but I can’t stroke them to 100%. </p>
  
  <p>stroke-dasharray="75,100"
  stroke-dasharray="100,100"</p>
  
  <p>Here is the codepen link. Anyone with the any idea or work around</p>
  
  <p>[<a href="https://codepen.io/malawi-realestate/pen/MzKpwp][1]" rel="nofollow noreferrer">https://codepen.io/malawi-realestate/pen/MzKpwp][1]</a> </p>
  
  <pre><code>&lt;svg class="circular-chart" viewBox="0 0 50 50"&gt;&lt;path class="circle-bg" d="M18 1
                a 23.4155 23.4155 0 0 1 0 46.831
                a 23.4155 23.4155 0 0 1 0 -46.831"&gt;&lt;/path&gt;&lt;path class="circle circle-ok" d="M18 1
                a 23.4155 23.4155 0 0 1 0 46.831
                a 23.4155 23.4155 0 0 1 0 -46.831" stroke-dasharray="100, 100"&gt;&lt;/path&gt;&lt;path class="circle-bg" d="M18 4
               a 20.4155 20.4155 0 0 1 0 40.831
               a 20.4155 20.4155 0 0 1 0 -40.831"&gt;&lt;/path&gt;&lt;path class="circle circle-bad" d="M18 4
               a 20.4155 20.4155 0 0 1 0 40.831
               a 20.4155 20.4155 0 0 1 0 -40.831" stroke-dasharray="75, 100"&gt;&lt;/path&gt;&lt;path class="circle-bg" d="M18 7
               a 17.4155 17.4155 0 0 1 0 34.831
               a 17.4155 17.4155 0 0 1 0 -34.831"&gt;&lt;/path&gt;&lt;path class="circle circle-none" d="M18 7
               a 17.4155 17.4155 0 0 1 0 34.831
               a 17.4155 17.4155 0 0 1 0 -34.831" stroke-dasharray="50, 100"&gt;&lt;/path&gt;&lt;path class="circle-bg" d="M18 10
               a 14.4155 14.4155 0 0 1 0 28.831
               a 14.4155 14.4155 0 0 1 0 -28.831"&gt;&lt;/path&gt;&lt;path class="circle circle-empty" d="M18 10
               a 14.4155 14.4155 0 0 1 0 28.831
               a 14.4155 14.4155 0 0 1 0 -28.831" stroke-dasharray="80, 100"&gt;&lt;/path&gt;&lt;text class="percentage" x="18" y="26"&gt;5.5&lt;/text&gt;&lt;text class="chart-text" x="18" y="30"&gt;Your score&lt;/text&gt;&lt;/svg&gt;
  </code></pre>