Polish & Effects · Small finishing touches
Line drawing线条自绘
- elegant
- procedural
- hand-drawn
The line looks like it is being drawn by a pen, extending from start to end rather than fading in as a whole.
When to use it
Use it the first time an icon, illustration or flow diagram appears; repeating it on every appearance becomes tedious.
Parameters
stroke-dasharray = total path length · stroke-dashoffset: →0 · 800ms ease-in-out
Recipe
Line drawing → 800ms ease-in-outLine drawing → stroke-dasharray = total path length · stroke-dashoffset: →0
One sentence for your AI
Draw this SVG icon on: set stroke-dasharray and stroke-dashoffset to the path length, then animate dashoffset to 0 over 800ms ease-in-out.