BLOG ブログ

技術情報

はじめてのSVGアニメーション！デザイン〜Vivus.jsでの実装

minami

minami

【はじめに】

最近よく見るリッチなアニメーションのWEBサイト。
デザインを動かしたいけどどうなってるんだろう？と思っていたので、調べつつ挑戦してみました！

この記事では、デザイン側でのSVGデータ作成から、HTML・Javascriptでの実装までの手順を紹介します。

【完成イメージ（.gif）】

【ざっくり流れ】

  1. デザインのベクターを用意
  2. アニメーション用にベクターを加筆修正
  3. 整ったらSVGファイルとして書き出す
  4. SVGファイルをVScodeで開き、コードをHTMLに貼り付ける
  5. svgタグの中を加筆修正
  6. Vivus.js（JSライブラリ）をheadタグ内で読み込み
  7. jsファイルにコードを書く

【くわしく説明】

①デザインのベクターを用意

動かしたいなと思うイラスト・テキストなどを、ベクター形式で用意します。
私はfigmaで作成しましたが、illustratorでもOK！

②アニメーション用にベクターを加筆修正

一体何をするかというと、デザインを上からパスでなぞって覆い隠します。
SVGアニメーションを実装するために使用する「Vivus.js」とは、パスをピューっと描いて出現させてくれるやつです。
今回はその応用編で、上から別のパスで覆い隠しておいて、それをピューっと消します。
そうすることで、下のデザインが描画されているようなアニメーションを実現できます！

というわけで、覆い隠す用のパスをペンツールで描きましょう。
ポイントは、途切れずひと続きに描画することと、隠れるようにパスを太くすることです。

③整ったらSVGファイルとして書き出す

それではデザインと覆い隠したパスをセットで、SVGファイルとして書き出します！
必ず綺麗に重なった状態で、バラバラにならないようにします。（figmaであればフレームで囲うなど）

④SVGファイルをVScodeで開き、コードをHTMLに貼り付ける

ここからはコーディングの話です！
SVG画像をコードとしてHTMLに貼り付けるため、まずはVScodeなどでSVGファイルを開きます。
私が今回使用したのは下記のコードです。

編集前のSVGコード

