How to Animate SVG Strokes

SVGs are light-weight code drawings, which means you can animate their different paths or segments. In this short video, I’ll show you how to animate SVG strokes with CSS Keyframes and how to find and update the stroke-dasharray and stroke-dashoffset with JavaScript.
---------------------------------------
🔗 Key Links 🔗
- Codepen: codepen.io/Coding-in-Public/p...
---------------------------------------
🔗 Other Links 🔗
- Advent of JS: www.adventofjs.com/
- Advent of CSS: www.adventofcss.com/
- My go at the Advent of JS Day 1 challenge: codepen.io/Coding-in-Public/p... (needs some work, but it’s functional and probably 90% the way there with code!)
- SVGator (web tool to create animated SVGs): www.svgator.com/
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
1:09 Animating an SVG stroke with CSS
4:30 Updating SVG stroke animation with JavaScript
11:17 Drawing an SVG arrow with CSS
---------------------------------------
🌐 Connect With Me 🌐
- Website: www.codinginpublic.dev
- Blog: www.chrispennington.blog
- Twitter: / cpenned

[@ryder2356]

Just in case it helps anyone else:
In some cases you can use the pathLength attribute on any element in order to use less abstract numbers for your path animations.
E.g.
And then you can think of your CSS animation properties in terms of 0-100٪
Alternatively, you could use 360 for circles in order to animate using ° degrees

[@christianmottaz7366]

So clear, thanks lot 😊

[@CodinginPublic]

You're welcome 😊

[@_vikramhegde_]

So happy to see this video, I'm participating in the same challenge and was exactly stuck at animating the svg. Thanks for the tut

[@_vikramhegde_]

This might be a dumb question but I'm gonna ask it anyway. What would happen if set the animation duration(in this case animation-duration: 10s) of stroke dash offset as much the time we want it to animate, wouldn't that cut down some JS?

[@CodinginPublic]

Not a dumb question. Yes! That would work; but it would not allow you to make it look like ticking seconds. It would just move in one motion around in 10 seconds. So just up to you what you prefer.

[@_vikramhegde_]

@@CodinginPublic ah, yes that is true. Ticking part of the animation looks much cooler

[@lycan2494]

THANK YOU FOR THIS VIDEO!

[@CodinginPublic]

🙏 you’re welcome!

[@cooltech5441]

Really love this video

[@CodinginPublic]

Great! Thanks for saying something!

[@ArquitetoLocatelli]

If someone is having problems in Safari: at the moment Safari doesn't accept negative values for stroke-dashoffset.
Thanks for the nice tutorial!

[@CodinginPublic]

Ah, yes. I believe that's still the case. I haven't ever found a solution for this. I'm assuming there are some libraries or something that can work cross-browser, but negative stroke-dashoffset do not work properly in Safari. If I remember correctly, they claim to be implementing the speck correctly, but it's still frustrating to have different experiences.

[@collinsk8754]

Great tutorial!

[@CodinginPublic]

Gal you enjoyed it!

[@jpdeseixas]

Great video!

[@CodinginPublic]

Glad you enjoyed it!

[@user-eo4pv7ir3m]

Thanks you're awesome not even the ia can tell me how this exactly work in a way that I could understand god bless you man

[@CodinginPublic]

💪 take that, Artificial Intelligence! lol

[@sovereignlivingsoul]

i'm just getting into working with svg's making myself some logos, i am using the circle a lot, and was earlier thinking about how to cut the top off without using line or bezier curve, trying to animate a rotation is hard enough, this will help, thanks

[@federicoraulmaciasaparicio1339]

Great video. I didn't know the $0 trick to get the total length of the circle.

[@CodinginPublic]

Thanks! Yeah! It’s a useful little trick for interacting with things in the DOM from the browser console.