How to Use SVG stroke-dasharray  Dashed Lines & Draw Effects
SVG stroke-dasharray controls dash patterns; combined with stroke-dashoffset and CSS animation, it creates the draw-on effect.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG stroke-dasharray Syntax
stroke-dasharray takes a list of dash and gap lengths in px or user units. `stroke-dasharray='10 5'` creates 10px dashes with 5px gaps. Equal values create uniform dashes; a single value alternates dash and gap of that length.
- stroke-dasharray='10 5'  10px dash, 5px gap
- stroke-dasharray='4'  4px dash and 4px gap
- Multiple values create complex repeating patterns
SVG Draw-On Animation with stroke-dashoffset
Set stroke-dasharray equal to the path's total length (measured with getTotalLength()). Animate stroke-dashoffset from that length to 0  the stroke appears to draw itself in.
- pathLength = path.getTotalLength()
- Set stroke-dasharray and stroke-dashoffset to pathLength
- Animate dashoffset to 0 with CSS @keyframes
Frequently Asked Questions
How do I find the length of an SVG path for the draw animation?
Call pathElement.getTotalLength() in JavaScript, or estimate by setting pathLength='1' and using percentage values.
Can I use stroke-dasharray on SVG text?
Yes  add stroke and stroke-dasharray to SVG text elements to create outlined or dashed text effects.
Related guides
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