Shape morphing

A path's shape can be animated like any other property: its Morph track keeps the shape at each keyframe, and the editor blends the nodes between them. Morph into turns one shape into another in one go.

WHAT YOU’LL MAKE

The blob grows points and flies into the star's place in a second and a half, holds there, and starts over. This one is the real exported SVG, playing.

Step by step

1. Select the blob

   Click the blob on the canvas, or its row in the Layers panel. The Morph section near the bottom of the inspector has what shapes can do: the node count, the Morph , Edit nodes and Morph into.

2. Move the playhead to 1.5s

   Drag the red playhead along the time ruler to 1.5s. That is where the new shape will be.

3. Morph into the star

   In the Morph section, open Morph into and pick Star. The blob gets a Morph track: its own shape at 0s, the star's at the playhead. The star layer is hidden, since the blob now becomes it.

4. Click Edit nodes

   Click Edit nodes in the Morph section (it now reads Done editing). The blob's nodes show on the canvas, as they are at the playhead.

5. Drag a node

   Drag the star's top point up. With a Morph track, moving a node changes the Morph keyframe at the playhead, or adds one when there is none there yet.

6. Play it

   Press Space. The blob grows its points on the way to the star, holds the new shape until the end of the 3-second animation, and starts over.

Keys