Dashed Lines, Part 1

In SVG, you can control the appearance of dashed lines by using the stroke-dasharray attribute. The length of the lines and the spaces between them is assigned as the value. You can specify one number. In this case, you get a dashed line consisting of lines and spaces of the same length:

1. stroke-dasharray="15":

2. If you set two numbers stroke-dasharray = "50 10", the first will control the length of the lines, and the second will control the length of the spaces:

3. The sequence can be continued: stroke-dasharray = "1 2 3 5 8 13 21". In this case, you get a dashed line with a complicated rhythm:

The CSS property stroke-dasharray works in the same way.