In today’s quick tip I’m going to show you how to morph one SVG shape into another using a tool called Shape Shifter by Alex Lockwood.

Watch Screencast

Shape Shifter (amongst other things) takes imported SVGs and morphs them automatically into one another. As long as the two SVGs have the same number of path nodes the animation between the shapes will be perfectly smooth.

In this quick tip we’ll be taking a “hamburger menu” icon and morphing it into a “close” icon (a fairly classic use case).

Check out the video to see how it’s done!

Useful Resources

• shapeshifter.design
• SVG tutorials on Tuts+