Since you're using stroke-dasharray
on a circle, you need to use π (3.14159265) to get even spacing.
Given the formula spacing = (radius × 2) × 3.14159265 ÷ numberOfCircles
, your SVG circle would be <circle r="{radius}" stroke-dasharray="0.001, {spacing}"/>
.
To achieve the spiral effect, apply a rotation of 360 ÷ numberOfCircles ÷ 2
to every other ring. I used CSS to accomplish this, circle:nth-child(even)
being the selector and -webkit-transform: rotate( {rotation} );
being the style applied.
1 Note that the spiral is visible in webkit browsers only. Also, the rings are slightly misaligned on the right for, to my knowledge, unknown reasons.