stroke-dashoffset

The stroke-dashoffset property in CSS defines the location along an SVG path where the dash of a stroke will begin. The higher the number, the further along the path the dashes will begin.

.module {
  stroke-dashoffset: 100;
}

Remember:

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

Values

The stroke-dashoffset property can accept a percentage or a numeric value.

• stroke-dashoffset: 100
• stroke-dashoffset: 25%

Note that units (i.e. em and px) are not required. A number without units is rendered in pixel units. Percentage is relative to the percent of the current viewport.

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

Getting Tricky with stroke-dashoffset

Have you ever seen those cool demos where an SVG shape appears to draw itself? That’s a trick that animates the stroke-dashoffset of an element in conjunction with the stroke-dasharray 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

• stroke
• stroke-dasharray
• stroke-linecap
• stroke-width

More Information

• SVG 1.1 Spec
• MDN on fills and strokes

Browser Support