Pie Chart using SVG
<p>I want to create a pie chart that indicates progress 8/8 as whole and 4/8 as half. I already manage to create one but it seems that it started on the 90 degrees angle. i want it to start from 0 degrees. I dont want to use rotation because it has a <strong>Text</strong> inside</p>

<p>this is what i have so far</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>.pie-assign {
  border-radius: 50%;
}

.pie-assign circle {
  fill: yellow;
  stroke: red;
  stroke-width: 30;
}

.circle-0 { stroke-dasharray: 0 100; }
.circle-1 { stroke-dasharray: 12.5 150; }
.circle-2 { stroke-dasharray: 25 100; }
.circle-3 { stroke-dasharray: 37.5 100; }
.circle-4 { stroke-dasharray: 50 100; }
.circle-5 { stroke-dasharray: 62.5 100; }
.circle-6 { stroke-dasharray: 75 100; }
.circle-7 { stroke-dasharray: 87.5 100; }
.circle-8 { stroke-dasharray: 105 100; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:100px; height: 100px;"&gt;
&lt;svg class="pie-assign" viewBox="0 0 30 30"&gt;
  &lt;circle class="circle-1" r="15" cx="15" cy="15" /&gt;
  &lt;text x="50%" y="50%" text-anchor="middle" fill="gray" dy=".3em"&gt;A&lt;/text&gt;
&lt;/svg&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>any help would be appreciated.</p>