27
Found a way to animate SVG line drawings with just CSS keyframes
I spent last Wednesday trying to get a simple path drawing animation to work for a client's logo. After hours of messing with JavaScript libraries, I remembered you can just use stroke-dasharray and stroke-dashoffset with a simple keyframe animation. It took me about 20 minutes to set up once I got the numbers right. Has anyone else found unexpected CSS tricks for SVG animations that save you from pulling in extra code?
2 comments
Log in to join the discussion
Log In2 Comments
simonreed10d ago
Used to think you needed JavaScript for anything non-trivial with SVG, but CSS has quietly gotten really capable for this stuff. Totally changed my mind on what's possible without a library.
6