animation glossary
SVG Morph
An SVG morph animates a shape smoothly changing from one outline into another by interpolating the points of two vector paths.
What is SVG Morph?
SVG morph is how icons and shapes transform into each other without cuts: two paths with matching point counts interpolate smoothly, so a circle can grow into a rounded card or an icon into a brand mark. It is the backbone of logo reveals and icon transitions. The shots below show primitive shapes morphing into cards and UI-to-brand transforms.
SVG Morph in Remotion
Every shot below is a real, renderable Remotion composition. Open the detail page for the recipe notes, then copy the agent brief to implement the shot from tuned TSX.
Implement svg morph
Copy the agent brief for the first shot to have an AI agent build it from the reference TSX.
Frequently asked questions
What is an SVG morph?+
An SVG morph animates one vector shape turning into another by interpolating the points of the two paths — so a circle can grow into a square or an icon into a brand mark, without a visible cut.
How do you morph between two SVG shapes?+
The two paths need the same number of points, ordered the same way. Resample them into equal-length point lists, then interpolate each point's position over time. Evenly distributed points keep the morph clean.
When does SVG morph work best?+
Logo and icon transitions, UI state changes that share a visual anchor, and loading-to-content morphs. It reads as premium and continuous compared to a hard swap.