Quick SVG
Component
Intro
Quick SVG draws your artwork line by line, the way a hand would. A logo, a piece of lettering, an icon: the stroke traces itself, the fill arrives behind it, and a static shape becomes a small piece of choreography.
Stroke and fill are two independent layers, each with its own colors, gradients and shadow. Hold one still while the other moves, delay the fill, add a background and a motion on entrance. All from the inspector.
Is this a drag and drop solution? Can I use the SVG icons already in Elements?
No to both — and the reason is what makes this component worth using. It doesn't animate an SVG file, it animates a path. That one extra step is what unlocks choreography an SVG file simply cannot do: layers that move on their own timing, colors and shadows that behave independently, a marker that travels the line as it's drawn.
Preparing a path takes a few minutes the first time and seconds after that. The included guide covers it step by step, and the built-in icon library lets you start straight away.
ⓘ The SVG Console checks your path as you paste it and tells you if something isn't right.
Setting
Three ways for the drawing to behave. Off leaves it as artwork. Link makes it clickable. Content turns the wrapper into a container you can drop anything into — a headline, a button, a whole layout — sitting centred over the drawing.
ⓘ In Link mode only the SVG is clickable, not the background around it
ⓘ In Content mode the taller of the two — drawing or content — sets the height, and both stay centred
Stroke Animation
How the drawing enters the page. Load makes it happen instantly when the page opens. View waits until the drawing scrolls into sight — perfect for keeping the energy focused where visitors are actually looking. Scroll ties the drawing to the scrollbar itself: as they scroll, the line traces in real time, turning passive scrolling into active choreography.
ⓘ In Scroll mode duration and easing are ignored: the scrollbar sets the pace
Motion Marker
An icon that travels along the path while the stroke is drawn, turning with every curve. Built for maps and geographic journeys: plot a route and watch an airplane, boat, or car follow it in real time. Works with any icon from the library, or draw your own.
ⓘ Top-down views (airplane, boat top view) shine with rotation on. Side and front views usually look better with it off.
Entrance
A second layer of motion that emphasizes arrival. Slide the drawing up, scale it from small to full, or do both. Built to sync with the drawing animation.
ⓘ Entrance happens once when the drawing arrives.
On Scroll it triggers at 75% screen threshold.
Source & ViewBox
Quick SVG doesn't work with full SVG files — it needs only the path, the d attribute. Extract it from your editor, paste it here, and the component unlocks the superpowers: independent layers, animated shadows, scroll-linked motion, transforms on hover. A full file locks you into a single, static drawing. A path is sculpted geometry that can move, split, recolor and react in ways an image never could.
✓ Paste any SVG path — logos, lettering, icons, hand-drawn strokes
✓ ViewBox defines the canvas — width, height, origin. Match your original SVG, or expand it to keep thick strokes and shadows from clipping
✓ Extra padding — add breathing room around the drawing without changing its actual size
Built-In Icons
Choose from several pre-made icons: social networks, commerce symbols, UI elements. Every icon is optimized and ready to animate.
Sizing SVG
By default, the SVG expands to fill all available space. Set minimum and maximum widths to control how large or small it can get — perfect for keeping a logo readable on mobile or preventing it from dominating a hero section.
ⓘ The outer wrapper also has size controls. Verify they work together — if the wrapper's max is smaller than the SVG's min, the SVG wins and pushes out.
Spacing SVG
Margin and padding for the drawing itself, independent from the wrapper. Use padding to shift the SVG inside its own space, handy when you want it off-center within the background.
Stroke SVG
The outline of the drawing — color, thickness, opacity and how the ends and corners behave. Line cap shapes the ends of open paths: flat, rounded or square. Line join controls how corners connect: sharp, rounded or beveled. Small choices, big visual impact.
ⓘ Pair this shadow with the one on the Fill layer — two shadows on two layers create depth a single one can't.
Fill SVG
Color the interior of the drawing on its own layer, entirely separate from the stroke. Solid colors, linear gradients, radial gradients, with their own colors, opacity, timing and shadow. That separation is where the real visual choreography happens.
ⓘ Two shadows with different colors and offsets create depth that a single-layer drawing can't match
Transitions
Control how smoothly transforms happen on hover — scale, rotate, translate all need a transition to feel fluid instead of instant. Property, easing, duration and delay, all in one place.
ⓘ Transitions only matter if transforms are active. Without hover effects, this panel does nothing.
Transforms
Scale, rotate and translate the drawing on hover — the standard Elements transform engine applied to SVG. Set a start state and an end state: when visitors hover over a linked drawing, it reacts. Smooth movement depends on the Transitions panel settings, so dial those in for the feel you want.
ⓘ Transforms need Transitions to feel natural. Without easing and duration, hover feedback is instant and jarring.
BG Wrapper
The wrapper is the stage. Give it a background and suddenly the SVG has context — a colored field, a gradient sweep, a photograph. Layer an overlay on top for mood, texture, depth. Blend modes merge the overlay with what's behind it, creating effects that range from subtle color shifts to dramatic visual statements. All of it wraps the SVG, so transforms and entrance animations include the whole composition.
Overlay
A second layer placed over the background. Same three types: solid, gradient, image. Use it to add atmosphere, improve text contrast, or create layered visual effects.
Advanced
Add custom Tailwind classes directly to the main SVG container for layout adjustments or styling that the inspector doesn't expose.
✓ Any standard Tailwind utility class works here
ⓘ Built for Elements 3, using Tailwind 4's color system. ✓ Adapts automatically to dark mode.
Demo File Included
The project includes ready-to-use demo pages built for real situations: hero sections with animated logos, navigation icons that react on hover, lettering that draws on scroll. Every page you're browsing is included with the component — open it, study how each one works, and use them as templates. A download button on each demo page gives you all the SVG files as a single zip.
ⓘ Once installed, you’ll find the demo project in the available projects panel when creating a new one.
Made with Elements®