How to Animate SVG stroke-dasharray for Engaging Line Drawings

SVG stroke-dasharray animation is a powerful technique to bring simple line drawings to life. By controlling the dash pattern and offset, you can reveal or erase strokes in a precise, cinematic way. This guide walks frontend developers and designers through practical steps, with small, reusable snippets and real-world tips you can apply in production.

What you’re animating: stroke-dasharray and stroke-dashoffset

The stroke-dasharray property defines the pattern of dashes and gaps along a stroked path. Combine it with stroke-dashoffset, which shifts that pattern along the path, to create drawing motions. For a path that represents a line, setting dasharray to the path length makes the entire stroke appear as a single dash; animating dashoffset from the path length to 0 reveals the line progressively.

Key idea: measure the path length and animate dashoffset from the length down to 0. Browsers provide a getTotalLength() method on SVG path elements, which you can use to initialize values dynamically if you’re generating or transforming paths on the fly.

Setup: a tiny, reusable SVG line

Start with a simple SVG containing a polyline or path. We’ll animate it with CSS for simplicity, and you can wire it to JS if you prefer dynamic lengths.

CSS provides a clean way to handle the animation without JavaScript for straightforward cases:

/* Calculate the path length with JS, then apply to dasharray/dashoffset */

const path = document.querySelector('#line');
const L = path.getTotalLength();
path.style.strokeDasharray = L;
path.style.strokeDashoffset = L;
path.style.transition = 'stroke-dashoffset 2s ease';
path.style.stroke = '#111';
path.style.fill = 'none';
path.style.strokeWidth = 4;
path.getBoundingClientRect(); // ensure styles are applied
path.style.strokeDashoffset = 0; // start drawing

A practical CSS-only approach

For a static page where you know the length, you can hard-code values. This is great for icons or simple line illustrations.

/* Pure CSS animation if you know the path length */

svg {
  width: 100%;
  height: 120px;
}
path {
  stroke-dasharray: 600;        /* example length */
  stroke-dashoffset: 600;
  animation: draw 2s ease forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

Dynamic lengths: when to use getTotalLength

If your SVGs vary in size or are generated at runtime, use the DOM to fetch the path length and apply it. This approach keeps your animation robust across viewports and different assets.

document.querySelectorAll('path[data-draw]').forEach(p => {
  const L = p.getTotalLength();
  p.style.strokeDasharray = L;
  p.style.strokeDashoffset = L;
  p.getBoundingClientRect(); // force layout
  requestAnimationFrame(() => p.style.strokeDashoffset = 0);
});

Tips for better line drawings

• Use stroke-linecap: round to soften the ends of lines for a hand-drawn feel.
• Pair stroke-dashanimate with a slight ease on dashoffset to mimic pen pressure.
• Combine multiple subpaths or groups with staggered delays to build complex sketches.
• Keep accessibility in mind: provide proper contrast and a non-animated fallback for users who prefer reduced motion.

Accessibility and performance considerations

Animation should enhance, not hinder. Prefer modest durations (1–2 seconds) and respect user motion preferences. Use prefers-reduced-motion media query to disable or reduce animation intensity for users who request it.

@media (prefers-reduced-motion: reduce) {
  .dash-animate { animation: none !important; }
}

For performance, limit the number of animated paths on a page and avoid heavy reflows by animating properties that don’t trigger layout, such as stroke-dashoffset and stroke-dasharray rather than complex transforms on large SVGs.

More shapes: from lines to networks

Stroke-dasharray isn’t limited to straight lines. You can animate curves, arcs, or complex paths to reveal a network or schematic step by step. The same technique applies: measure length, apply dash