Animated SVG illustrations: draw-on effects with plain CSS

Animation formats like Lottie are great for complex motion, but they add a player library and a JSON file that can be larger than the page. For line illustrations there is a lighter option: animate the SVG's own strokes with CSS. No JavaScript is required for the basic effect.

How the draw-on trick works

Every SVG stroke can be dashed. If you make one dash as long as the whole path, and then offset it by that same length, the line is invisible. Animate the offset back to zero and the line appears to draw itself.

The cleanest way is to set pathLength="1" on each path, so every path's length is treated as 1 regardless of its real size:

<path pathLength="1" class="draw" d="M40 200 L200 110 L360 200" />

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw .6s ease-out forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

Without pathLength, you would need JavaScript to measure each path with getTotalLength() and set the dash values per path.

Make it look polished: stagger

All lines drawing at once looks mechanical. Delaying each path slightly, roughly from back to front or bottom to top, looks like a hand drawing:

.draw { animation-delay: var(--d, 0s); }

<path pathLength="1" class="draw" style="--d:.00s" d="..." />
<path pathLength="1" class="draw" style="--d:.04s" d="..." />
<path pathLength="1" class="draw" style="--d:.08s" d="..." />

Keep the whole sequence under about 1.5 seconds. Fade fills in after their outlines finish, so shapes do not pop in before they are drawn.

A gentle float loop

For heroes, a slow up-and-down movement on one part of the drawing adds life without distraction:

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
#float { animation: float 3s ease-in-out infinite; }

Float one element (a card, a coin, a notification), not the whole illustration.

Start it when it scrolls into view

An animation that plays while the illustration is off-screen is wasted. Pause it until visible:

.draw { animation-play-state: paused; }
.in-view .draw { animation-play-state: running; }

const io = new IntersectionObserver(entries => {
  for (const e of entries) if (e.isIntersecting) {
    e.target.classList.add("in-view"); io.unobserve(e.target)
  }
}, { threshold: 0.3 })
document.querySelectorAll(".anim").forEach(el => io.observe(el))

Respect reduced motion

Some people get dizzy or distracted by motion and turn it off in their system settings. Always show the finished drawing for them:

@media (prefers-reduced-motion: reduce) {
  .draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  #float { animation: none; }
}

Where animation helps, and where it does not

Performance notes

• Animating stroke-dashoffset on a few hundred paths is fine on modern devices. On thousands, test on a mid-range phone.
• transform and opacity are the cheapest properties to animate; prefer them for loops.
• Inline the SVG. CSS on your page cannot animate the inside of an <img>, though an SVG file can carry its own <style> animation that still plays inside an img.

Liniqo's Pro and Lifetime plans include draw-on and float versions of every illustration, built with exactly this technique: pure CSS, staggered, and switched off for reduced motion. The React components expose it as animation="draw" with a trigger="inView" option.

Questions

How do I animate an SVG line drawing with CSS?

Set pathLength="1" on each path, give it stroke-dasharray: 1 and stroke-dashoffset: 1, then animate stroke-dashoffset to 0.

Do I need Lottie for SVG animation?

Not for line draw-on and simple loops. CSS handles those with no extra library. Lottie is better for complex, designer-made motion.

Will SVG animation play inside an img tag?

Animation defined inside the SVG file in its own style block plays inside an img. CSS from your page cannot control it, so for scroll triggers or theming, inline the SVG.