Paste a full <svg> or just the d attribute of a path, and it draws itself stroke by stroke, in order, with a stagger you control.
Six triggers: on entering the viewport, immediately, on hover, on click, on a loop, and scroll-linked — where the drawing runs forward and backward with the wheel. An optional Replay button is built in.
A ghost of the finished drawing sits underneath at an opacity you choose, so the shape reads even before it is drawn. Optional fill once the outline closes. Impose your own stroke colour and width, or leave the pasted file's own colours untouched.
One thing worth knowing: the stagger applies per <path>, not per sub-path. A single path containing several M commands draws as one block — split your letters or shapes into separate paths and the cascade becomes visible.
Pure SVG, no dependencies. Honours prefers-reduced-motion, and shows the completed drawing inside the Framer canvas.
Paste a full <svg> or just the d attribute of a path, and it draws itself stroke by stroke, in order, with a stagger you control.
Six triggers: on entering the viewport, immediately, on hover, on click, on a loop, and scroll-linked — where the drawing runs forward and backward with the wheel. An optional Replay button is built in.
A ghost of the finished drawing sits underneath at an opacity you choose, so the shape reads even before it is drawn. Optional fill once the outline closes. Impose your own stroke colour and width, or leave the pasted file's own colours untouched.
One thing worth knowing: the stagger applies per <path>, not per sub-path. A single path containing several M commands draws as one block — split your letters or shapes into separate paths and the cascade becomes visible.
Pure SVG, no dependencies. Honours prefers-reduced-motion, and shows the completed drawing inside the Framer canvas.
