SVG Line Draw (Divi)
Draws any SVG line by line for Divi 5 — with the scroll, when it comes into view, on load, on hover, on click or in a loop. Draw one of 24 built-in drawings, an icon, your own text, an SVG file or pasted code. Each is labelled with its settings; scroll slowly to watch the first ones.
1. Six triggers
With the scroll (scrubbed, smoothing 0.6 s) · when scrolled into view (draw again every time it enters) · on load (after 0.5 s) · on hover with a faint track (undraw on leave) · on click with a track (toggle) · in a loop (swing, 1 s pause).
With the scroll
When scrolled into view
On load, after 0.5 s
On hover — try it
On click — tap it
In a loop
2. Directions and order
From the start, from the end, from the middle outwards, and erase — then the lines together, one after another timed by length, and 20 % to 80 % only. All play when scrolled into view.
From the start
From the end
From the middle
Erase
All together
Timed by length
20 % to 80 %
3. Text and icons
Source: Text — the letters are traced, then filled (Design › Letters sets the font). Source: Icon — a Font Awesome icon traced, then filled. Both refit to their letters.
Text, filled after drawing
Icons
Gradient letters with a glow
Icon, fill shown until drawing starts
4. Strokes, fills and finishes
Linear and radial gradients · a glow · the same thickness at any size (2 px at 360 px wide) · fill always · marching ants when done · shown finished with dashes · a new colour and fill when drawn.
Linear gradient
Radial gradient + glow
Same thickness at any size
Fill always
Marching ants when done
Shown finished, dashed
New colours when drawn
5. Pasted SVG code
Source: SVG code — the same pasted drawing with its own colours kept (left), and restyled from the Design tab (right). The script tag in the code is removed.
Its own colours
Restyled
6. Styled from the Design tab, on a dark background
Drawing box background, padding, border and shadow · caption font · a gradient stroke with a glow · grow 8 % on hover · a link.
7. Fills that follow the drawing
New in 1.1: once the lines are drawn, the fill can wipe in from a side, open from the middle like an iris, or rise like liquid — with its own delay. Here: a wipe from the bottom 0.3 s after the lines, an iris on load, and a liquid fill when scrolled into view.
Wipe in from the bottom
Iris, from the middle
Liquid, rising
8. Pinned, clicked from elsewhere, looping
Pin While Drawing holds a scrubbed drawing in place until it is finished · Also Draw When Clicked lets another element — here the “Draw the star” button — play a click drawing · Keep Looping Once Drawn swings a drawing that started in view.
Scrubbed and pinned, then filled at once
Click the drawing — or the button
In view, then keeps looping