Skip to content

component

Draw SVG

By Lucas

Details

Summary

Any SVG path writes itself

Description

Paste a full 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 , 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.

Introduction

Any SVG path writes itself

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600164098/148/228/309/79/15
  • All · #6409