The stroke-dasharray property controls how a stroked path is broken up into a repeating pattern of painted segments and gaps, turning a continuous outline into dashed or dotted lines. Rather than altering the geometry of the shape itself, it changes the way the stroke is rendered along the path: the visual rhythm of dashes and spaces is applied along the path’s length and repeats as necessary. This property is often used together with stroke-dashoffset to shift the pattern along the path, which is useful for aligning dashes or creating motion effects.

Because the pattern is rendered along the path, the final appearance depends on how the stroke interacts with line caps and joins and on the stroke’s thickness and color. For example, the shape of the ends of each dash is determined by stroke-linecap, and thicker strokes created by stroke-width will make the pattern read differently at a given scale. The stroked color set by stroke is applied to the dashes only; gaps remain transparent. Transformations and coordinate-space considerations can also affect how the dash pattern scales and repeats—behaviors that may be influenced by properties such as vector-effect.

In practical use, stroke-dasharray is a versatile stylistic tool: designers use it to convey emphasis, hierarchy, or a hand-drawn look, and developers commonly animate the perceived drawing of a path by manipulating dash-related properties to reveal or hide parts of the stroke. The repeating nature of the pattern means that its relationship to the total path length matters visually: short paths may cut a pattern off mid-sequence, while long paths will show many repeats. Because the property only affects rendering, it is compatible with any stroked SVG geometry and integrates cleanly with animations and scripts that adjust stroke rendering over time.