スクロール連動で線が動く！SVGパスアニメーションの実装テクニック【初心者向け】

6月 30, 2025 6月 30, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
日々のWeb制作の中で「ちょっとした動きでサイトの印象をグッと良くしたい」と思うこと、ありますよね？

そんなときに活躍してくれるのが、SVGパスを使ったアニメーションです。

中でも今回ご紹介するのは、スクロールに合わせて線が描かれていくようなアニメーション。
手書き風のロゴや装飾イラストが、ユーザーのスクロールに応じて動き出す…。

ちょっとした工夫ですが、印象に残るサイトづくりにぴったりなんです。

この記事では、SVGのpath要素とJavaScriptを使って、スクロールに応じてパスが描画されるアニメーションの実装方法を丁寧に解説していきます。
コピペで使えるサンプルコード付きで、初めての方でも安心ですよ！

SVGパスアニメーションとは？

SVGの<path>要素を使うと、複雑な曲線や直線を描けます。
この線をCSSやJavaScriptの力を借りて徐々に描画することで、アニメーションのような演出ができるのです。

とくに、今回紹介するのは「スクロールに連動して描かれる」タイプのアニメーション。
単に自動で線が引かれるよりも、ユーザーの操作と連動して動くことで、より自然でインタラクティブな印象を与えることができます。

ブランドロゴを手書き風に見せたいとき
イラストが描かれる過程を演出したいとき
セクション間の仕切り線を動かしたいとき

こんなシーンで活躍します。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

基本構造と考え方

SVGのパスをアニメーションさせるための基本は「stroke-dasharray」と「stroke-dashoffset」の2つのCSSプロパティです。

path { 
    stroke-dasharray: 線の全長; 
    stroke-dashoffset: 線の全長; 
}

これにより、線は最初「見えない状態」になります。
あとはこのstroke-dashoffsetを減らしていけば、線が描かれていくように見えるのです。

スクロールとの連動

JavaScriptを使ってスクロール量を取得し、描画の進行度を調整することで「スクロールに応じて描画される」アニメーションが完成します。

実装サンプル：スクロールに連動する線の描画

ここでは、シンプルな線を例に実装します。

HTML（SVG）

 <svg width="100%" height="200" viewBox="0 0 600 200"> <path id="line" d="M10,100 Q300,10 590,100" stroke="blue" stroke-width="4" fill="none" /> </svg>

CSS

#line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 0.2s linear;
  }

※stroke-dasharray / offset の値は、パスの長さに応じて調整してください。

JavaScript

const path = document.getElementById("line");
  const pathLength = path.getTotalLength();
  window.addEventListener("scroll", () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = scrollTop / docHeight;
    path.style.strokeDashoffset = pathLength * (1 - progress);
  });

これで、スクロール量に応じて線が少しずつ描かれていくアニメーションが完成します！