スクロールで
線が描かれる。
まず描く図形を選んでから下へスクロール。進捗に同期して SVG のストロークが順に引かれ、上へ戻すと逆再生で消える。進捗＝スクロール位置なので、途中で止めれば描きかけのまま留まる。
SHAPE — 図形を選ぶ
SCROLL ↓
0%
線が引き終わった。
SVG の各要素の全長を getTotalLength() で測り、stroke-dashoffset をスクロール進捗で 0 まで詰めるだけ。要素を並べた順に区間を割り当てて、順番に描かれる。
使い方
— USAGE
01
2 ファイルをコピー
本ディレクトリの style.css と script.js を移植先にコピー。外部依存ゼロ。
02
マークアップ
背の高い .line-draw[data-line-draw] の中に .ld-sticky（sticky）と <svg> を置き、描きたい線に class="ld-path" を付ける（path でも circle でも可）。
03
図形を切り替え
script.js の SHAPES に図形を登録すると、ピッカーが自動生成される。多角形・スパイラルは polygon() / spiral() ヘルパーでパラメトリック生成。切り替えると現在のスクロール進捗で再描画される。
カスタマイズ可能な CSS 変数
--ld-stroke線の色#0a0a0a--ld-accent.ld-accent を付けた線の色#ff2d55--ld-width線の太さ2--ld-scroll描画に使うスクロール区間（セクション高さ）260vh