SVGテキストが線で描画され塗りつぶされるアニメーション

テキストのアウトラインがまず線で描かれ、その後塗りつぶされていくアニメーションの実装方法について解説しています。

今回はGSAPのDrawSVGPluginを使用して実装してみました。SVGのpathをアニメーションさせる際にとても便利なプラグインで、2025年から無料で使用することができます。

実装例

早速ですが下記が実装例です。

ページ読み込み後にテキストが線で描かれ、その後文字の内側が塗りつぶされていきます。もう一度実行したい場合は、右下にある「Return」ボタンをクリックしてください。

線で描かれてから文字が現れる一連の流れがあり、伝えたいテキストへ自然と視線を集められます。そのためキャッチコピーやオープニングでの演出に向いているアニメーションだと感じます。

解説

HTML / CSS / JavaScriptの処理を順を追って解説していきます。

HTML（SVGの準備）

HTMLは次のとおりです。

1
<div class="catch-copy">
2
  <svg class="catch-copy__canvas js-canvas" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284.0 62.894" width="280" height="62.008">
3
    <g>
4
      <title>想像を創造へ</title>
5
    </g>
6
    <g>
7
      <path transform="translate(6.799 47.746) scale(0.04289 -0.04289)" d="M273 203V52C273 -37 305 -63 426 -63..." />
8
      <path transform="translate(54.282 47.746) scale(0.04289 -0.04289)" d="M481 711H658C643 687 626 664 609 645H427..." />
9
      <!-- 各文字分のpathが続く -->
10
    </g>
11
  </svg>
12
</div>

DrawSVGPluginは線に対して機能するため、<text>要素のSVGではなく、字形（グリフ）の輪郭データ（ベジェ曲線）を<path>化したSVGを用意する必要があります。

さらに1文字ずつ別々の<path>に分けておくと、後述のstaggerや特定文字の強調にも応用しやすくなります。各pathにはtransformで位置・サイズが個別に指定されています。

1
字形の輪郭データを1文字ずつpath要素にしたsvgを作成して

<title>要素でスクリーンリーダー向けにテキスト内容を提供しています。js-canvasクラスはJavaScriptからpath要素を取得するためのフックです。

CSSのポイント

CSSは次のとおりです。

1
.catch-copy {
2
  width: 50vw;
3
}
4

5
.catch-copy__canvas {
6
  display: block;
7
  width: 100%;
8
  height: auto;
9
}
10

11
.catch-copy__canvas path {
12
  stroke: currentColor;
13
  stroke-width: 12;
14
  fill: currentColor;
15
  fill-opacity: 0;
16
}

strokeとfillで線と塗りの色を指定しています。いずれもcurrentColorを指定しているため、親要素の文字色を継承します。stroke-widthで線の太さを調整できます。

fill-opacityの初期値を0に指定しているのは、アニメーション前に塗りが表示されてちらつくのを防ぐためです。JavaScriptでfillOpacityを1にアニメーションさせることで、線描画の後に塗りが表示されます。

JavaScriptの処理

GSAP本体とDrawSVGPluginを読み込んだうえで、次のコードを実行します。

1
gsap.registerPlugin(DrawSVGPlugin);
2

3
const draw = () => {
4
  const paths = document.querySelectorAll(".js-canvas path");
5
  const tl = gsap.timeline();
6

7
  tl.from(paths, {
8
    drawSVG: 0,
9
    duration: 1.5,
10
    ease: "power1.in",
11
  }).to(
12
    paths,
13
    {
14
      fillOpacity: 1,
15
      duration: 1.2,
16
      ease: "power1.inOut",
17
    },
18
    "+=0.5",
19
  );
20
};
21

22
if (document.readyState === "loading") {
23
  document.addEventListener("DOMContentLoaded", draw);
24
} else {
25
  draw();
26
}

querySelectorAllでSVG内のpath要素をすべて取得し、gsap.timeline()で2段階のアニメーションを連結しています。

タイムラインの内容を表にまとめると次のとおりです。

第1段階ではdrawSVG: 0を指定し、線が0%の状態から描画されるアニメーションを行います。第2段階ではfillOpacity: 1を指定し、塗りが表示されるアニメーションを行います。"+=0.5"は、前のアニメーション終了から0.5秒後に次のアニメーションを開始するという意味です。

表現アレンジのアイデア

今回の構成はシンプルなため、いくつかの値や要素を変えるだけで表現の幅を広げられます。

• 文字ごとに遅延を設定する：drawSVGのアニメーションにstaggerオプションを追加すると、文字が順番に描画される演出になります。一文字ずつ現れるリズムが生まれ、テキストが書き進むようなより自然な動きに見えます。

1
tl.from(paths, {
2
  drawSVG: 0,
3
  duration: 1.5,
4
  ease: "power1.in",
5
  stagger: 0.15,
6
});

• 強調したい文字のfillの色を変える：特定のpathにクラスを付与し、CSSでfillを上書きします。強調したい語句を色で際立たせ、メッセージの伝わりやすさを高められます。

1
<svg class="catch-copy__canvas js-canvas" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284.0 62.894" width="280" height="62.008">
2
  <g>
3
    <path class="catch-copy__emphasis" transform="..." d="..."></path>
4
    <!-- 各文字分のpathが続く -->
5
  </g>
6
</svg>

1
.catch-copy__emphasis {
2
  fill: #e63946;
3
}

まとめ

「字形をpath化したSVG」と「GSAPのDrawSVGPlugin」を組み合わせることで、テキストが線で描かれてから塗りつぶされるアニメーションを実装することができました。

タイムラインでdrawSVGによる線描画とfillOpacityによる塗り表示を連結するだけで、シンプルな構成で表現可能です。staggerやfillの色変更を加えれば、様々な演出にも応用できそうです。