dasharrays

Dasharrays are a CSS property used to define patterns for the strokes of SVG paths, lines, or shapes. Introduced in SVG (Scalable Vector Graphics) and later adopted in CSS for stroke-related elements, dasharrays enable designers to create custom dashed, dotted, or patterned lines by specifying a sequence of lengths and gaps. The property works by alternating between drawing and skipping segments based on the provided values, creating visually distinct patterns.

The dasharray property accepts a comma-separated list of numbers representing the lengths of the drawn segments and gaps. For example, a value of "5, 3" would produce a pattern where a stroke is drawn for 5 units, then skipped for 3 units, repeating this cycle. Additional values can be added to create more complex patterns, such as "3, 2, 1, 2" for a staggered dash effect. If fewer values are provided than required to complete a stroke, the pattern repeats from the beginning.

Dasharrays are often paired with the dashoffset property, which shifts the starting point of the dash pattern along the stroke. This allows for finer control over alignment, enabling effects like staggered dashes or offset patterns. For instance, a dashoffset of "2" in a "5, 3" pattern would begin the first drawn segment 2 units into the cycle, creating a visually offset appearance.

Dasharrays are widely used in web design for decorative elements, UI components, and data visualization. They can enhance readability by breaking up long lines or add aesthetic appeal through custom patterns. While primarily associated with SVG and stroke-related CSS properties, dasharrays can also be applied to canvas elements or other graphical contexts where stroke patterns are supported.