stroke-dasharray attribute in SVG is more flexible compared to the dashed style in CSS.
While there are numerous articles and examples about its usages,
including Line animations,
Circular progress bars,
or even Hamburger menu icons,
there's still something new to explore.
stroke-dasharray accepts multiple values, which will be picked cyclically according to the stroke length.
Imagine it as an infinite repeated value sequence,
the odd-numbered positions are dashes, and the even-numbered positions are gaps.
Manual estimation of path length is possible for relatively simple shapes. Though the actual result may differ between browsers.
- Path length ≈
2π * 5
You know what?
But still, each browser performs slightly different for
pathLength and Firefox does the best.
I guess Chrome has a bug at calculation, that's why
.99 was used instead of
1 in the above example.
Nevertheless, it's easy to control the dashes with customized
40 in a rect and each side gets
Some interesing shapes can be made by tweaking
stroke-dasharray and its related atrributes.
Hearts at the corners.
If you're using Safari, you might have noticed the top left corner has a rounded appearance. This could be a rendering bug or perhaps a feature.
dash values are set to
stroke-linecap attribute is set to either
the caps will remain visible as if the dashes are still there.
This is an unique feature which offers some creative usages.
round caps will form a full circle.
With sufficiently long path we can generate lots of dots using
stroke-dasharray and the round caps.
The dots are just caps with dashes length in
They're positioned where the path leads,
so adjust the path the dots will follow.
At this point, I genuinely wish
SVG gradients could follow along the SVG path so that I can apply different colors to the dots.
mask is the only option to get a similar result.
After generating different paths using Math equations, adding dashes with
will result in some peculiar shapes.
I'm not sure if they can be anyting practical. It's just intriguing to see.
Despite its interesting aspects, I find
stroke-dasharray to be very useful in some specific cases.
Here's a symmetrical shape resembling a window lattice, yet the central part seems a little dense.
How can it be improved?
One option is to position a circle at the center.
Another approach is to modify the lines with
There are many options. For example, the one below looks much like a flower in its middle.
stroke-dasharray not only prevent lines from overlapping
but also tend to change the feels based on different patterns.
It's also easy to apply a dashed stroke to the texts in SVG.
However, Safari again has a strange behavior for rendering
Maybe that's caused by the length calculation.
pathLength attribute is not available for text strokes so
I can't get a consistant result in every browser.
For the same
dashes in Safari are about 5 times more compact than Chrome and Firefox.
And when the size of SVG changes its dashes will turn into another shape.
Design with dashes
If the character is complex enough, like 䲜 or 靐, it would contain more dashes, which is something that can be utilized for design.
The original text becomes hard to recognize after adding dashes. Its meaning fades away, preserving only the shapes.
Another complex character.
There are plenteous Unicode characters and different fonts to try. But it's important to note that fonts in different platforms may not look the same. The result is highly dependant on the shape of the text.