Path draw
SVG line illustrations whose stroke layers draw in turn when in view or tied to scroll, with fills fading in at the end; fully drawn under reduced motion.
Preview
Draws once in view
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | "inView" | "scroll" | "inView" | PathDraw: draw once when visible, or tie the drawing to scroll. |
| layers | number | 3 | PathDraw: number of stroke layers, drawn one after another. |
| duration | number | 1.4 | PathDraw: seconds for an inView drawing. |
| container | RefObject<HTMLElement> | — | PathDraw: scroll container for scroll mode. |
| label | string | — | PathDraw: accessible name; without it the drawing is decorative. |
| layer | number | 0 | DrawPath: which layer the stroke belongs to. DrawFill fades in at the end. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.