A few little pens

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s