Turn any logo, lettering or icon into a drawing that traces itself line by line, the way a hand would.
Quick SVG animates SVG paths inside your Elements project, giving you a piece of choreography where before there was a static image. The stroke draws itself across the screen, the fill arrives behind it, and an icon travels along the line as it's being drawn.
One thing to know before you start: this component doesn't take an SVG file, it takes the path inside it. Extracting that path is a small step — a few minutes the first time, seconds after that, and the included guide walks you through it. It's also what makes everything else possible. A file can only be shown; a path can be drawn, split into independent layers, given its own colors and shadows, tied to the scroll. If you'd rather not prepare anything, twenty-seven built-in icons work exactly the same way, already set up.
From there, the drawing is yours to direct. Stroke and fill live on separate layers, each with its own colors, gradients, opacity and shadow, so one can move while the other holds still. The drawing can start on page load, wait until it scrolls into sight, or follow the scrollbar frame by frame — turning passive scrolling into something the visitor is part of. Add an entrance motion, a background with overlays and blend modes, a link, or drop a headline and a button right over the artwork to build a full hero section.
Key features:
- Animates any SVG path ― logos, lettering, icons, maps, hand-drawn strokes.
- Twenty-seven built-in icons ready to animate, no preparation needed.
- Independent stroke and fill layers, each with its own colours, gradients, opacity and shadow.
- Four animation triggers: on page load, on entering the screen, tied to the scroll, or static.
- Duration, delay and a full range of easing curves for every stroke.
- Motion Marker: twenty-eight icons that travel along the path as it's drawn, rotating to follow the direction of travel.
- Entrance animation ― slide, scale or both ― layered over the drawing itself.
- Scroll range controls to decide exactly how much of the page the drawing takes to complete.
- Full background system: solid colours, gradients, images, overlays and blend modes.
- Drop zone mode: place any content centred over the artwork for hero sections.
- Link mode with hover transforms ― scale, rotate, translate ― and full transition controls.
- SVG Console that checks your path as you paste it and tells you what's wrong if anything is.
- Responsive controls throughout, plus custom Tailwind classes for anything the inspector doesn't expose.
..and more
Everything you're browsing right now comes with the component: this very site, with all its demos, ready to open and edit. Every page shows a different configuration ― wordmarks, maps with a boat following a route, handwriting, outlines, geometric shapes ― from the simplest to the most elaborate. A download button on each demo page gives you all the SVG files as a single zip, ready to open and extract.
ⓘ Once installed, you'll find the demo project in the available projects panel when creating a new one. (Expand the list with 'view all', See all library items, to see all projects.)