Strange behaviour of dasharray property in a SVG c

Question

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

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

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

Answer 1

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>

Answer 2

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.