How to Animate SVG stroke-dasharray for Line Drawings

SVG stroke-dasharray is a powerful trick for turning a static path into a lively line drawing. When you animate the dasharray, it visually “draws” the path, enhancing storytelling, progress indicators, and decorative line art. This guide walks you through practical, implementable approaches and real-world tips that work well in production projects. For further examples and inspiration, you can explore SVG techniques at SV Genius.

What stroke-dasharray does

The dasharray property defines the lengths of painted and unpainted segments of an SVG stroke. For a path of length L, you can specify a pattern like stroke-dasharray="5 10", which draws 5 units, skips 10 units, repeats. When you animate dasharray from 0 to L, the stroke appears as if it’s being drawn from start to finish.

Getting a baseline: measuring path length

The first practical step is to measure the total length of the path to know the end value for your animation. You can get it in CSS with stroke-dasharray and stroke-dashoffset, or in JavaScript with element.getTotalLength().

<path d="M10 80 C 40 10, 65 10, 95 80" id="curve" stroke="black" fill="none"/>

In JS, you might do:

const path = document.getElementById('curve');
const total = path.getTotalLength();
path.style.strokeDasharray = total;
path.style.strokeDashoffset = total;

Pure CSS: simple line drawing animation

If you only need a quick, maintainable effect, CSS provides a clean approach using stroke-dasharray and stroke-dashoffset together with a CSS animation. This works well for single-path drawings and small UI indicators.

/* CSS */
path {
  stroke: #111;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1000; /* will be overridden by JS if desired */
  stroke-dashoffset: 1000;
  animation: draw 2s ease-out forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

Tip: prefer data attributes to parameterize the duration per path and keep CSS reusable.

CSS-only approach with custom properties

To keep things scalable, use CSS custom properties to control duration and easing per path. This improves readability and makes design tokens easier to manage.

/* HTML */
<path d="M20 60 L120 60" class="draw" data-duration="1500" />

/* CSS */
path.draw {
  stroke: #2c3e50;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw var(--dur, 2s) ease-out forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

Then trigger or re-trigger animations with a class toggle or using a small script that reads the data-duration attribute.

JavaScript: robust control for interactive drawings

JavaScript gives you precise control over when, how often, and how long the animation runs. This is especially useful for interactive SVGs, scroll-driven reveals, or responsive SVGs that reflow.

const path = document.querySelector('#line');
const total = path.getTotalLength();
path.style.strokeDasharray = total;
path.style.strokeDashoffset = total;

// Animate with requestAnimationFrame for smoothness
let start = null;
function animate(ts) {
  if (!start) start = ts;
  const progress = Math.min((ts - start) / 1000, 1); // 1 second
  path.style.strokeDashoffset = total * (1 - progress);
  if (progress < 1) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

If you’re building a more complex timeline, consider GSAP or a lightweight animation library. They offer helpers for staggering multiple paths or syncing with scroll. See practical patterns on SVG animation patterns.

Responsive and accessible considerations

When animating strokes, keep accessibility in mind. Prefer reduced motion media queries to respect users who disable animations. Also ensure the animation does not obscure essential information in charts or icons.

• Provide a reduced-motion fallback: @media (prefers-reduced-motion: reduce) { ... }
• Ensure sufficient contrast in stroke color against the background
• Offer a static replay button or a toggle to pause/rewind the animation

For design resources and best practices, review accessible SVG patterns on SV Genius.

Practical patterns you’ll reuse

Here are common scenarios and how to approach them, with compact examples you can adapt.

• Line drawing reveal on load: set stroke-dasharray and stroke-dashoffset to the path length, then animate to 0.
• Scroll-activated line drawing: compute a trigger point and animate when the path enters the viewport.
• Staggered multiple paths: assign incremental dashoffsets or durations to create a cascading effect.

Performance tips

SVG animation is generally performant, but a few tips help on complex scenes:

• Keep the viewBox stable; avoid scaling artifacts by animating in user space where possible.
• Limit the number of animated paths in a single frame; group related elements into a single path when feasible.
• Prefer CSS animations for simple transitions; use JS sparingly for interaction or layout-driven reveals.