SVG draw animated semi circle not working with dashed

Question

I am trying to animate draw a dashed semi circle with svg

<svg id="processArrowPath" xmlns="http://www.w3.org/2000/svg" height="220">
  <circle class="path" cy="110" cx="110" r="100"></circle>
</svg>

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

circle {
  stroke-width: 2;
  stroke-opacity: 1;
  stroke-dasharray: 5,5;
  stroke: #E0236C;
  fill: none;
}

Here is an example on jsfiddle All I need is the top animation but dashed instead of solid. https://jsfiddle.net/60drrzdk/1/

I hope someone can point me in the right direction.

Paul LeBeau · Accepted Answer · 2016-02-12T11:34:28.613

The simulated drawing effect using dashoffset only really works with solid lines. That is because it works by setting a dash pattern that matches the length of the path and then shifting it with dashoffset. You can't use a dash pattern for this because the little dashes will move when the dash offset changes, ruining the effect.

If you don't mind the dashes moving, then all you need to do to fix your example is to construct the dash pattern correctly and leave it alone, while you change the dash offset.

.path {
  stroke-dashoffset: 628.3;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

circle {
  stroke-width: 2;
  stroke-opacity: 1;
  stroke-dasharray: 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
                    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
                    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
                    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
                    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
                    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
                    5 5 5 5 5 5 0 630;
  stroke: #E0236C;
  fill: none;
}

<svg id="processArrowPath" xmlns="http://www.w3.org/2000/svg" height="220">
  <circle class="path" cy="110" cx="110" r="100"></circle>
</svg>

The circumference of the circle is 628.3. So we need to make a dash pattern that consists of "5,5" pairs to make up a length of approx 630, then a 630 gap.

If you don't want the dashes to move like that, then you need to get a bit trickier and use some other technique. For example you would leave the dash pattern alone, and instead use a mask or clip path to reveal your path.

Thank you your example looks good so I will try this and use js loop to create the dasharray. — user828941, Feb 12 '16 at 13:33

score 0 · Answer 2 · answered Feb 12 '16 at 04:49

0

I am not an expert in SVG but I can see that you have conflicted CSS class i.e. "#dashedExample .path" and ".path {". You have applied two different values of "stroke-dasharray" in these class. If you set value to "5 5" it works fine.

if you remove below code

#dashedExample .path {
 stroke-dasharray: 5 5;
}

and modify "stroke-dasharray value from 1000 to '5 5'", it shows dashed semi circle. Hope this helps you.

answered Feb 12 '16 at 04:49

Nitin Garg

888
6
7

I can see it is being animated but it is dashed. do you want only dashed semi circle and no animation? If you don't want animation remove below css also @keyframes dash { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } – Nitin Garg Feb 12 '16 at 04:56

SVG draw animated semi circle not working with dashed

2 Answers2