draw() 路径描边

把 SVG path/line/circle 变成“正在被画出来”的效果，做 Logo、Loading、强调线条都很香。

SVG draw() code example

JavaScript

HTML

CSS

xjs('#p1').draw({ duration: 900, easing: 'ease-out' }); xjs('#p2').draw({ duration: 1200, easing: [0.2, 0.8, 0.2, 1] });

.stroke-draw { fill: none; stroke: var(--accent-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

SQUIGGLE

STAR

← Previous

SVG