Hi everyone! I’m happy to finally share Quick SVG, a component I’ve been working on for quite a while — and I love it.
It’s the kind of tool that rewards having an idea. If you enjoy playing with motion, it opens a lot of doors: a logo that draws itself, a route that unfolds across a map, lettering that writes as you scroll. And if you just want to add a touch of magic to an SVG you already have, that works too. Features Page →
Some of you may remember the original version I made for Stacks. This isn’t a port …it’s been completely rebuilt from the ground up for Elements 3 and Tailwind 4, with a modern animation engine, much better performance, and a whole set of features the old one never had. 
27 built-in icons, ready to animate
What it does
Quick SVG takes an SVG path and draws it on screen, line by line, the way a hand would. A logo, a piece of lettering, a map route, an icon: the stroke traces itself, and what was a static image becomes a small piece of choreography.
One thing to know before you start
The component doesn’t take an SVG file — it takes the path inside it, the d attribute. Extracting it takes a few minutes the first time and seconds after that, and there’s a full guide included that covers it with three different vector editors.
That extra step is exactly what makes everything else possible. A file can only be displayed; a path can be drawn, split into independent layers, recoloured, given its own shadows, and tied to the scroll. If you’d rather skip it entirely, twenty-seven built-in icons work exactly the same way.
Read the INFO page about the SVG Path for Quick SVG
Preparing your SVG
Everything you need to know about extracting the path — with worked examples for Inkscape, Affinity Designer and Illustrator, plus online tools that flatten a file in one click.
Stroke and fill are two separate layers
Each one has its own colours, gradients, opacity and shadow, and its own timing. The line can draw itself while the interior stays empty, with the colour arriving afterwards. Two shadows on two layers is what gives the artwork real depth.
3 ways to trigger it
On page load, when it scrolls into sight, tied to the scrollbar frame by frame, or static. Scroll mode is the interesting one: the drawing advances as visitors scroll and retraces if they scroll back, so the page itself becomes part of the animation.
Motion Marker
An icon that travels along the line while it’s being drawn, rotating to follow the direction of travel. Built for maps — plot a route and watch a boat or a plane follow it in real time — but it works just as well as a pencil tip leading a signature.
Draw the journey, not just the map
Plot a route across any map and watch the line trace itself while an icon travels along it, turning with every curve. Choose a boat, a plane, a car — or anything from the marker library — and decide where it sits on the line, how it rotates, and whether it stays or fades away once the journey is complete.
Mini 
A demo page, not a showcase
This is what the component looks like in an actual project: a hero section, a timeline, product cards. The drawing does its work inside the layout, not next to it. The page is included in the demo project, ready to open and edit.
Key features:
- Path-based animation: any SVG path — logos, lettering, icons, maps, hand-drawn strokes.
- Independent layers: stroke and fill with separate colours, gradients, opacity, shadows and timing.
- Four triggers: page load, on view, scroll-linked, or static.
- Motion Marker: 28 icons that travel the path and rotate with every curve.
- Entrance animation: slide, scale or both, layered over the drawing itself.
- Built-in icons: 27 ready-to-animate paths, no preparation needed.
- Full background system: colours, gradients, images, overlays and blend modes.
- Content drop zone: place a headline and a button centred over the artwork for hero sections.
- Hover transforms: scale, rotate, translate, with complete transition controls.
- SVG Console: checks your path as you paste it and tells you what’s wrong if anything is.
- Tailwind native and fully responsive across every breakpoint. ..and much more!
List of use cases:
Animated Logos: a brand mark that draws itself in a hero section or a splash screen.
Handwriting & Signatures: script lettering that writes itself, one continuous stroke.
Maps & Journeys: a route tracing across a map with a vehicle following it, for travel sites, delivery services, or company timelines.
Scroll Storytelling: long illustrations that unfold as the visitor scrolls down the page.
Icon Reveals: navigation and feature icons that draw in as their section comes into view.
Technical Illustrations: exploded diagrams and blueprints revealed progressively, for product pages and documentation.
Decorative Lettering: quotes, headlines and wordmarks turned into motion for editorial layouts.
Everything you see in the demos is included with the component: you can open the demo project, explore the different configurations, and integrate them directly into your work. 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 will find the demo project in the available projects panel when creating a new one (expand the list with ‘view all’, See all library items).
Compatibility note: Quick SVG is built for Elements V3 and Tailwind 4.
Available in the marketplace Now in promo! 
Let me know what you think, and happy building
thanks!
looked at the demos - very impressive…
It is actually an out of the box component 