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.
✓ Link — standard Elements link field: pages, URLs, files or email, same window or new one
✓ Content — a drop zone over the artwork, with alignment and padding controls
ⓘ 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.
✓ Load — instant on page open
✓ View — draws when it enters the screen
✓ Scroll — the line advances as visitors scroll, frame by frame
✓ None — the drawing stays complete, no animation
✓ Duration, delay and easing shape every stroke: smooth, snappy, bouncy, whatever the mood calls for
ⓘ 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.
✓ Choose from 28 built-in icons — vehicles, shapes, symbols
✓ Position and rotation point — control exactly where the icon sits on the line and how it turns
✓ Turn With Path — rotates the icon to follow the direction of travel, or keep it fixed
✓ Fade Out At End — the icon disappears when the journey completes, or stays in place
✓ Independent shadow — separate from the stroke, for depth and dimension
ⓘ 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.
✓ Slide Up — vertical movement, distance adjustable
✓ Scale — grows from smaller to full size
✓ Slide Up + Scale — both effects
✓ Duration and delay fine-tune the timing
✓ Works with Load, View and Scroll
ⓘ 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.
✓ Amazon, Apple, Apple Pay, AppStore, Behance, Blogger, Cart Shopping, Chart Pie, Cloud Arrow Down, Discord, Discourse, Elements, Elements Solid, Envelope, Evernote, Facebook, Facebook Messenger, Github, Instagram, LinkedIn, PayPal, Pinterest, PlayStation, Skype, Vimeo, X (Twitter), YouTube.
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.
✓ Min Width — the smallest size the drawing can shrink to
✓ Max Width — the largest size it can grow to
ⓘ 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.
✓ Color and opacity — any color, any transparency
✓ Width — thickness of the stroke, responsive per breakpoint
✓ Line Cap — how path ends look: butt (flat), round, or square
✓ Line Join — how corners connect: miter (sharp), round, or bevel
✓ Shadow — independent from fill shadow, opens the door to layered, artistic effects. Offset, blur, color: all yours to control
ⓘ 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.
✓ Fill type — solid color, linear gradient, or radial gradient
✓ Color and opacity — any color, any transparency
✓ Gradient controls — direction, position, multiple stops for smooth transitions
✓ Appearance — Animated (fades in with the trigger) or Static (no animation)
✓ Fade duration and delay — control when and how fast the fill enters
✓ Shadow — independent layer, same controls as stroke shadow
ⓘ 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.
✓ Property — which transforms animate: scale, rotation, movement, or all of them
✓ Easing — the curve that shapes the motion
✓ Duration and delay — speed and timing
ⓘ 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.
✓ Scale — grow or shrink on hover
✓ Rotate — spin the drawing
✓ Translate — move it horizontally or vertically
✓ Transform origin — the point around which rotation and scale happen
✓ Start and End states — control the look at rest and on hover
ⓘ 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.
✓ Solid color — one click, any color and opacity
✓ Linear gradient — two colors, direction, position control
✓ Radial gradient — two colors, center point, spread radius
✓ Image — drag, drop, or link to external source; light and dark mode variants supported
✓ All responsive per breakpoint in Theme Studio
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.
✓ Solid — flat color with opacity
✓ Gradient — linear or radial, same controls as background
✓ Image — positioned and sized independently from the background image
✓ Blend modes — multiply, screen, overlay, lighten, darken and more, applied to the overlay layer
✓ Rounded corners — the wrapper can have any border radius
✓ Shadow — box shadow on the outer container
Sizing the Wrapper
✓ Min and Max Width — the outer bounds, same logic as the SVG itself
✓ Min Height — set a fixed height for hero layouts, or leave it auto to let content decide
✓ Padding — space inside the wrapper, between the background edge and the SVG
✓ Margin — space outside the wrapper
ⓘ The wrapper and SVG have separate size controls. Verify they work together — too-tight constraints create conflicts.
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®