← All Tools

SVG Stroke Dash Playground

Visualize stroke-dasharray + stroke-dashoffset and build line-drawing animations.

Preview

Path length:

Stroke

Generated code

How it works

stroke-dasharray alternates dash and gap lengths along the stroke. stroke-dashoffset shifts the pattern along the path. For a line-drawing animation, set stroke-dasharray: L and animate stroke-dashoffset from L to 0, where L is the total path length.

Copied!