Atomic Element · Pro
A signature, a route or a piece of line art draws itself stroke by stroke as it comes into view. GSAP does the drawing; you add a stroke-based SVG and place it like any Elementor 4 atomic element.
The short answer
Draw SVG is an Elementor 4 Atomic Element from Animation Addons for Elementor that creates an SVG line drawing animation: it draws an SVG path stroke by stroke as it enters the view. It suits signatures, outline icons, route lines and line illustrations, and it runs on GSAP's DrawSVG plugin, which Animation Addons loads for you.
The one rule that decides whether it works: the artwork must be strokes, not fills. Keep outlines as strokes when you export from Illustrator or Figma.
Many "Elementor V4 compatible" addons are classic v3 widgets that still run on V4. Draw SVG is a native Atomic Element, built on Elementor's Atomic Editor architecture.
| Plan | Pro Animation Addons Pro |
|---|---|
| Element type | Native Elementor 4 Atomic Element |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Trigger | Draws when the element enters the view |
| Engine | GSAP with the DrawSVG and MotionPath plugins, registered by Animation Addons; you load nothing yourself |
| Editor preview | Play Animation button replays the drawing on the canvas |
| What to feed it | An SVG made of stroked paths. Filled shapes with no stroke show no drawing |
| Extensions | Regular Animation, Parallax, Tilt, Mouse Move, Custom CSS and the other shared extensions apply |
| Requires | Animation Addons for Elementor (free) + Animation Addons Pro |
| Plugin version | Animation Addons 4.3 · Last updated October 2026 |
Demo variations
Every demo is built with the Draw SVG, part of Animation Addons Pro, plus native Elementor 4 elements. Extensions they add are named on each card.
A short letter in a narrow serif column; the signature at the bottom draws itself as it scrolls into view.
A large headline; a loose hand-drawn circle around one word draws as soon as the hero is on screen, which on most visits is right after the page loads.
A muted map illustration with a dashed route that draws from start to finish when the map section enters the view; four stop names sit beside it.
Six outline icons in a Grid that draw together when the row enters the view, then stay as static line art above their labels.
A building elevation in thin lines draws itself on a cream background; beside it, a photograph of the finished building.
A wheat stalk and a loaf outline draw themselves in the margin of the "Our flour" section, framing a short story about the mill.
Features
Every option below is a real control in the Draw SVG panel or part of how the element renders. Nothing here needs custom code.
Animation Addons registers GSAP's DrawSVG and MotionPath plugins for this element, so the stroke-drawing technique motion designers use runs on your page without a script tag or a line of code.
The Play Animation button in the element's Animation section restarts the drawing on the canvas, so you can judge timing and placement without saving and reloading the preview.
Draw SVG accepts the shared extensions. Add Parallax so a drawing drifts with the scroll, Tilt for a hover response, or Custom CSS for a one-off tweak.
As an atomic element, Draw SVG drops into Flexbox, Grid and card layouts and can be positioned over a heading or image, sized with Classes and Variables like the rest of the page.
Built on the atomic base
Why it mattersDraw SVG is one small element, so it sits next to the content it supports, and you can reuse a single sizing Class across every drawing on the site.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Get Animation Addons ProInstall Animation Addons for Elementor and Animation Addons Pro, then open a page with the Atomic Editor on.
Find DrawSVG among the Animation Addons atomic elements and drag it onto the canvas.
Add your SVG. Check it is built from stroked paths, not filled shapes.
Click Play Animation in the Animation section to watch the drawing on the canvas.
Size and position the element in the Style tab, and save the sizing as a Class.
Publish and scroll the live page to see the line draw as it enters the view.
Honest comparison
What each option has, side by side. We list where the other choice is the better fit, too.
| Feature | Elementor Atomic SVG | Animation Addons Draw SVG |
|---|---|---|
| Plan | Elementor Free | Animation Addons Pro |
| Native atomic element | Yes | Yes |
| Displays an SVG | Yes | Yes |
| Draws the stroke as it enters the view | No, Elementor Interactions offer fade, slide and scale but no SVG-draw effect | Yes, with GSAP DrawSVG |
| Animation engine | Motion library (Interactions) | GSAP |
Compared with Elementor 4.3.3 (September 2026).
For a static icon or logo, Elementor's own SVG element is the right choice. Use Draw SVG when the drawing itself is the point. The other route is hand-coding GSAP DrawSVG in a custom snippet, which works but leaves you maintaining script loading and triggers per page.
Who it's for
The people who get the most out of it, and what they use it for.
Signing letters and about pages.
Adding hand-drawn emphasis to hero headlines.
Showing a route on a map.
Presenting line work the way it was drawn.
FAQ
In Elementor 4, drag the Draw SVG element from Animation Addons for Elementor onto the page and add a stroke-based SVG. Draw SVG animates the path stroke by stroke as it enters the view, using GSAP. Click Play Animation to check it on the canvas, then publish. No code and no Elementor Pro are needed.
Line drawing works on SVG paths that have a stroke: signatures, outline icons, route lines and line illustrations. Filled shapes with no stroke show no drawing in Draw SVG. When exporting from Illustrator or Figma, keep outlines as strokes and do not use "outline stroke" or "flatten", which turn strokes into fills.
Draw SVG starts drawing when the element enters the view, so the visitor sees it the moment they scroll it onto the screen, without you setting up a scroll trigger. Place it right next to the content it supports, such as the end of a letter, so the drawing happens as that part is read.
No. Animation Addons registers GSAP and its DrawSVG plugin for the Draw SVG element, so you never write or load GSAP code. You add an SVG, preview it with Play Animation and style it in the Elementor 4 panel. Draw SVG needs Animation Addons Pro, but not Elementor Pro.
Yes. Draw SVG uses the same in-view trigger on phones as on desktop, and its size and position take per-breakpoint values in the Style tab. Thin strokes can look faint on small screens, so check the drawing at phone width and scale the Draw SVG element up where needed.
Draw SVG is decoration: a drawn signature or route supports content, it should not replace it. Keep names, addresses and steps in real text next to the drawing so search engines and screen readers get them. Animation Addons Pro also offers Reduced Motion settings for visitors who ask their device for less movement.
No. Draw SVG needs Animation Addons for Elementor and Animation Addons Pro, but not Elementor Pro, and runs on Elementor Free with the Atomic Editor on. With only the free plugin, DrawSVG appears in the panel as a locked card with an upgrade link.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Draw SVG on the same page or template.
multi-colour animations from After Effects, with scroll, hover, click and cursor playback.
the free heading a hand-drawn circle sits on, with its own per-word colour.
pair a drawn icon with each step in a scroll deck.
a free vertical timeline when the story is dates rather than drawings.
GSAP line drawing as a native Elementor 4 element, with nothing to code. Need something free? Elementor's own SVG element shows the same artwork as a static image.
