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.