<svg width="1413" height="738" viewBox="0 0 1413 738" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M901.606 634.313C888.689 640.016 875.673 645.297 862.655 650.117C856.532 652.399 850.369 654.585 844.231 656.669C831.922 660.841 819.621 664.683 807.257 668.133C800.867 669.94 794.5 671.614 788.128 673.222C777.549 675.876 766.956 678.334 756.34 680.497C749.492 681.91 742.666 683.189 735.835 684.403C726.336 686.085 716.853 687.534 707.392 688.85C701.159 689.689 694.954 690.459 688.743 691.164C679.099 692.23 669.479 693.195 659.906 693.892C653.776 694.36 647.672 694.727 641.565 695.061C632.599 695.514 623.651 695.768 614.76 695.919C608.767 696.013 602.804 696.073 596.867 696.031C588.06 695.977 579.276 695.79 570.547 695.467C565.157 695.251 559.797 695 554.432 694.684C545.423 694.151 536.443 693.55 527.513 692.747C353.59 677.057 201.456 608.18 121.047 532.179C118.915 530.165 116.884 528.176 114.85 526.154C99.4361 510.804 86.9696 495.196 77.8765 479.726C76.476 477.359 75.141 474.987 73.9044 472.607C68.0739 461.441 64.0662 450.399 61.9898 439.606C61.5071 437.169 61.1252 434.757 60.8417 432.338C60.8116 431.944 60.7816 431.551 60.7516 431.157C59.6314 419.071 62.17 410.861 65.1756 401.429L74.3449 380.31C113.016 309.439 266.7 367.082 365.08 520.879L364.386 521.724C252.913 363.121 116.279 336.207 71.3859 392.081C70.2888 401.467 71.6547 411.589 75.3323 422.194C76.3442 425.085 77.525 428.03 78.8419 431.03C84.6765 443.978 93.7227 457.537 105.686 471.304C108.037 474.027 110.519 476.74 113.102 479.479C183.789 554.242 337.622 632.853 529.242 652.338C539.244 653.356 549.331 654.203 559.507 654.911C565.074 655.278 570.671 655.609 576.296 655.873C586.025 656.351 595.807 656.66 605.709 656.795C611.881 656.885 618.083 656.939 624.311 656.893C634.229 656.828 644.204 656.628 654.262 656.223C660.638 655.968 667.01 655.646 673.442 655.254C683.91 654.621 694.462 653.782 705.035 652.778C711.712 652.136 718.383 651.429 725.113 650.619C735.6 649.357 746.137 647.893 756.76 646.257C764.058 645.107 771.35 643.89 778.698 642.538C790.436 640.389 802.222 638.005 814.053 635.354C820.925 633.807 827.791 632.194 834.683 630.481C848.499 627.051 862.386 623.254 876.308 619.058C883.044 617.026 889.774 614.929 896.53 612.731C911.199 607.95 925.934 602.736 940.702 597.09C948.23 594.206 955.783 591.222 963.356 588.071C980.679 580.91 998.02 573.121 1015.38 564.705C1022.44 561.263 1029.52 557.754 1036.56 554.116C1156.98 461.008 1272.44 316.358 1297.15 10.6654C1305.6 22.9182 1313.6 35.1732 1321.15 47.3295C1328.78 59.6448 1335.91 71.8665 1342.54 83.9945C1349.25 96.2814 1355.45 108.442 1361.09 120.481C1366.76 132.682 1371.9 144.725 1376.37 156.59C1329.27 275.571 1264.06 412.164 1085.06 527.357L992.98 585.711C985.116 590.665 977.169 595.395 969.211 599.994C953.738 608.927 938.144 617.143 922.402 624.71C915.502 628.041 908.559 631.243 901.606 634.313Z" fill="url(#paint0_linear_554_800)"/>
  <path d="M1352 3C1352 3 1331.5 476 882 635.5C621.543 727.92 126.717 632.5 70.174 476C45.0631 406.497 65.7743 350 139.674 350C265.684 350 396.684 532.5 396.684 532.5" stroke="white" stroke-width="120"/>
  
  <defs>
    <linearGradient id="paint0_linear_554_800" x1="1388.91" y1="320.963" x2="60.0723" y2="422.37" gradientUnits="userSpaceOnUse">
      <stop stop-color="#1C8993"/>
      <stop offset="1" stop-color="#1F70A9"/>
    </linearGradient>
  </defs>
</svg>

⑤svgタグの中を加筆修正

次にSVGコードをHTMLに貼り付け、コードを編集していきます。
ステップ②でデザインを覆い隠したパスを機能させ、動かすためです。

先ほど開いたSVGコードを直接書き換えてもいいのですが、テンプレートコードを作ったのでそこにコピペしていくと分かりやすいです。

コピペ用テンプレートコード

<!-- 外枠の<svg>１行目をペースト、js用にidのみ追加 -->
<svg id="target-svg">

  <defs>
    <mask id="mask">
      <g>
        <!-- マスク用のpathをここにペースト -->
        
      </g>
    </mask>

    <!-- もともと<defs>内にある色の設定などはここ -->
    
  </defs>

  <g mask="url(#mask)">
    <!-- デザイン用のpathをここにペースト -->
    
  </g>
</svg>

それでは上記のテンプレコードを使って解説していきます。

  1. まず1行目のsvgタグをそのままテンプレコードに貼り付けます。
  2. そのsvgタグに1点だけ、「id="target-svg"」を追加します。
    • このidは後ほどjavascriptファイルで使います。
  3. 次に複数あるpathタグから、覆い隠す用のパスを探します。（おそらく末尾に書いてある色などで特定できるはず）
    • 探したらそのpathを「マスク用のpathをここにペースト」部分に貼り付けます。
    • ここはmaskタグで囲んでいるので、隠す用のパスとして機能するようになります。
    • 「id="mask"」も後ほど使います。
  4. defsタグ内に何か書いてあれば、「もともとdefs内にある色の設定などはここ」部分に貼り付けます。
  5. 最後に残っているデザイン用のpathタグを「デザイン用のpathをここにペースト」部分に貼り付けます。
    • ここを囲うgタグに、mask属性として先ほどの「id="mask"」のパスを指定しています。

編集後のSVGコード

<svg id="target-svg" width="1413" height="738" viewBox="0 0 1413 738" fill="none" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <mask id="mask">
      <g>
        <!-- マスク用のpath -->
        <path d="M1352 3C1352 3 1331.5 476 882 635.5C621.543 727.92 126.717 632.5 70.174 476C45.0631 406.497 65.7743 350 139.674 350C265.684 350 396.684 532.5 396.684 532.5" stroke="white" stroke-width="120"/>
      </g>
    </mask>

    <linearGradient id="paint0_linear_554_800" x1="1388.91" y1="320.963" x2="60.0723" y2="422.37" gradientUnits="userSpaceOnUse">
      <stop stop-color="#1C8993"/>
      <stop offset="1" stop-color="#1F70A9"/>
    </linearGradient>
  </defs>

  <g mask="url(#mask)">
    <!-- デザイン用のpath -->
    <path d="M901.606 634.313C888.689 640.016 875.673 645.297 862.655 650.117C856.532 652.399 850.369 654.585 844.231 656.669C831.922 660.841 819.621 664.683 807.257 668.133C800.867 669.94 794.5 671.614 788.128 673.222C777.549 675.876 766.956 678.334 756.34 680.497C749.492 681.91 742.666 683.189 735.835 684.403C726.336 686.085 716.853 687.534 707.392 688.85C701.159 689.689 694.954 690.459 688.743 691.164C679.099 692.23 669.479 693.195 659.906 693.892C653.776 694.36 647.672 694.727 641.565 695.061C632.599 695.514 623.651 695.768 614.76 695.919C608.767 696.013 602.804 696.073 596.867 696.031C588.06 695.977 579.276 695.79 570.547 695.467C565.157 695.251 559.797 695 554.432 694.684C545.423 694.151 536.443 693.55 527.513 692.747C353.59 677.057 201.456 608.18 121.047 532.179C118.915 530.165 116.884 528.176 114.85 526.154C99.4361 510.804 86.9696 495.196 77.8765 479.726C76.476 477.359 75.141 474.987 73.9044 472.607C68.0739 461.441 64.0662 450.399 61.9898 439.606C61.5071 437.169 61.1252 434.757 60.8417 432.338C60.8116 431.944 60.7816 431.551 60.7516 431.157C59.6314 419.071 62.17 410.861 65.1756 401.429L74.3449 380.31C113.016 309.439 266.7 367.082 365.08 520.879L364.386 521.724C252.913 363.121 116.279 336.207 71.3859 392.081C70.2888 401.467 71.6547 411.589 75.3323 422.194C76.3442 425.085 77.525 428.03 78.8419 431.03C84.6765 443.978 93.7227 457.537 105.686 471.304C108.037 474.027 110.519 476.74 113.102 479.479C183.789 554.242 337.622 632.853 529.242 652.338C539.244 653.356 549.331 654.203 559.507 654.911C565.074 655.278 570.671 655.609 576.296 655.873C586.025 656.351 595.807 656.66 605.709 656.795C611.881 656.885 618.083 656.939 624.311 656.893C634.229 656.828 644.204 656.628 654.262 656.223C660.638 655.968 667.01 655.646 673.442 655.254C683.91 654.621 694.462 653.782 705.035 652.778C711.712 652.136 718.383 651.429 725.113 650.619C735.6 649.357 746.137 647.893 756.76 646.257C764.058 645.107 771.35 643.89 778.698 642.538C790.436 640.389 802.222 638.005 814.053 635.354C820.925 633.807 827.791 632.194 834.683 630.481C848.499 627.051 862.386 623.254 876.308 619.058C883.044 617.026 889.774 614.929 896.53 612.731C911.199 607.95 925.934 602.736 940.702 597.09C948.23 594.206 955.783 591.222 963.356 588.071C980.679 580.91 998.02 573.121 1015.38 564.705C1022.44 561.263 1029.52 557.754 1036.56 554.116C1156.98 461.008 1272.44 316.358 1297.15 10.6654C1305.6 22.9182 1313.6 35.1732 1321.15 47.3295C1328.78 59.6448 1335.91 71.8665 1342.54 83.9945C1349.25 96.2814 1355.45 108.442 1361.09 120.481C1366.76 132.682 1371.9 144.725 1376.37 156.59C1329.27 275.571 1264.06 412.164 1085.06 527.357L992.98 585.711C985.116 590.665 977.169 595.395 969.211 599.994C953.738 608.927 938.144 617.143 922.402 624.71C915.502 628.041 908.559 631.243 901.606 634.313Z" fill="url(#paint0_linear_554_800)"/>
  </g>
</svg>

⑥Vivus.js（JSライブラリ）をheadタグ内で読み込み

次にパスを動かすため、Vivus.jsというJavascriptライブラリを使用します。

headタグ内に次の1行を追加し、Javascriptライブラリを読み込みます。

<!-- vivus -->
<script src="//cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>

これでHTML側の作業は完了です。

⑦jsファイルにコードを書く

最後に、javascriptファイルに次のコードを書きます。

new Vivus('target-svg', {
  // vivus.jsのオプション設定したい場合はここに記述
  duration: 200,
});

これでsvgが動くようになります！

minami

minami

一覧に戻る