stroke-dashoffset
Defines where a dash pattern (created with 'stroke-dasharray') starts. By animating this value, you can create the 'self-drawing' line effect commonly seen in SVG animations.
Quick example
path.drawing-line {
stroke-dasharray: 1000;
/* Offsets the pattern so the line appears invisible at first */
stroke-dashoffset: 1000;
transition: stroke-dashoffset 2s;
}
path.drawing-line:hover {
/* Pulls the pattern back to animate the line drawing into view */
stroke-dashoffset: 0;
}Quick facts
Initial value
0Inherited
Yes
Applies to
a subset of SVG elements (shapes)
Animation type
byComputedValueType
stroke-dashoffset Browser Support
Widely available Since 2020 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
1+
1.5+
4+
15+