Advertisement
  1. Web Design
  2. SVG
Webdesign

Quick Tip: Easily Morph SVGs Using Shape Shifter

by
Difficulty:IntermediateLength:QuickLanguages:

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 demo

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

Useful Resources

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