
Infinite Repeating Dashed Lines in SVG - gk1
https://www.maxmin.io/2019/01/21/Infinite-Repeating-Dashed-Lines-in-SVG/
======
saagarjha
Related, infinite repeating dashed lines _without_ SVG:
[https://www.folklore.org/StoryView.py?project=Macintosh&stor...](https://www.folklore.org/StoryView.py?project=Macintosh&story=MacPaint_Evolution.txt)

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

~~~
kabes
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/](https://css-tricks.com/svg-
line-animation-works/)

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

~~~
Kagerjay
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](https://animejs.com/documentation/#motionPath)

you can checkout my entire slidedeck here on talk

[https://slides.com/vincentntang](https://slides.com/vincentntang)

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

~~~
Kagerjay
thanks :)

