Module 61 of 71
Divi SVG Animation that draws itself in.
Line art that sketches itself stroke by stroke. Upload an SVG or paste the code, then choose how and when it draws.
Delayed
Sync
One by one
What is the Divi SVG Animation module?
SVG Animation is a Divi 5 module in Divi Supreme Pro that animates the strokes of an SVG so it looks like it is being drawn by hand. It suits icons, signatures, diagrams, maps and line illustrations.
Upload an SVG file or paste its code. Draw every line at once (Sync), start each line a little later (Delayed), or draw them one after another (One By One). Pick an easing curve, loop it a number of times or forever, set the speed and delay, and start it in the viewport, on hover or on click.
drawing types
easing curves
triggers
custom code
Start from a SVG Animation recipe.
The recipes and the playground run on the front end. Use Preview, or open the page, to try them.
Try every SVG Animation setting.
The recipes and the playground run on the front end. Use Preview, or open the page, to try them.
Everything SVG Animation can do.
File or code
Upload an SVG file, or paste SVG code straight into the module.
Three drawing types
Delayed, Sync or One By One stroke order.
Speed and delay
Control how long the drawing takes and the stagger between lines.
Easing
Linear, Ease, Ease In, Ease Out or Ease Out Bounce.
Loops
Play once, a set number of times, or forever.
Three triggers
Start in the viewport, on hover or on click.
SVG Animation documentation
Setup for Divi 5: SVG file or code, drawing type, easing, loop, trigger, speed and delay.
Questions about SVG Animation.
Next module, A to Z
Table Module
Related modules
Lottie Module
Lottie and dotLottie animations.
Shapes Module
28 SVG shapes.
Text Path Module
Text along a curved path.
Bring your line art to life.
SVG Animation comes with 70+ Divi 5 modules and 16 extensions in Divi Supreme Pro.