1. Web Design
  2. SVG

Quick Tip: Easily Morph SVGs Using Shape Shifter

Read Time:1 minLanguages:

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).

shape shifter demoshape shifter demoshape shifter demo

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

Useful Resources

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.