Tailwind UI Pattern Registry for humans and agents

svg draw stroke path line reveal icon illustration icon entrance animation illustration line-art reveal decorative SVG drawing on scroll signature or logo drawing effect need SVG line drawing without JavaScript want icons that draw themselves on page load need hover-triggered path reveal

SVG Draw

Fetch snippet JSON: curl https://webspire.de/snippets/animations/svg-draw.json
Format

Left two auto-draw on load · right draws on hover

Stage Background
Customize

Quick Start

<svg class="svg-draw" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/></svg>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
1297 bytes · 60 lines
Custom Properties
--draw-duration--draw-delay--draw-length
Classes
.svg-draw.svg-draw-hover
svg draw stroke path line reveal icon illustration

Two variants: Auto-play (.svg-draw) draws on load with configurable delay, and Hover (.svg-draw-hover) draws on :hover via transition. Works on all SVG shape elements — path, circle, rect, polygon, ellipse, line, polyline. Set --draw-length higher than the longest path length in your SVG.

Icon draw on load

<svg class="svg-draw h-16 w-16 text-indigo-600" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>

Draw on hover

<svg class="svg-draw-hover h-12 w-12 text-slate-600" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg>

Staggered icon set

<div class="flex gap-6">
  <svg class="svg-draw h-8 w-8" style="--draw-delay: 0s" ...>...</svg>
  <svg class="svg-draw h-8 w-8" style="--draw-delay: 0.3s" ...>...</svg>
  <svg class="svg-draw h-8 w-8" style="--draw-delay: 0.6s" ...>...</svg>
</div>