[illwrks]

So.. I don't know what you're talking about but I work in a corporate environment where we can't use JS but we can use SVG images... As a consequence I end up creating graphics in illustrator, exporting to SVG and then hand animating them with CSS animations.

I wouldn't recommend doing it my way, but for path animations they are likely animating the stroke length. Here is an example that might help, but use an animation tool if you can.

https://css-tricks.com/svg-line-animation-works/

One thing of note with stroke animations.. if you transition to/from negative numbers the animation breaks in Safari (negative numbers are out of spec aparently). There is a work around but I can't remember it at the moment, it results in the stroke animation playing in reverse though.

As mentioned above, if you can use a JS library, use one.

[trebeljahr]

nice, thanks for the article. Never seen this trick before but it looks super neat.

What sort of JS library would you recommend for a similar effect to this? PixiJs, D3, Paper, P5.js, good old vanilla canvas?

[illwrks]

It depends on what your overall goal is. GSAP is a great but I’m not sure it’s suitable for SVG as it’s been a long time since I’ve used it.

If you have access to creative tools like illustrator and after effects then perhaps Lottie.

There are other tools on my radar but I’ve never used them SVGGator