Shape morph
SVG shape morphing between outlines sampled at equal point counts with our own interpolation and smooth curves, for icons and blob heroes; crossfades under reduced motion.
Preview
Blob hero
Shapes that breathe, not blink
Three outlines, 72 points each, drifting every 2.6 s.
Icon morph
Circle melts into a heart
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "circle" | "squircle" | "triangle" | "star" | "heart" | "blobA" | "blobB" | "blobC" | ((t) => [x, y]) | — | Current shape: a preset, or your own outline function in a −1…1 box. |
| size | number | 120 | Rendered size in px. |
| points | number | 72 | Samples per outline; more points give smoother curves. |
| duration | number | 0.6 | Seconds per morph. |
| pathClassName | string | "fill-foreground" | Fill or stroke classes for the path (tokens). |
| label | string | — | Accessible name; without it the shape is decorative. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.