Custom Line Patterns with stroke-dasharray
stroke-dasharray accepts a list of numbers defining alternating dash and gap lengths, enabling patterns well beyond simple dashes.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Building Patterns Beyond Simple Dashes
While stroke-dasharray="5,5" produces a simple even dash pattern, supplying more values like stroke-dasharray="10,2,2,2" creates an alternating long-dash-short-dash pattern, and any sequence of comma-separated numbers can be combined to build custom repeating rhythms like dash-dot-dash borders.
- A simple two-value pattern like "5,5" produces an even, regular dash
- More values like "10,2,2,2" create alternating long-dash-short-dash rhythms
- Any comma-separated sequence builds a custom repeating line pattern
Controlling Pattern Start Position with stroke-dashoffset
The stroke-dashoffset property shifts where along the path the dash pattern begins, which matters both for fine visual alignment of a pattern's starting point and as the core technique behind draw-on line animations that reveal a path by animating the offset value over time.
- stroke-dashoffset shifts where along the path the dash pattern begins
- Useful for fine visual alignment of exactly where a pattern starts
- Also the core technique behind animated draw-on line reveal effects
Frequently Asked Questions
Can I create a dash-dot-dash border pattern with stroke-dasharray?
Yes, supplying an appropriate sequence of dash and gap lengths like "8,2,2,2" produces a dash-dot rhythm repeating along the entire path.
Does stroke-dasharray work on any SVG shape, not just paths?
Yes, it works on any shape element with a stroke, including circles, rectangles, lines, and polygons, not just path elements specifically.
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