概要
SVGテキストのアウトラインが手描きのように描かれ、描き終わると塗りつぶされる3種のデモ。クリックで再生され、ローディングやロゴ登場に向く。
使用技術
・GSAP（timelineによる連続再生）
実装ポイント
・`fill:transparent` の文字に `strokeDasharray`/`strokeDashoffset` を十分長い値（3000）で設定し、offsetを0へ動かして線が伸びる描画を表現
・描画完了の少し手前（`”-=0.5″`）から `fill` を着色し、線画と塗りをなめらかに繋ぐ
・Tech Dash（02）は `strokeDasharray:”30 30″` の破線をoffsetで流してローディング風にし、その後実線へ戻して確定
・各デモは `paused:true` のtimelineを保持し、ラッパーのクリックで `tl.restart()` して何度でも再生
コアスニペット
const PATH_LENGTH = 3000; // 十分に長いパス長
gsap.set(text, {
strokeDasharray: PATH_LENGTH,
strokeDashoffset: PATH_LENGTH,
fill: "transparent",
});
const tl = gsap.timeline({ paused: true });
tl.to(text, { strokeDashoffset: 0, duration: 2.5, ease: "power2.inOut" }) // 線を描く
.to(text, { fill: "#ffffff", duration: 0.8 }, "-=0.5"); // 描き終わる手前で塗り
tl.play();