SVGのパスを自在に操るアニメーション手法

SVGのパスがスルスルと魔法のように描かれていくアニメーション。スタイリッシュな表現からやわらかい表現まで、多種多様なWEBサイトで使われており、よく見る表現だと思います。
一見すると複雑なプログラミングやJSライブラリが必要そうに見えますが、実は数行のCSSから始めることができます。

この記事では、基本となる描画アニメーションから、JavaScriptを用いた動的な制御、そしてモダンな表現で使える応用テクニックまでを段階的に解説します。

描画アニメーションの「仕組み」を理解する

SVGの描画アニメーションは、塗りつぶし（Fill）ではなく、線（Stroke）の破線の位置を動かしているだけという非常にシンプルなものです。
この仕組みを理解するために覚えるのは2つのプロパティだけ。

仕組みの要点

まずはパスの全周と同じ長さの「実線」と「空白」を用意します（stroke-dasharray）。
stroke-dashoffset を動かして、最初は「空白部分」だけが見えるようにずらす。
アニメーションでオフセットを 0 に戻すと、隠れていた「実線部分」が姿を現し、描画されているように見えます。

初級：CSSのみで実装する基本の描画

まずは、最もシンプルな円を描画するコードを見てみましょう。

SVG要素を用意し、path または circle を作成、そのパスの「長さ」を確認します。
そしてCSSの animation で stroke-dashoffset を変化させます。

<svg viewBox="0 0 100 100" class="svg-container"> <circle class="draw-path" cx="50" cy="50" r="45" /> </svg>

/* CSS */
.draw-path {
	fill: none; stroke: #3498db; stroke-width: 5; /* 1. パスの長さを設定（円周 2 * π * r ≒ 283） */
	stroke-dasharray: 283; /* 2. 最初は全て隠す */
	stroke-dashoffset: 283; /* 3. アニメーションの実行 */
	animation: draw 2s ease-in-out forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

中級：pathLength=”1″ を使ったスマートな管理

先ほどの例では、（円周 2 * π * r ≒ 283）を手計算する必要がありました。しかし、複雑なロゴのパスなどでは正確な長さを測るのは困難です。
そこで便利なのが、SVGの属性 pathLength="1" です。これを使うと、パスの全周を強制的に「1」として扱うことができます。

<path d="..." pathLength="1" class="smart-draw" />

.smart-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: draw 2s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

これで、パスの長さがどれだけ複雑でも、0から1の間で制御できるようになります。計算の手間が省ける非常に現実的なテクニックです。

応用：JavaScriptで動的な描画と「塗りつぶし」

さらに高度な演出として、描画が終わった直後に中を塗りつぶす（Fill）アニメーションを追加してみましょう。ここではJSを使ってパスの長さを正確に取得し、より柔軟に制御します。

JSによる長さの自動取得

複雑なパスに対しては、getTotalLength() メソッドを使用します。

const path = document.querySelector('.complex-path');
const length = path.getTotalLength(); // JSから初期値をセット
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length; // 任意のタイミングでクラスを付与してアニメーション開始
setTimeout(() => {
path.style.transition = 'stroke-dashoffset 2s ease, fill 1s ease 1.5s'; path.style.strokeDashoffset = '0'; path.style.fill = '#3498db'; // 描画の終盤で色を塗る }, 500);

実践的な演出のコツ

アニメーションをよりよく見せるためのポイントを紹介します。

• イージング（Easing）の活用
  linear よりも cubic-bezier(0.4, 0, 0.2, 1) のような緩急のあるイージングを使うと、手書き感や高級感が出ます。
• スクロール連動
  Intersection Observer API を使い、ユーザーがその要素までスクロールした瞬間にアニメーションを開始させるのが一般的です。
• ストロークの形状
  stroke-linecap: round; を指定すると、線の端が丸くなり、より柔らかい印象になります。

まとめ

SVGパスアニメーションは、今回の3ステップでマスターできます。

1. stroke-dasharray と offset で破線を動かす。
2. pathLength="1" で計算を省略する。
3. JSの getTotalLength() と fill 属性の変化を組み合わせる。

まずはシンプルな直線や円から試して、徐々に自社のロゴやアイコンに応用してみてください。Webサイトの第一印象を大きく変える強力な武器になるはずです。