How to animate a dashed line from a SVG (using HTML, CSS and/or JavaScript)

Question

I'm making a design, that needs to have a bunch of different dashed lines animated. I need it done exactly how this Codepen does it: https://codepen.io/Evgeny/pen/IEGoq

But when I copy my own SVG-code into that pen, then it doesn't animate.

This is my SVG-code:

<svg width="1400px" height="892px" viewBox="0 0 1400 892" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="outer-vector" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="19.796,19.796">
        <g id="inner-vector" transform="translate(-40.000000, -65.000000)" stroke="#34A9D6" stroke-width="2">
            <path d="M41,956 C436.408926,930.206693 476.595836,649.998441 667.229605,409.842185 C811.794179,227.722893 1042.8769,68.6364821 1581,61" id="Stroke-3"></path>
        </g>
    </g>
</svg>

If I just copy that in, then it's just static.

If I then add the class path to the <path>-object, then it's animating, but not like the original line was.

How can I animate my dashed SVG-file, in the same fashion as that Codepen?

There's also this Pen here ( https://codepen.io/nevolgograd/pen/WOLaKB ), that has an effect that I'm after, but my dashed SVG-line doesn't animate there either.

Addition1

The dashed lines need to be on top of images, - so I can't simply make a second line on top of the first one, that gets gradually removed with the stroke-dashoffset/dasharray trick.

Chris W. · Accepted Answer · 2019-08-20 18:48:32Z

1

So unfortunately most things won't just magically work by copy/pasting something into a different example. So what you'll see here will get you closer to what you're looking for and after some effort's given tweaking your values to get exactly what you want come on back if you're still blocked and we'll get you sorted but personally I'm not a fan of providing a full answer when the only effort shown is pasting something into something else and expecting it to just work without trying to learn why it's not working the way it's expected to.

Look at the differences in your samples, the <g> tags are innocuous among other things and the stroke properties need to match your own sample not theirs.

You'll notice I changed a few things to get ya started, cheers!

.dashed{
  stroke-dasharray: 10;

}
.path {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: dash 2s linear alternate infinite;
}

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

<svg width="700px" height="446px" viewBox="0 0 1400 892" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="outer-vector" stroke="none" stroke-width="1" fill="none" stroke-linejoin="round" fill-rule="evenodd" stroke-dasharray="19.796,19.796">
        <g id="inner-vector" transform="translate(-40.000000, -65.000000)" stroke="red" stroke-width="4">
            <path class="stroke" stroke-miterlimit="10" d="M41,956 C436.408926,930.206693 476.595836,649.998441 667.229605,409.842185 C811.794179,227.722893 1042.8769,68.6364821 1581,61" id="Stroke-3"></path>
        </g>
    </g>
  <g id="outer-vector2" stroke="none" stroke-linejoin="round" stroke-width="2" fill="none" fill-rule="evenodd" stroke-dasharray="19.796,19.796">
        <g id="inner-vector2" transform="translate(-40.000000, -65.000000)" stroke="white" stroke-width="4">
            <path class="path" stroke-miterlimit="10" d="M41,956 C436.408926,930.206693 476.595836,649.998441 667.229605,409.842185 C811.794179,227.722893 1042.8769,68.6364821 1581,61" id="Stroke-32"></path>
        </g>
    </g>
</svg>

answered Aug 20, 2019 at 18:48

Chris W.

23.4k4 gold badges63 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zeth Over a year ago

The copy-pasting-explanation was to make it easy to reproduce for others who want to try and take the same steps I took and recreate my challenge. I just added an extra fact that I forgot the mention; that the dashed line needs to be on top of images. So the extra SVG-line + the dashoffset/dasharray-trick can't help me.

Chris W. Over a year ago

@Zeth ah ya, that does change things a bit. Can you use SMIL or are does it have to be css only?

Collectives™ on Stack Overflow

How to animate a dashed line from a SVG (using HTML, CSS and/or JavaScript)

Addition1

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Addition1

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related