How to Animate SVG stroke-dasharray — Path Drawing Effect

Animate SVG path drawing using stroke-dasharray and stroke-dashoffset — create handwriting effects, progress indicators, and signature animations with pure CSS.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

The stroke-dasharray Drawing Trick

The SVG path drawing animation works by setting `stroke-dasharray` equal to the path length, then animating `stroke-dashoffset` from the full path length to 0. Initially the entire path is 'offset' (invisible); as dashoffset animates to 0, the path appears to draw itself. Get path length with `path.getTotalLength()` in JavaScript.

Step 1: `const length = path.getTotalLength()`
Step 2: set `stroke-dasharray: length; stroke-dashoffset: length`
Step 3: animate `stroke-dashoffset` to 0 with CSS `@keyframes` or GSAP

CSS-Only Path Drawing Animation

For simple path draw animations, CSS handles everything. Set `stroke-dasharray` and `stroke-dashoffset` as CSS properties, then define a `@keyframes` animation. For paths with known length, hardcode the value. For dynamic path lengths, use the CSS `@property` registration with JavaScript fallback for calculation.

CSS: `stroke-dasharray: 1000; stroke-dashoffset: 1000`
@keyframes: `to { stroke-dashoffset: 0 }`
Apply: `animation: draw 2s ease-in-out forwards`

Frequently Asked Questions

How do I get the total path length for the stroke-dasharray animation?

In JavaScript: `const path = document.querySelector('path'); const length = path.getTotalLength();`. Log the value and hardcode it in your CSS for production. For SVGs loaded via fetch, calculate length after the SVG is in the DOM. Avoid recalculating on every render — cache the length.

Can I animate multiple SVG paths to draw in sequence?

Yes — give each path a different `animation-delay`. CSS: `path:nth-child(1) { animation-delay: 0s } path:nth-child(2) { animation-delay: 0.5s }`. Or use GSAP timeline: `tl.from('.path1', { drawSVG: 0 }).from('.path2', { drawSVG: 0 })` for fine-grained sequential control.

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG