svg animation

Create a new SVG animation now!

New project

Create a morph animation

With the Morph animator, you can change a shape's form and animate the transition between the original form and the new one. Morph animation might seem complicated, but you will see that it's actually very easy to create with SVGator.

Please note that the Morph animator isn't available for other types of elements than path. If your element isn't a path, you can transform it by using the shift + cmd/ctrl + P shortcut. Unfortunately, you can't convert text to path in SVGator.

If your element is a path, select it on the canvas and click on the animators list here:

svg animation

Once you've added the element to the timeline with the Morph animator and the first keyframe, select the Node tool.

svg animation

With this tool you can see the element's nodes. Move the playhead to the next second and try changing the nodes' position by dragging them with your mouse. You can even out the shape by moving the beziers too. In this case, we've transformed the round-shaped butterfly to this:

svg animation

You can multiselect nodes by using the cmd/ctrl keys.

Play the animation from the beginning to see how your element changes its shape. Please note that CSS doesn't support morphing, so you must select JavaScript as the animation type before you would export your file.

You can watch a tutorial on how to create a morph animation with SVGator here.

Related features:

SVG morph animation creator

Advanced morph animation tutorial

Still got questions? Send us an email to and we will get back to you as soon as we can.