Infinite Repeating Dashed Lines in SVG

maxmin.io

59 pointsgk17 comments

Related, infinite repeating dashed lines without SVG: https://www.folklore.org/StoryView.py?project=Macintosh&stor...

The background on my website is an SVG, I wonder what other sorts of interesting animations can be applied using this method.

You can create a 'drawing effect' by making the dash as big as the entire line. That's a pretty old trick by now. But it only works with strokes, not with fills.

Here's an article that does a better job at explaining it than the post here: https://css-tricks.com/svg-line-animation-works/

That was really great. And explained much better. Didn't know you could do that with SVG

I just researched this extensively, for a talk I did comparing SVG, Canvas, and WebGL

SVG is a normal DOM element if used inline. SVG's specifically have 3 unique types of animation methods. On top of traditional animiations with CSS. See anime.js docs for examples

https://animejs.com/documentation/#motionPath

you can checkout my entire slidedeck here on talk

https://slides.com/vincentntang

Your slides on SVG, Canvas and WebGl were very interesting and informative. I learnt quite a bit! Thanks.

thanks :)

Reply on news.ycombinator.com