SVG stroke-dasharray Patterns
stroke-dasharray defines a repeating dash-and-gap pattern along any stroked path — the foundation for dashed lines and draw-in animations.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
stroke-dasharray Syntax and Common Patterns
`stroke-dasharray="5 3"` creates a repeating pattern of a 5-unit dash followed by a 3-unit gap — providing more values (`"5 3 1 3"`) creates more complex repeating patterns (like dash-dot-dash), and `stroke-dashoffset` shifts where along the path that pattern begins.
- Two values create a simple repeating dash-gap pattern
- Four or more values create complex patterns like dash-dot combinations
- stroke-dashoffset shifts the pattern's starting position along the path
The Classic Draw-In Animation Technique
Setting `stroke-dasharray` to the path's total length (obtainable via `getTotalLength()` in JavaScript) and animating `stroke-dashoffset` from that same length down to zero creates the popular 'line drawing itself' animation effect, widely used for logo reveals and icon entrance animations.
- Set dasharray to the path's exact total length for this technique
- Animate dashoffset from that length down to zero for a draw-in effect
- getTotalLength() (JS) calculates the exact path length needed
Frequently Asked Questions
How do I get a path's exact length for the draw-in animation?
Call pathElement.getTotalLength() in JavaScript on the SVG path element — this returns the exact length needed for both the stroke-dasharray value and the animation's starting stroke-dashoffset value.
Can stroke-dasharray patterns be animated to create a 'marching ants' effect?
Yes — continuously animating stroke-dashoffset (rather than animating it once to zero) creates a repeating 'marching ants' effect popular for selection outlines and attention-drawing borders.
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