SVG Line Draw
SVGラインドロー
どんな動き？
SVGパスのstroke-dasharrayとstroke-dashoffsetを利用して、線が始点から終点へ向かって徐々に描かれていくように見せるアニメーション。ロゴやアイコン、イラストのアウトラインに使うと手描き風の温かみのある印象を与えられ、ブランディングページなどで印象的に使われる。
よく使う場所
ロゴアイコンイラスト署名演出
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Animate an SVG path so it appears to be drawn from start to end.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
stroke-dasharray: 1 (pathLength normalized)
stroke-dashoffset: 1 (line fully hidden)
Animation:
stroke-dashoffset decreases from 1 to 0, progressively revealing the stroke along the path.
Final state:
stroke-dashoffset: 0 (line fully drawn)
Timing:
duration: 1.2s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSS (stroke-dasharray/stroke-dashoffset)GSAP DrawSVGPluginIntersection Observer
別名・関連ワード
Line DrawingStroke DrawPath Draw