2

I'm trying to create an infinite animation loop of an SVG circle.

I want to create 12 equal pieces and separate it by some gap.

To calculate value of circle pieces I used k coefficient from an table below So I did 0,25782 * 160 (diameter of my circle) and I got: 41.2512 (it's should be a value of my pieces).

After that I created strokeDasharray prop via that value: 40 1.2512 I thought that it should be correct value.

Looks like it is but when I changed the strokedashOffset prop I saw some artifact at the right side. I don't know why it's happened and how I can fix it (and where I did an mistake)?

Thanks for any help.

Demo here (just change the strokedashOffset to a 408 value and you will see that issue).

https://jsfiddle.net/q8enje9o/

Here my pure svg code

<svg version="1.1" id="svgout_dasharray" baseProfile="full" width="500" 

height="500" viewBox="0, 0, 500, 500" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid black">

<defs></defs>

<circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000" style="stroke-width: 30;stroke-dasharray: 40, 1.2512;stroke-dashoffset: 380;"></circle>
</svg>

Table of k coef. n - count of circle pieces

enter image description here

Here is the formula how you can calculate those coef. by itself

n - count of pieces

360 - 2*PI (a whole circle)

k - our coef. that we want to find

enter image description here

P.S. Here is a demo with the issue after update (Chrome latest & Windows 10) enter image description here

Velidan
  • 5,526
  • 10
  • 48
  • 86

2 Answers2

5

The circumference of the circle / sum of the stroke-dasharray values needs to be an integer if you want evenly spaced lines and it isn't in your case.

So you probably want something like stroke-dasharray: 40, 1.8879; which should work with any stroke-dashoffset value.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Thank for the answer Robert! I updated my fiddle but it is also isn't working correct (it better than my variant but also isn't perfect). When you try to change stroke-dashoffset: to 418 you will see the little issue. https://jsfiddle.net/3Ltx65xe/1/ – Velidan Jan 12 '17 at 08:31
  • Works fine for me on Firefox on a Mac and on Chrome on Windows. – Robert Longson Jan 12 '17 at 09:41
  • I added the demo into my post, I don't know why but it is =\ – Velidan Jan 12 '17 at 13:34
3

Your question is a little confusing because you talk a lot about how you are calculating the dash array, but complain about things looking funny when you change the dash offset.

The circumference of a circle is 2 * PI * radius. If you want a n sections in your circumference, then the "dash + gap" in your dash array needs to sum to:

(2 * PI * radius) / n

so for 12 sectors, and a radius of 80, that value would be

(2 * PI * 80) / 12 = 41.8879

As Robert said, `stroke-dashoffset="40 1.8879" should work. And indeed it does.

<svg width="500" height="500" style="border: 1px solid black">
  <circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000"
          style="stroke-width: 30;stroke-dasharray: 40 1.8879;"/>
</svg>

Now you also talk about dash offset. I don't know why you want to change the dash offset. I guess you are trying to make the dashes rotate around the circumference of something. Is that right?

If so, then that should work - as long as you are accurate with your dash array values. See below.

<svg width="500" height="500" style="border: 1px solid black">
  <circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000"
          style="stroke-width: 30;stroke-dasharray: 40 1.8879; stroke-dashoffset: 408;"/>
</svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Hi Paul! Thanks for the answer. Yeas, you are absolutely right. I am changing dashoffset to achieve a rotation animation. I tell about circle calculation because I thought that I did some issue in a circle pieces calculation – Velidan Jan 12 '17 at 13:36
  • I attached the demo with the issue that I have after svg update with the actual values of dashh array. I dont understand why it appears. – Velidan Jan 12 '17 at 13:37
  • The reason for that is because that is where the dash pattern on a circle always begins (and ends). Because of that boundary, it will be where any slight difference in rounding between one pixel and the next will show up. With a pattern gap < 2 pixels, you don't have much to play with. There isn't really anything you can do about it - other than making your pattern gap bigger so that it is less obvious. – Paul LeBeau Jan 12 '17 at 16:14
  • Yea are right. I am playing with values and found that this pair is a most beauty in case of infinity animation. stroke-dasharray: 39.8879, 1.9255 (It isn't a result from any formula. It's just a monkey find a correct value. Here is the demo https://jsfiddle.net/3Ltx65xe/4/ – Velidan Jan 13 '17 at 06:52