stroke-dasharray

The stroke-dasharray property in CSS is for creating dashes in the stroke of SVG shapes. The higher the number, the more space in between dashes in the stroke.

.module {
  stroke-dasharray: 5;
}

Remember:

  • This will override a presentation attribute <path stroke-dasharray="5" ... />
  • This will not override an inline style e.g. <path style="stroke-dasharray: 5;" ... />

Values

The stroke-dasharray property can accept any number, including whole numbers, decimals, and percentages:

  • stroke-dasharray: 2
  • stroke-dasharray: 2.5
  • stroke-dasharray: 2em
  • stroke-dasharray: 15%

Note that relative units (i.e. em and rem) can be used but are not required. A number without units is rendered in pixel units. In other words, a unit of 5 is rendered as a dash that is 5 pixels in length.

See the Pen stroke-dasharray property by CSS-Tricks (@css-tricks) on CodePen.

Getting Tricky with stroke-dasharray

Have you ever seen those cool demos where an SVG shape appears to draw itself? That's a trick that takes the stroke-dasharray of an element and animates it in conjunction with the stroke-dashoffset property.

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

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

We cover this technique in much more detail in this post.

Related

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Yes Yes Yes Yes 9+ 4.4+ Yes
This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag