2

Let me start out by saying my end goal is something that resembles the image below. It has 36 circles in each of the rings, spaced such that each dot is mid way between two dots in the circle inside of it

I figured out I could use a stroke-dasharray with really small lengths (.001 in my case) and stroke-linecap="round" to make the borders circular dots. The way I have it set up now each circle has a radius 5 bigger than the last and an incremented percentage for the stroke-dasharray. Here is my jsFiddle. Currently My inner most ring only has 21 dots and my outermost ring has 29 dots

How can I get the same number of dots per circle? Is there a mathematical way to do this or an attribute that I am unaware of? What can be done to evenly space out the circles using the whole circumference equally (instead of having some on the right side of the what I perceive as the x-axis)?

It seems to me that I would have to simply guess and check with the values in order to get it the way I want but I would love to be proven wrong. The stroke-dasharray documentation on Mozilla and W3C aren't very useful

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147

1 Answers1

2

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.

I forked your JSFiddle1.

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.

Tyler Eich
  • 4,239
  • 3
  • 21
  • 45
  • Your fiddle seems to not be working? I'll try your formula and see how it works – Zach Saucier Dec 05 '13 at 04:42
  • 2
    I think the fiddle works in some browsers, but not in Chromium for example – Ian Dec 05 '13 at 09:49
  • Good call @Ian. Chrome Canary doesn't like `0` length in `stroke-dasharray`. Updated post with new JSFiddle. – Tyler Eich Dec 05 '13 at 12:00
  • @TylerEich Is there any way to get the strokes more consistently spaced? There seem to be small inconsistencies. For example in [**this demo**](http://jsfiddle.net/Zeaklous/75WsM/12/) I rotate one of the rings so that each dot moves to the next dot's location (webkit only as-is), which makes the inconsistencies obvious – Zach Saucier Dec 05 '13 at 18:30
  • Here's it with all of them animated: http://jsfiddle.net/Zeaklous/75WsM/13/ Still need to fix the spacing – Zach Saucier Dec 05 '13 at 18:44
  • @ZachSaucier I haven't found any way to accomplish this. I tried using `stroke-dashoffset`, but no dice. – Tyler Eich Dec 05 '13 at 21:27