Vivus.jsを使ったSVGアウトラインアニメーションの作り方！

公開日：2025-09-07

JavaScript

SVG
Vivus.js

今回は、Vivus.jsを使ってSVGアウトラインアニメーションを作成する方法を解説します。

Vivus.jsを理解すれば、サイト読み込み時などでよく見られる、ロゴの輪郭が線で描かれていく以下のようなアニメーションが作れるようになります。

この機会にぜひVivus.jsを使ったSVGアニメーションの作り方を覚えてみて下さい。

Vivus.jsとは？

Vivus.jsは、SVGのアウトラインアニメーションを簡単に実装できるJavaScriptライブラリです。

SVGのアウトラインアニメーション自体はCSSだけでも実装可能ですが、その場合はpathの長さを計算するなど、手間がかかります。

しかし、Vivus.jsを使えば複雑な計算をする必要がなく、シンプルなコードでスムーズにアウトラインアニメーションを表現できます。

「①CSSのみ」と「②Vivus.js」のそれぞれで同じSVGアニメーションを実装した際のコード比較

「①CSSのみ」の場合

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
circle {
  stroke-dasharray: 502; /* 円周の長さは(2πr = 2*3.14*80 ≈ 502)から計算されている */
  stroke-dashoffset: 502;
  animation: draw 2s ease forwards;
}

「②Vivus.js」の場合

new Vivus("my-circle", {
  type: "delayed",
  duration: 200,
  animTimingFunction: Vivus.EASE,
});

また、Vivus.jsを使えば、複数の要素で構成されたSVGに対しても、各要素をアニメーションさせることができます。

Vivus.jsの使い方

Vivus.jsのインストール方法

Vivus.jsは、をプロジェクトに取り込むには以下の3つの方法があります。

Githubからファイルをダウンロードしてくる方法
CDNを利用する方法
npmを使う方法

Githubからファイルをダウンロードしてくる方法

以下のURLにアクセスし、「Code>Download ZIP」からファイルがダウンロードできます。

https://github.com/maxwellito/vivus?tab=readme-ov-file#vivusjs

CDNを利用する方法

Vivus.jsのCDNを利用するには、以下のタグをheadタグの中に記述します。

<head>
  <!-- 以下のコードを記述する -->
  <script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
</head>

npmを使う方法

npmを使っている場合は、ターミナルでnpm install vivusを実行することで、node_modulesにファイルがインストールされます。

Vivus.jsの基本的な使い方

本例では、以下のようなSVGを用意しました。（あらかじめid属性を指定しています。）

以下のコードはすべてpath要素で構成されていますが、strokeを持つ要素であれば問題なく動作します。

<svg
  width="492"
  height="487"
  viewBox="0 0 492 487"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  id="sample"
>
  <path
    d="M246 1.5C381.048 1.5 490.5 109.861 490.5 243.5C490.5 377.139 381.048 485.5 246 485.5C110.952 485.5 1.5 377.139 1.5 243.5C1.5 109.861 110.952 1.5 246 1.5Z"
    stroke="black"
    stroke-width="3"
  />
  <path
    d="M246.5 269.5C268.681 269.5 286.5 286.376 286.5 307C286.5 327.624 268.681 344.5 246.5 344.5C224.319 344.5 206.5 327.624 206.5 307C206.5 286.376 224.319 269.5 246.5 269.5Z"
    stroke="black"
    stroke-width="3"
  />
  <path
    d="M172 64.5C187.527 64.5 201.872 75.4465 212.419 93.7695C222.943 112.052 229.5 137.41 229.5 165.5C229.5 193.59 222.943 218.948 212.419 237.23C201.872 255.553 187.527 266.5 172 266.5C156.473 266.5 142.128 255.553 131.581 237.23C121.057 218.948 114.5 193.59 114.5 165.5C114.5 137.41 121.057 112.052 131.581 93.7695C142.128 75.4465 156.473 64.5 172 64.5Z"
    stroke="black"
    stroke-width="3"
  />
  <path
    d="M184.5 160.5C206.681 160.5 224.5 177.376 224.5 198C224.5 218.624 206.681 235.5 184.5 235.5C162.319 235.5 144.5 218.624 144.5 198C144.5 177.376 162.319 160.5 184.5 160.5Z"
    stroke="black"
    stroke-width="3"
  />
  <path
    d="M321 64.5C305.473 64.5 291.128 75.4465 280.581 93.7695C270.057 112.052 263.5 137.41 263.5 165.5C263.5 193.59 270.057 218.948 280.581 237.23C291.128 255.553 305.473 266.5 321 266.5C336.527 266.5 350.872 255.553 361.419 237.23C371.943 218.948 378.5 193.59 378.5 165.5C378.5 137.41 371.943 112.052 361.419 93.7695C350.872 75.4465 336.527 64.5 321 64.5Z"
    stroke="black"
    stroke-width="3"
  />
  <path
    d="M308.5 160.5C286.319 160.5 268.5 177.376 268.5 198C268.5 218.624 286.319 235.5 308.5 235.5C330.681 235.5 348.5 218.624 348.5 198C348.5 177.376 330.681 160.5 308.5 160.5Z"
    stroke="black"
    stroke-width="3"
  />
  <path
    d="M355 394H138C149 413.833 185.4 453.3 243 452.5C300.6 451.7 341.667 413.167 355 394Z"
    stroke="black"
    stroke-width="3"
  />
