Little interactions are among my favorite things to design. I like little details like these because, when you add them all up, they make for a better user experience.
Over the coming weeks, I’ll post pens here for various animations I’ve created. I’ll start with a (super) simple SVG hamburger menu.
Generally, my process involves using Illustrator to create the SVG. You can select your art and paste it directly into an editor like codepen. Anything more than a few simple shapes in your SVG you should probably take the advice of Chris Gannon and use the “Export Asset panel for cleaner, smaller, tidier output”. The important bit about working with SVG, especially if you’re just learning, is to keep your shapes simple. If you’re looking to work with something like DrawSVG from GreenSock, you’ll want to make sure your art is comprised of strokes, not fills.
If you are just getting started with SVG you could try checking out this blog: tutorials.jenkov.com
Want to dig in deeper? Check out SVG Animations
by Sarah Drasner who offers some great tips.