Shape morph

Full motion specification

How the movement works

Use it to turn one icon or logo into another without a cut.

1. 01Four shapes, 1.175 s each: circle → square with rounded-off corners → star → heart → back to circle. Base radius 64.
2. 02Each segment holds first, then morphs to the next shape between 0.62 s and 0.04 s before its end (0.58 s).
3. 03Every outline is stored as 240 points; points with the same index are linearly interpolated. Progress uses backOut (s = 1.6), so it overshoots slightly.
4. 04Colour: blue → coral → yellow → mint, blended with quadratic ease-in-out.
5. 05During the morph the scale swells by 1 + 0.07 × sin(π × progress).
6. 06Four dots below; the dot for the current shape is larger and coloured.