</svg>

まずは、Vivus.jsを読み込みましょう。

ここではCDNを使ってVivus.jsを読み込むことにします。

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vivus.jsの使い方</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
</head>

次に、Vivusクラスからインスタンスを作成します。

Vivusは3つの引数を取ります。

new Vivus(要素, オプション, コールバック);

第一引数	アニメーションさせたいSVGのid属性、またはDOM要素そのものを指定。
第二引数	Vivus の挙動を設定するオブジェクトを指定。
第三引数（任意）	アニメーション終了時に呼び出したいコールバック関数を指定。

new Vivus("sample", {
  type: "delayed", // アニメーションの進行タイプ
  duration: 200, // アニメーションにかかるフレーム数（※ミリ秒ではない点に注意）
  animTimingFunction: Vivus.EASE, //イージング
});

デフォルトでは、SVG要素が画面に表示されたタイミングでアニメーションが自動的に始まります。

なお、上の例ではtypeを「delayed」に設定しているため、前述のSVG要素は、各パスが少しずつ遅れて順番に描画されますが、他の値にすることで、同時に描画したり、1本ずつ順番に描画したりといった異なるアニメーションを実現できます。

type: “delayed”

type: “sync”

type: “oneByOne”

その他、どんなオプションがあるかは公式ドキュメントをチェックしてみて下さい。

Vivus.jsのアウトラインアニメーションを手動制御する方法

デフォルトでは、Vivus.jsはSVG要素が画面に表示されたタイミングでアニメーションが自動的に始まります。

これは、デフォルトでオプションのstartの値がstart: “inViewport”（ビューポートに入った段階でアニメーション開始）に設定されているためです。

new Vivus("sample", {
  type: "oneByOne",
  duration: 200,
  animTimingFunction: Vivus.EASE,
  start: "inViewport", // 左の記載がなくてもデフォルトで"inViewport"に設定されている
});

これを、手動制御できるようにしたい場合（例：ボタンがクリックされた際に再生・停止させたい）は、start: “manual”と設定します。

また、生成されたインスタンスを変数に代入して保持しておきます。

const vivus = new Vivus("sample", {
  type: "oneByOne",
  duration: 200,
  animTimingFunction: Vivus.EASE, 
  start: "manual",
});

あとは、生成したインスタンスのplay()メソッドやstop()メソッドを呼び出して、アニメーションを制御できます。

<svg
  width="492"
  height="487"
  viewBox="0 0 492 487"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  id="sample"
>
  <!-- 省略 -->
</svg>

<div class="btns">
  <button class="playBtn">再生</button>
  <button class="stopBtn">停止</button>
</div>

<script>
  // Vivusの初期化
  const vivus = new Vivus("sample", {
    type: "oneByOne", // アニメーションの進行タイプ
    duration: 200, // アニメーションにかかるフレーム数（※ミリ秒ではない点に注意）
    animTimingFunction: Vivus.EASE, //イージング
    start: "manual",
  });

  // 再生ボタン
  document.querySelector(".playBtn").addEventListener("click", () => {
    vivus.play(1); // 引数1は正方向、-1は逆再生
  });

  // 停止ボタン
  document.querySelector(".stopBtn").addEventListener("click", () => {
    vivus.stop(); // アニメーションを停止
  });
</script>