Math to create SVG pie chart without using CSS or JS - html

Question

I am seeking to create a pie chart in pure SVG. I do not want to use JS or CSS, which most of the solutions on this site utilize. I came across this great article that explains how to create a pie chart in pure SVG: https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart
The problem is that this article only describes how to make only one slice. I am seeking to create a pie chart that can contain up to a maximum of 360 elements (in which each slice of the pie will be ‭0.27‬% of it).
I have attempted to create another wedge in the following example by rotating it to -89 instead of the -90, but I'm not getting the results I'm looking for: https://codepen.io/HexylCinnamal/pen/KKwEjpK
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 20 20">
<circle r="10" cx="10" cy="10" fill="transparent"/>
<circle r="5" cx="10" cy="10" fill="transparent" stroke="tomato" stroke-width="10"
stroke-dasharray="calc(1 * 31.4 / 100) 31.4" transform="rotate(-90) translate(-20)"/>
<circle r="5" cx="10" cy="10" fill="transparent" stroke="blue" stroke-width="10"
stroke-dasharray="calc(1 * 31.4 / 100) 31.4" transform="rotate(-89) translate(-20)"/>
</svg>
I was wondering if there is any math I need to do to calculate the proper angle and translation to make the blue wedge appear next to the red one.

Answer 1

Unfortunately, calc() to calculate the attribute stroke-dasharray only works inChrome
For a cross-browser solution, it is necessary to calculate and assign values in the stroke-dasharray.
stroke-dasharray ="Circumference * 0.35, Circumference" or stroke-dasharray = "31.4 * 0.35, 31.4" or stroke-dasharray="10.99 31.4"
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid gray; ">
<circle r="10" cx="10" cy="10" fill="white" />
<circle r="5" cx="10" cy="10" fill="bisque"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
</svg>
For two segments:
red="35%"
blue="15%" stroke-dasharray = 31.4 * 0.15, 31.4 or stroke-dasharray ="4.71, 31.4"
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; ">
<circle r="10" cx="10" cy="10" fill="white" />
<circle r="5" cx="10" cy="10" fill="bisque"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
<circle r="5" cx="10" cy="10" fill="bisque"
stroke="dodgerblue"
stroke-width="10"
stroke-dasharray="4.71 31.4" />
</svg>
We see that the blue sector overlaps the red sector; therefore, it is necessary to shift the blue sector by an amount equal to the length of the red sector 10.99
Add to shift the blue sector stroke-dashoffset="-10.99"
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; ">
<circle r="5" cx="10" cy="10" fill="bisque" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="dodgerblue"
stroke-width="10"
stroke-dasharray="4.71 31.4"
stroke-dashoffset="-10.99"
/>
</svg>
Four sectors
The solution works in all modern browsers including MS Edge
<!-- https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart -->
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; ">
<circle r="5" cx="10" cy="10" fill="bisque" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="dodgerblue"
stroke-width="10"
stroke-dasharray="4.71 31.4"
stroke-dashoffset="-10.99"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="gold"
stroke-width="10"
stroke-dasharray="9.42 31.4"
stroke-dashoffset="-15.7"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="yellowgreen"
stroke-width="10"
stroke-dasharray="6.28 31.4"
stroke-dashoffset="-25.12"
/>
<text x="10" y="15" font-size="3px" fill="black" >35%</text>
<text x="1" y="14" font-size="3px" fill="black" >15%</text>
<text x="4" y="6" font-size="3px" fill="black" >30%</text>
<text x="12" y="8" font-size="3px" fill="black" >20%</text>
</svg>

Answer 2

One easy way to fix your problem is using a different viewBox: "-10 -10 20 20"making the point 0,0 the center of the svg canvas. Please observe that you don't need the cx and cy attributes anymore and the transformation is only rotating.
I'm supposing that you want to divide the circle in 100 parts. In this case you'll need to rotate the second circle -90 + 360/100 or -90 - 360/100 degs.
circle{stroke-dasharray:calc(31.4 / 100) 31.4;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 20 20">
<circle r="10" fill="transparent"/>
<circle r="5" fill="transparent" stroke="tomato" stroke-width="10" transform="rotate(-90)"/>
<circle r="5" fill="transparent" stroke="blue" stroke-width="10" transform="rotate(-86.4)"/>
</svg>