4 ms·
The background on my website is an SVG, I wonder what other sorts of interesting animations can be applied using this method.
by Adamantcheese 8y ago
The background on my website is an SVG, I wonder what other sorts of interesting animations can be applied using this method.
- kabes 8y agoYou 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 8y agoThat was really great. And explained much better. Didn't know you could do that with SVG
- Kagerjay 8y agoI 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 8y agoYour slides on SVG, Canvas and WebGl were very interesting and informative. I learnt quite a bit! Thanks.
- Kagerjay 8y agothanks :)