The CSS stroke-dasharray property is used to create dashes in the stroke of SVG shapes. The larger the number, the more space in between dashes.

.class {
  stroke-dasharray: 30;
}

This CSS would overwrite a SVG attribute, but not an inline style (therefore avoid using inline styles on SVG).

// Overrules this
< line stroke-dasharray="5" />

// But not this
< line style="stroke-dasharray: 5"; />

Values can be whole numbers, decimals or percentages. If a relative value isn’t used (em, rem) then it will use px by default.

stroke-dasharray: 2;
stroke-dasharray: 2.5;
stroke-dasharray: 2em;
stroke-dasharray: 20%;

In order to make an SVG shape appear that it’s drawing itself, there’s a trick that uses stroke-dasharray in conjunction with stroke-dashoffset.

See the Pen Basic Example of SVG Line Drawing, Backward and Forward by Chris Coyier (@chriscoyier) on CodePen.

There’s also this fancy example, which encouraged me to learn more!

See the Pen SVG & jQuery pop-up animation by Tommaso Poletti (@tomma5o) on CodePen.

Credit to CSS-Tricks. Also some excellent examples on 24ways and Polygon.

 

Related

 

Worthy of Note

Worthy of Note is a site aimed at Web Designers & Developers. It offers a wide range of resources to help assist anyone in the web industry.

View