I have a series of circles with borders comprised of smaller circles which I will call 'dots'. I am then animating the circles by rotating them with CSS3's transform
, each by either 5 or 15 degrees (alternating) more than the last starting with the middle circle not rotating at all. This alternating of degrees is due to the original offset of half of them of 5deg
The animation itself works great, but the offset between each dot in a circle is not consistent. This is made obvious when the animation completes, some dots jump back. If they were all off by a consistent amount then it would be an error in my calculations, but dots around the same circle jump different amounts, meaning that they are offset different amounts to begin with. Vals, in his example at the end of his answer, also shows this inconsistency in offset
Here is how each circle is set up. The spacing in between each dot was determined by using the formula spacing = (radius × 2) × 3.14159265 ÷ numberOfCircles
. The .001
is to allow Chrome to see the dots
<circle cx="30" cy="30" r="radius" stroke-dasharray="0.001, spacing" stroke="color"/>
Can anyone help me fix this SVG rendering offset bug?
EDIT
vals and squeamish ossifrage both provided wonderfully working alternative solutions to the problem. However, I'm still looking to actually fix the offset/rendering issue if such a thing is possible
I think that there are 2 slight mistakes in your setup.
The first is that the spacing of your dots is the sum of the 2 parameters to the stroke-dash array. Since the first parameter is always 0.001, the second one should be the result of your formula minus 0.001.
The second one is that you are placing 36 dots around the circle. That gives 10 degrees for the angle from dot to dot. So, your animations should specificy 10deg, 20deg, 30deg for the series, and not 15deg 30deg 45deg ... That creates a jump of 5 deg at the end of every cycle.
I think that I have it more or less working
fiddle
There was also an issue with the initial rotation; I hope that now it is what you wanted.
And also, there was some kind of round up due to the small size of the svg; setting it to 600 square works much better.
I have also added a line at 10 deg to check the correct alignment of the dots.
CSS
And also optimized a little bit the styles
Well, after a lot of time spent with that issue, I am almost sure that there is some kind of bug in some kind of rounding / precision.
I have changed the idea fully to avoid this issue. The target will be to have the circles make full circles before ending the animation, so that the beginning and the end of the animation are always in sync.
Since that generates an huge keyframes style, I want to reuse it; to achieve this I have grouped the circles in a nested way; and applied the animation to every group:
HTML
(yes, back to the low resolution !)
CSS
And new demo (Sorry, only webkit)
This is my attempt to investigate the errors. I have changed the system, instead of animation, I have 2 sets of circles, one in color and another in black over it, and rotated 10 deg. The color circles shouldn't show; the offset is a measure off the error. (may be you need to scroll to see the circles
offsets demo