BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Free widget

SVG Draw Widget for Elementor Free

Line drawings that draw themselves stroke by stroke.

Download free Read the guide
Overview

What SVG Draw does

SVG Draw animates a line drawing as if it were drawn by hand. Use one of 14 built-in drawings or your own SVG file, and start the drawing when it scrolls into view, on page load, on hover, or let it follow the scroll.

Live demo

See it in action

Video

See it in video

Features

What it can do

  • Fourteen built-in drawings, including a rocket, light bulb, signature scribble and hand drawn underline.

  • Your own SVG file from the Media Library, cleaned of scripts, links and styles.

  • Start when it scrolls into view, on page load, on hover, or follow the scroll.

  • All lines together or one after another.

  • Duration, delay, easing and repeat with a pause.

  • Fade in a fill color after drawing.

  • Line color, fill color, width and line ends, or keep the file colors.

Use cases

When to use it

Section accents

Draw a hand drawn underline or circle next to a heading.

Feature icons

Let simple line icons draw in as visitors scroll.

Scroll stories

Follow the scroll so a path draws as the visitor reads.

Setup

How to set it up

A few steps from adding the widget to a finished result.

Read the full guide

  1. Drag the SVG Draw widget onto the page.

  2. In Drawing, choose Source and a Drawing, or pick an SVG File.

  3. Type a Description for Screen Readers if the drawing means something.

  4. In Animation, choose Start, Duration (seconds) and Lines.

  5. Set Repeat or Fill In After Drawing if you like.

  6. In the Style tab, set Line Color, Fill Color and Line Width.

FAQ

Questions and answers

Can I upload my own SVG?

Yes. Choose SVG file from the Media Library. Your site must allow SVG uploads, and scripts inside the file are removed.

Can it draw as the visitor scrolls?

Yes. Set Start to Follow the scroll.

Is the drawing read by screen readers?

Only if you fill in Description for Screen Readers; otherwise it is treated as decoration.

Keep exploring

Related widgets

Simple Table Free

Type a table with | between cells, phone friendly.

Recipe Card Free

A recipe with tick off ingredients, steps and a print button.

Code Block Free

Show code with syntax colors and a copy button.

Stat Card Free

A key number with change and a small trend chart.
Free forever

SVG Draw is free

It is one of 53 widgets in the free Bright Addons plugin. Each widget loads its code only on pages that use it.

Download free See Pro plans