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.
It is documented as part of the Scalable Vector Graphics specification.
Syntax
/* Usage 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;
}
/* Global values */
stroke-dashoffset: inherit;
stroke-dashoffset: initial;
stroke-dashoffset: revert;
stroke-dashoffset: revert-layer;
stroke-dashoffset: unset;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.
1+
1.5+
4+
15+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more