Overview
The SVG Animator module lets you add animated SVG graphics to your Divi pages. SVG paths are drawn with a stroke animation effect, giving the impression that the graphic is being drawn in real time. You can upload an SVG file or paste SVG code directly, then control the animation speed, timing, looping, and trigger events to create engaging on-page illustrations.
Content Settings
SVG Source
Use SVG Code (Toggle)
Toggle to paste SVG code directly instead of uploading a file.
Default: Off
SVG File (File Upload)
Upload an SVG file for animation.
Only appears when Use SVG Code is turned off
SVG Code (Text Field)
Paste your SVG markup code here.
Only appears when Use SVG Code is turned on
Animation Settings
Animation Type (Dropdown)
Choose how SVG paths are animated.
Available options: Delayed, Sync, One By One
Default: Delayed
Timing Function (Dropdown)
The easing function that controls how the animation accelerates and decelerates.
Available options: Linear, Ease, Ease In, Ease Out, Ease In Out
Default: Ease
Speed (frames) (Slider)
Animation duration in frames. 60 frames equals 1 second.
Range: 1 to 600 frames
Default: 200 frames (about 3.3 seconds)
Delay (frames) (Slider)
How long to wait before the animation starts, measured in frames.
Range: 0 to 300 frames
Default: 0 (no delay)
Loop (Toggle)
Repeat the animation after it finishes.
Default: Off
Unlimited Loop (Toggle)
Loop the animation infinitely without stopping.
Default: On
Only appears when Loop is turned on
Loop Count (Slider)
Number of times to repeat the animation before stopping.
Range: 1 to 50 repetitions
Default: 3
Only appears when Loop is on and Unlimited Loop is turned off
Use Trigger (Toggle)
Start the animation on a specific event instead of playing immediately when the page loads.
Default: Off
Trigger Type (Dropdown)
Choose what event starts the animation.
Available options: In Viewport, On Hover, On Click
Default: In Viewport
Only appears when Use Trigger is turned on
Background
Standard Divi background options including solid color, gradient, image, and video backgrounds.
Design Settings
SVG Animator Configuration
SVG Color (Color Picker)
Choose a color for the SVG stroke lines.
SVG Width (Slider)
Set the width of the SVG element.
Range: 0 to 100 (in %, px, or vw)
SVG Height (Slider)
Set the height of the SVG element.
Range: 0 to 100 (in %, px, or vh)
SVG Line Width (Slider)
Set the thickness of the SVG stroke lines.
Range: 0 to 20 (in px or em)
SVG Container Style
Style options for the SVG container box: Border (add a border with custom style, width, and color), Spacing (control padding and margin inside the container), Box Shadow (add drop shadow effects), and Filters (blur, brightness, contrast, and other CSS filter effects).
Module Style Options
Standard Divi style groups applied to the whole module: Sizing (width, height, alignment), Spacing (margin and padding), Border (border style, radius, color), Box Shadow, Filters, Transform (scale, rotate, skew, translate), and Animation (entry animation effects).
Tips & Best Practices
For the drawing animation to work well, use SVGs that have visible stroke paths. Fill-only SVGs may not animate visibly — try converting fills to strokes in your vector editor (such as Inkscape or Adobe Illustrator) before uploading.
Use the ‘One By One’ animation type to create a sequential drawing effect where each path of the SVG is drawn one after another — great for logos and illustrations.
Set Trigger Type to ‘In Viewport’ to start the animation only when the visitor scrolls to see the module. This creates an eye-catching reveal effect that rewards users who scroll down the page.