Skip to content
StoreDocsSupport
Get Divi Torque

Modules

SVG Draw

The SVG Draw module animates an SVG being drawn stroke by stroke as it scrolls into view, on page load, or on hover. Built natively for Divi 5.

The SVG Draw module animates an SVG so its strokes draw themselves, like a pen tracing the artwork. Trigger it on scroll, on page load, or on hover, and control the timing of every stroke. The module needs Divi 5.

Divi SVG Draw module with a fully drawn stroke animation

How to add the SVG Draw module

  • Add a section and a row, then add the SVG Draw module.
  • Paste SVG code or pick an SVG file from the media library.
  • Choose the trigger and tune the draw timing.

Content

SVG

  • SVG Source: Paste code or Media library file. Default is Paste code.
  • SVG Code: paste the whole svg element. The code is sanitized before it reaches the page. Scripts, event handlers and external references are removed.
  • SVG File: a file from this site's media library. Files hosted elsewhere are not fetched.
  • Decorative: hides the graphic from screen readers. On by default. Turn it off and set an Accessible Label when the drawing carries meaning.

Animation

  • Draw On: Scroll into view, Page load or Hover. Default is Scroll into view.
  • Viewport Offset: how far into the viewport the drawing must travel before it starts. Default is 15%.
  • Redraw Each Time: draws the animation again whenever the module re-enters the viewport, instead of once. Off by default.

Design

Timing

  • Draw Duration: default 1500ms. Visitors who have asked for reduced motion skip the animation and see the finished drawing.
  • Start Delay: default 0ms.
  • Stagger Between Strokes: each stroke starts this much later than the one before it, so the drawing appears line by line. Default is 150ms.
  • Easing: Ease, Ease In, Ease Out, Ease In Out or Linear. Default is Ease In Out.

Stroke

  • Stroke Color: leave it empty to keep the colors already in the SVG.
  • Stroke Width: default 2px.
  • Also Draw Circles And Rectangles: paths, lines, polylines and polygons always draw. Circles, ellipses and rectangles only draw when this is on. Otherwise they simply appear. Off by default.

Fill

  • Fill: Outline only, or Fill after drawing. Default is Outline only.
  • Fill Color: the color used after drawing.

Layout

  • Width: default 100%.
  • Alignment: Left, Center or Right. Default is Center.

Tip

Line art with real strokes draws best. If your SVG is built from filled circles or rectangles, turn on "Also Draw Circles And Rectangles". Otherwise export a stroked version of the artwork.