EFFECTS

Draw SVG

Draws the strokes of an SVG as if by hand — a stroke-dashoffset animation applied to every path, line, circle, polyline, polygon, ellipse and rect inside the element (or to the element itself, if you put the class directly on an SVG shape).

Classes

ClassPlays
fx-draw-svg-plOn page load
fx-draw-svg-stWhen the element scrolls into view
fx-draw-svgAutomatically, when its section scrolls into view
fx-draw-svg-scrubTied directly to scroll position instead of playing once

Options that matter

  • Duration — fx-duration-[n], default 2 seconds (ignored in scrub mode).
  • Delay — fx-delay-[n], default 0.
  • Ease — fx-ease-[name], default power2.inOut.
  • Start position — fx-start-[pos], default top 85% (scroll-triggered only).
  • Scrub — fx-scrub-[n], e.g. fx-scrub-[0.6]. Adding this modifier switches the effect into scrub mode the same way fx-draw-svg-scrub does, and sets the smoothing amount (higher = smoother lag behind the scrollbar).

Example

<div class="fx-draw-svg-st">
  <svg viewBox="0 0 100 100"><path d="M10 90 L50 10 L90 90" /></svg>
</div>

Only elements with a real stroke are drawn — make sure your SVG shapes have stroke set (not just fill).