SVG Draw — Playground

drawn on load · hit Replay

Draw — options

Trigger

Draw duration (s) 1.6

Stagger (s) 0.15

Direction

Loop

Stroke & fill

Stroke width (px) 2

Stroke color #2f74e6

Fill after drawing

Layout

Max width (px) 320

Alignment

Sample option — updates as you tweak

'sc_svg_draw' => [
    'svg' => [ 'source' => 'preset', 'preset' => [ 'preset' => 'signature' ] ],
    'trigger'      => 'load',
    'duration'     => 1.6,
    'stagger'      => 0.15,
    'direction'    => 'normal',
    'loop'         => 'no',
    'stroke_width' => 2,
    'stroke_color' => [ 'predefined' => '', 'custom' => '#2f74e6' ],
    'fill_after'   => 'no',
    'fill_color'   => [ 'predefined' => '', 'custom' => '#2f74e6' ],
    'max_width'    => 320,
    'align'        => 'center',
],

SVG Draw is a shortcode / element — add it in the page builder, pick a preset (or paste/upload SVG), and it self-draws on the front end. Outline (stroke) SVGs draw cleanest; colors use the theme color-preset picker. It honours reduced motion (shown fully drawn).

Pick a preset on the right (or paste your own SVG), then tweak how it draws — duration, stagger, direction, loop, plus stroke width / color and an optional fill after. This runs the real runtime: it measures each path with getTotalLength, sets a stroke-dasharray so the art starts hidden, then animates stroke-dashoffset → 0 (staggered) exactly as on a live page. Hit Replay to redraw, or set the trigger to hover. The Sample option updates as you tweak.

Where it lives

SVG Draw is a page-builder element / shortcode — add it, pick a built-in preset or paste/upload an SVG, and it self-draws on the front end. Outline (stroke) SVGs draw cleanest; colors use the theme color-preset picker. It honours reduce motion (shown fully drawn, no animation).

← Back to SVG Draw