SVG Draw

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.

How to add the SVG Draw module

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

Content

Source

• SVG Source: paste code directly or use a media library file.
• Decorative hides the graphic from screen readers, or set an Accessible Label when it carries meaning.

Animation

• Draw On: scroll into view, page load, or hover.
• Viewport Offset controls how far into view the module must be before drawing starts.
• Redraw Each Time replays the animation whenever the module re-enters the viewport.
• Draw Duration, Start Delay, Stagger Between Strokes, and Easing.

Design

• Stroke Color and Stroke Width override the SVG's own stroke.
• Also Draw Circles And Rectangles converts basic shapes so they animate too.
• Fill: outline only, or fill after drawing, with a Fill Color.
• Width and Alignment.

Tip

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