SVGロゴアニメーション・RevealFill ローディング演出の実装ガイド

はじめに

SVGアニメーションは、Webデザインに動きを加えるための強力な手法です。今回は、SVGのパスを順番に塗りつぶす RevealFill アニメーションを実装する方法を紹介します。

このアニメーションでは、 Intersection Observer API を使用し、SVGが画面内に入ったときに順番に塗りが適用されるようにします。

RevealFillアニメーションとは？

RevealFillは、SVGの各パーツが順番に塗りつぶされるアニメーションです。この手法を使うことで、ロゴやアイコンをより魅力的に表示できます。

今回のアニメーションは、 SVG Artista を使って作成しました。

差分チェックツールで効率UPお手本コードと自分のコードを比較して、違いを一目で確認できます。練習前にブックマークしておくと便利です。

Diff Checkerを開く →

See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.

実装手順

1. SVGの準備

SVG Artista で作成したアニメーション付きの SVG を準備します。SVG には各パーツごとにクラスが付与され、fill のトランジションが適用されます。

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1448 1447" preserveAspectRatio="xMidYMid meet">
  <g>
    <path class="svg-elem-1" d="M6995 14464 c-169 -7..."></path>
    <path class="svg-elem-2" d="M6910 12699 c-964 -59..."></path>
    <!-- 他のパス -->
  </g>
</svg>

このSVGの fill プロパティをアニメーションで適用するように設定します。

2. CSSの設定

CSSを使用して、SVGが .active クラスを持ったときに塗りが適用されるようにします。

svg .svg-elem-1, svg .svg-elem-2 {
  fill: transparent;
  transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
  fill: #000;
}

svg.active .svg-elem-2 {
  fill: #000;
}

3. JavaScriptで画面内に入ったら `.active` を追加

JavaScript で Intersection Observer API を使用し、SVGが画面内に入ったときに .active クラスを追加します。

document.addEventListener("DOMContentLoaded", function () {
  const svgElement = document.querySelector("svg");

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        svgElement.classList.add("active");
        observer.unobserve(svgElement); // 監視を停止
      }
    });
  }, { threshold: 0.2 });

  if (svgElement) {
    observer.observe(svgElement);
  }
});

4. SVGを中央に配置し、幅を50%に設定

画面中央に配置し、幅を50%にするCSSを追加します。

svg {
  width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
}

まとめ

SVG Artista でアニメーション付きの SVG を作成
CSS で fill のトランジションを設定
JavaScript で Intersection Observer を使って .active クラスを追加
CSSで中央配置 & 幅50% に調整

この方法を使えば、シンプルで視覚的に魅力的なSVGアニメーションを実装できます！

ぜひSVGアニメーションを試してみてください！ 🚀

よくある質問（FAQ）

Q. SVGロゴアニメーションとは何ですか？

SVGファイルのパス情報を活用し、ロゴが描かれていくような動きを表現するアニメーションです。stroke-dasharrayとstroke-dashoffsetで線が引かれるアニメーションを作成し、完了後にfill（塗り）をフェードインさせることで、RevealFill（描画→塗りつぶし）の2段階アニメーションが実現します。

Q. SVGアニメーションにはどんなツールが必要ですか？

SVGファイルの作成にはIllustratorやFigma、無料ではInkscapeが使えます。作成したSVGをテキストエディタで開き、path要素のd属性を確認します。アニメーションの実装にはCSSのみ、またはJavaScript（GSAP推奨）を使います。GSAPのDrawSVGプラグインを使うとパスの描画アニメーションが簡潔に記述できますが、無料のstroke-dashoffset手法でも同等の効果が得られます。