SVGで手書き風文字アニメーション

TIPS

inoue


手書き風フォントのテキストをどうしてもシュバババっと動かしたくなって、SVGでアニメーションさせた時に苦戦したメモ。

手書き風文字アニメーションって？

こんなやつです。
フォントが手書き風なので書き順にアニメーションするとカッコいい。
でもこれってWebで表現するのはなかなか難しいです。

Google先生にあれこれと聞いた結果、今回はこちらの記事を参考にさせていただきました。

SVGでハンドライティングアニメーションを実装する

まず実際に作ったデモはこちら。

手書き風アニメーションのDEMO

ブラウザ対応に関しては以下になっています。
◯ chrome 最新
◯ Safari 最新
◯ Firefox 最新
◯ iOS Safari
IE ・ Edge 未確認

準備するもの

  • テキストSVG
  • 書き順に動かすパスを引いたSVG
  • JavaScript（anime.jsやTweenMaxなどのアニメーションライブラリ）

SVG2つとJavascript。この3つがあればできます。
JavaScriptは準備というよりは仕上げみたいな感じですね。
ではひとつずつ用意していきましょう。

テキストSVGを用意する

ここから実際の作業になります。
まずはシュバババっと動かしたい手書き風のフォントで書いたテキストをIllustratorを使ってSVGで書き出します。

今回DEMO用に用意したのはこちら。

躍動感があって非常に動かしたくなる字体ですね。
こちらは個人・商用問わず利用可能のフリーフォントになります。

Playlist Free Font

https://freedesignresources.net/playlist-free-font/

Illustrator上で文字ツールを使ってテキストを打ちます。
単語は今回弊社の社名になっていますが、別のフォントを使って日本語にしても構いません。（単語が違う場合、後述のアニメーション調整の部分がちょっとだけ変わってきます）フォントの大きさもご自由に。

そして出来上がったテキストをアウトライン化しておきます。

書き順のSVGをつくる

先ほど作ったテキストの上にレイヤーを作り、ペンツールで書き順に沿ってパスを引いていきます。このパスを動かすことでアニメーションを作るので、こちらがメインの作業になります。全ての文字が書き順のパスで塗りつぶされるように微調整しながら作ります。

作業しやすいように下の文字レイヤーをロックし、ペンツールは塗りをなし、線をお好きな色で不透明度を60%くらいに設定。線の太さを調整して文字が隠れるくらいにパスを作っていきます。
僕は線がカクカクだとやりにくかったので線パネルでパスの線端を角丸にして作業しました。

ここでポイントを2つ。

1文字ずつパスを作る

参考サイトのように英字の筆記体でほぼ全部の文字が繋がっている場合は問題ないのですが、今回使うフォントの場合は1文字ずつ文字が離れています。文字によってフォントの太さが変わったりするので1文字ずつ、できれば一筆書きでパスを作ります。
一筆書きにした方が良い理由は、後でJavaScriptでアニメーションさせる時に1文字に1つのパスの方がアニメーションさせやすいことからです。

ただこのサンプルでは「H」や「E」などは一筆書きにすると他の文字と重なってしまう部分があったのでそれだけ分けました。

直線を引かない

2つ目のポイントはパスを直線にしないことです。
理由は直線にするとSVGに書き出した時に<line>要素として書き出されてしまうためです。すべて<path>要素として書き出したいので、直線もペンツールで微妙にハンドル操作して曲線にすると良いと思います。
参考サイトでは「複合パスに変換」を使うと良いと書いてありましたが、僕の環境ではその方法で書き順通りにアニメーションできませんでした。

こんな感じのパスが引けたら準備おっけーです。
（ペンツール全然慣れてない）

そしてこのファイルをSVGに書き出します。
書き出すときは「アセットの書き出し」を使うと非常に簡単です。
書き出すレイヤーを全部選択し、optionキーを押しながらアセットの書き出しパネルにドラッグします。

あとは書き出したいアセットを選んで書き出し設定からSVGでファイルを書き出します。

出来上がったSVGはこんな感じです。

SVGを2つに分ける

出来上がったSVGを
・マスク用
・アニメーション用
の2つに分けていきます。
少しソースが長くなりますが、実際のSVGを見ていきます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 545.87 180.96"><defs>
  <style>
    .cls-1,
    .cls-2,
    .cls-3,
    .cls-4,
    .cls-5{
    fill:none;
    stroke:red;
    stroke-linecap:round;
    stroke-miterlimit:10;
    opacity:0.6;
    }
    .cls-1{
    stroke-width:23px;
    }
    .cls-2{
    stroke-width:14px;
    }
    .cls-3{
    stroke-width:17px;
    }
    .cls-4{
    stroke-width:18px;
    }
    .cls-5{
    stroke-width:20px;
    }
  </style>
</defs>
<title>hand-writing</title>
<g id="レイヤー_2" data-name="レイヤー 2">
  <g id="レイヤー_2-2" data-name="レイヤー 2">
    <path d="M98.78,42.27c1.8,3.3-1.5,7.65-3.3,10.35A83.51,83.51,0,0,1,86.18,64c-2.55,2.55-5.25,5.7-8.55,7.65-3,1.8-7.35,1.35-3.75-2.4,1.05-.6,5.25-11.1,7.35-10.95-.3.3-1.5,2.85-2.25,4.2,4-5.55,15-21.9,6.45-25.8-3.45-1.5-8.55,0-12,1.2a39,39,0,0,0-11,6A37.88,37.88,0,0,1,78.38,37c2.55-.45,6-1.05,8.1.75,2.25,2.25.9,4.65.6,6.9,0-3.75,1.2-7.35-4.35-7.8-4.65-.15-9.45,1.5-13.5,3.45a38.35,38.35,0,0,0-17.1,16.35c-8,15.75,3.9,32.55,10,46.65-3-5.7-6.45-11.25-9.3-16.95,2.1,4.65,2.85,9,5.4,13.5,3.45,5.55,7,10.65,9,16.95,4,13.5-.15,24.45-10.5,33.45l3-2.11c.15,4.5-13.5,10.2-16.65,11.4-9,3.6-20.85,4.35-29.85-.15-12.9-6.6-9.9-23.24-3.6-33.44,1.5-2.4,12.6-17.1,15.9-11.25,1.35,2.4-3.45,8.85-4.35,11.25a37.76,37.76,0,0,0-2.55,7.95c-1.05,4.8-1.95,10.49.15,15.14,2.4,5.7,8.85,5.7,14.1,4.2a32.28,32.28,0,0,0,17.55-13.95,25.48,25.48,0,0,0,3.6-10.94,21.42,21.42,0,0,0-.45-4.35c-.3-.75-1.2-2.1-.9-3.15a9.59,9.59,0,0,0,.9,2.4,19.37,19.37,0,0,1-.75-3.15c0,.15-.6-1.05-.75-1.05a29.18,29.18,0,0,1-1.2-3.3L48.23,109c-3-7.8-6.6-15.45-9.9-23.25A54.48,54.48,0,0,1,34,67.62c-.15-1.35-.9-10.5,1.5-10.5a6.79,6.79,0,0,0-.45,2.4,34.06,34.06,0,0,1,3.15-8.4l-1,1.5c.75-5.25,7-10.8,10.65-14.1a45,45,0,0,1,18.75-10.2c7.2-1.8,13.65-.6,20.4,2.25a25,25,0,0,1,7.35,4C96.83,36.72,97.58,39.42,98.78,42.27Zm-85.5,81.6c-7,9.6-10.65,22.49-2.85,32.24C4.58,148.77,7.13,132.72,13.28,123.87ZM49.13,70.92a9.8,9.8,0,0,0,0-2.1Z"/>
    <path d="M171.23,52.47c-.6,1.65-.75,3.45-1.65,5.4l-3.6,6.9L158.78,79c-2.1,4.2-4.5,8.1-5.55,12.45,3,0,6.6.6,9.6.3.6-.15,1.2.15,1.8,0,0,0,.3-.9.75-.75.9.3,1.8.45,1.5,1.8-.45,1.5-3.3,2-4.2,2.1-2.4.6-5,.3-7.2.9a19.36,19.36,0,0,0-3.75,1.35c-2.55,1.35-4.35,6.6-5.55,9.3l-5,12c-2.1,4.5-3,8.7-4.65,13.35-3.6,9.45-7.5,18.89-10.8,28.49-1.8,5.1-3.6,11.1-10.2,7.05a7.34,7.34,0,0,1-3.6-7.8c1-5.25,3.15-10.65,4.8-15.75,2.1-6.29,4.5-12.29,7-18.29,3.6-8.4,6.15-17.4,9.9-25.8-2.7.45-4.95,1.65-7.95,1.8-3.15.3-6.3.75-9.45,1.2-3,.3-8.7.75-10.5,2.85-1.35,1.65-2.1,5.4-2.85,7.5l-1,4.2c-.9,4.65-2.85,9.15-4.2,13.65-1.65,5.1-3.3,10.19-4.65,15.3-.9,3-1,9.89-4.65,10.64-3.75.75-8.7-4.65-9.15-8-.6-3.14.9-6.6,1.65-9.44,3.15-11.55,7.35-22.65,10.8-34-2.1-.6-6.6-2.7-5.25-5.7.6-1.35,3-1.8,4.2-2.1,2.7-.75,3.6,0,4.8-2.4.9-1.8,1.65-3.75,2.4-5.55,1.5-4,3.15-8,4.65-11.85,5.25-12.9,10.2-25.8,16.65-38.1a19.22,19.22,0,0,0,1.65-3c0,.3.6-1.8.3-1.65,1.5-2.1,4.5-1.65,6.75-.75,3,1,6.45,3.6,5.25,7-.75,1.8-2.55,3.45-3.6,5.25-.9,2-1.2,4.65-2.4,7.05-1.35,3-2.7,6.15-4.2,9.15-2.7,5.1-4.65,10.5-7.05,15.75-1.5,3.15-1.5,6.15-2.85,9.3a58.51,58.51,0,0,1-3,7c4,0,7.65-1.35,11.7-1.8l6.9-.45c2.1-.15,5.55.3,7.5-.45,2.7-1.2,5.1-10,6.45-13.2l6.15-14.4,11-24.6c1-2.4.6-4.35,4.35-3.75,3.75.45,7.5,3.75,9.15,7.2C175.13,47.67,172.58,49.47,171.23,52.47ZM118.13,67c-3,6.45-7.2,12.6-9.75,19.35s-4.65,13.2-6.9,19.95q2.92-7.87,6.3-15.75Zm.3-.6.3-.75C118.58,66,118.43,66.12,118.43,66.42Zm9.9,77.24c-.9,1.65-2.55,3.15-3,5a28.81,28.81,0,0,0-.9,4.95,18.83,18.83,0,0,1,1.2-2.54A33.43,33.43,0,0,0,128.33,143.66Z"/>
    <path d="M240.23,67.32a.78.78,0,0,1,.6-.3c.3.15-3,5.4-3.6,5.1-.15,0,.3-.6.6-1.2a93.27,93.27,0,0,0-10.35,21.3c1.8-4.8,5.4-13.5,6.6-14.25-1.05,1.2-6.6,15.75-7.05,17.25a99.25,99.25,0,0,0-4.65,18.3c-1,6.3-1.65,12.6-2.4,18.75-.6,4.95-1.8,10.65-1.35,15.14a3.83,3.83,0,0,1,.3-1.8c.15,0,1.2,6.6,2.1,7.2.45.3.9-.15,1.35-.15,2.7-.45,5.7-4.64,7.2-6.44,1-1.2,2.85-4.8,4.35-5.41,5.4-2.39-1.05,14.1-2.55,15.9-2.4,3.15-4.65,5.7-9,5.7a15.32,15.32,0,0,1-9.75-3.6c-4.8-4.35-6.9-11.1-7.2-17.25a41.12,41.12,0,0,1,.9-7.5c0-.59-.3-5.09.15-5.24,0,.15.15.3.15.45,0-.3-.15-.6,0-.75-.3,0-.45-2.7-.45-2.85.15-2,.6-3.75.9-5.7a80.87,80.87,0,0,0,1.2-8.4c0-1,2.7-13.8,4.2-13.65.3,0-.15,1,0,1.2l1.2-4.2c-8,12.9-16.2,26.1-25.05,38.55-2.85,3.75-7.95,12-13.35,12.3-4.95.29-9.45-5-11.85-8.71,0,0-1.8-1.79-2-2.54a10.27,10.27,0,0,0,1.5,1.79l-1.8-3.14c.45,1.5-.75-1-.9-1a9.39,9.39,0,0,1-1.05-3.3,27.72,27.72,0,0,1-.9-7.8c.15-5.4,1.65-10.5,2.7-15.75a68.43,68.43,0,0,1,4.8-15.45c.45-.9,4.5-11.1,5.55-10.95a8.6,8.6,0,0,0-.6,2.1,76.71,76.71,0,0,1,3.3-7.2c-.45.6-1.05,1.35-1.05,1.35.15-2.4,2.85-5.55,3.9-7.65l4.5-8.85a133.17,133.17,0,0,1,12-16.95c3.75-4.65,8.4-9.6,14.25-11.7,3-1,6.3-.45,9.3.15,5.55,1.2,11.25,5.1,15.45,8.7,1.65,1.5,4.95,3.9,4.8,6.45,0,2.1-2.55,4.2-4.2,5.25-3.75,2.4-4.95,1-5.85-2.4,0,.15.45,1.65.15,1.8s-1.65-4.65-1.8-5.25a21.87,21.87,0,0,0-1.05-2.85,7.31,7.31,0,0,0,1.2,1.5,6.85,6.85,0,0,0-2.4-3.6c-1.5-.6-3.3-.3-5.7.6a26.37,26.37,0,0,0-8.85,5.7c-7.2,6.45-12.6,15-17.1,23.55a122.22,122.22,0,0,1,9.75-15,50.86,50.86,0,0,1,6-6.75c1.05-1,3.45-2.4,4.65-3.6-1.65,2-4.5,3.75-6.15,5.4a72.3,72.3,0,0,0-5.25,6.6,128,128,0,0,0-9.6,15.6,164.18,164.18,0,0,0-13.95,36,137.74,137.74,0,0,0-3.6,17.4c-.15,1.35-1.2,6.45.3,7.35,2.25,1.35,8.7-6.3,9.75-7.5,3.45-3.6,6.9-7.2,9.9-10.8-.6.6-1.2,1.35-1.5,1.2-.15,0,5.7-8.55,6.3-9.3l7.2-10.2c5.1-7.35,10-15,15-22.35,1.2-1.8,2.1-3.75,3.15-5.7a14.38,14.38,0,0,1,2.85-3.6c1-1,1.2-3,2.25-4.2,3.75-4.65,9.9-1.5,12.6,2.55C242.78,65.07,241.28,66,240.23,67.32Zm-67.65,59.55v.6l.3-2.7a85.48,85.48,0,0,1,2.55-14.85,253,253,0,0,1,9-29.25,159.65,159.65,0,0,1,12.3-25.5,47,47,0,0,1,9.75-12.3c-4.65,3.75-8.25,9.15-10.8,13.65A209,209,0,0,0,183.08,81,124.53,124.53,0,0,0,174.23,112C173.63,116.82,172.88,121.92,172.58,126.87ZM185.48,82l-.3.75.3-.45Zm21.75-39.75,1.8-1.35A14.07,14.07,0,0,0,207.23,42.27Zm.9,101.39a27.21,27.21,0,0,1,.15-4.94c.3-2.85.9-5.55,1.2-8.4.15-2.4,0-4.95.3-7.2-.45,1-.75,2.1-1.05,3a34.79,34.79,0,0,0-.9,8.85A55.48,55.48,0,0,0,208.13,143.66ZM224,41.22l-.6-1.2A3,3,0,0,0,224,41.22Zm0,0,.45.45A1.12,1.12,0,0,1,224,41.22Zm3.45,51-.45,1.2Z"/>
    <path d="M331.57,45.72c-.14-.3,0,.75,0,.75,0,.75.16,2.7-.14,2.85.14-.15-.15-1-.3-1.65a32.29,32.29,0,0,1-.6,7.65c.29-.75.75-1.8.75-1.8.6,3-2.55,9.6-3.46,11.85a64.48,64.48,0,0,1-8.69,16.2,97.92,97.92,0,0,1-10.2,12c-3.3,3.45-8.1,9-12.9,10.2,14.55-12.6,26.25-27.9,29.7-47.4-2.55,14.1-11.55,26.4-21.15,36.45-4.8,5.25-9,11.25-14.55,15-6.15,3.9-15.15,9.75-22.65,9.3,2.4,4.5,4.8,8.85,7.5,13l-4.8-8.55c4.2,6.9,13.8,20.55,15.15,22l10.35,11.85c2.4,2.7,5.1,6.45,7.65,8.55a3.76,3.76,0,0,1-.6-1.05c0-.15,5.25,3,5.85,3.3a9.87,9.87,0,0,0,4.5,1.05c3.9,0,8.7-3,11.25-5.7,1.35-1.5,2.85-3.45,3.15.6.15,1.65-.45,2.85-1.65,4.35-4.8,6.15-11.4,13.5-20,14.25a14.39,14.39,0,0,1-8.85-2.4c-.6-.45-7.8-7.2-7.65-7.65a.52.52,0,0,1,.3.15c-.15-.3-.45-.45-.6-.6.3.6-1.5-.75-1.65-.9a19.85,19.85,0,0,1-2.7-3.3c-1.35-1.95-2.85-3.75-4.5-5.7-.75-.6-7.05-9.44-5.85-10.35.3-.15.6.6.75.6a28.7,28.7,0,0,1-1.65-3c0,.15.15.45,0,.75-.3.15-7.05-13-7.65-14.24-1.35-2.7-3.3-5.25-4.05-8.25-.6-2-.15-2.7-1.05-4.35-4.5,10.5-8.85,21.9-10.35,33.14a.78.78,0,0,1-.3-.6c-3.3,3.45-10.5,3.75-12.6-.9-2.25-4.95,1.05-12.9,2.1-17.84,1.5-6.6,2.55-13,4.8-19.35.9-2.4,2.1-4.65,3.15-6.9.3-.6,1.2-5.1,1.5-5.25a.9.9,0,0,1,.15.6,3.53,3.53,0,0,0,.3-1.2c-.6,1.35.15-2.4.15-2.55.6-1.8,1.35-3.6,2.1-5.4a43.46,43.46,0,0,0,2.55-8.25c.3-1.2,4.8-13.65,6.15-13.35.3,0-.3,1-.15,1.2.6-1.35,1.2-2.7,1.65-4a1.5,1.5,0,0,1-.6.75c-.3-.15,7.95-18,8.7-19.8a59.59,59.59,0,0,1,4.65-9.9c.9-1.2,1.95-1.65,2.55-2.55.45-.6.6-1.8,1.05-2.55.75-1.5,2.4-5.1,4.35-5.85,3.15-1.35,5.4,2.85,6.3,5.25s.45,3.3-.45,4.95l.45-.3c.45.15-2.55,6-3.15,5.85-.15,0,.3-1.2.75-2.1a264.58,264.58,0,0,0-27.6,63.15A155,155,0,0,1,271,79.17l-1.5,3.45,3.6-7.65a186.75,186.75,0,0,0-6.9,20.1,175.36,175.36,0,0,1,11.4-19.95c3.9-5.7,8.55-10.65,12.75-16.05,0,0,1.2-2.7,1.95-3a22,22,0,0,0-1.35,2.25l2.1-2.7c-.15,0-.15,0-.3-.15.3-2.1,3.75-5.1,5.1-6.6a81.59,81.59,0,0,1,6.15-6.3c3.3-3.3,7.95-9,12.6-10.35C324.38,30,331,38.52,331.57,45.72Zm-15.14,4.65c.75-14.4-14.1,5-16.65,8-8.1,9.75-16.8,20.4-23.4,31.05a.77.77,0,0,1,.75-.6s-4.8,9.15-5.4,10c-2.1,3.9-4.05,7.8-6,11.7.6-.3,6.6-3,6.9-2.7,0,.15-3,1.65-4.2,2.4,15.15-6.3,27.75-18.15,36.9-31.8a112.37,112.37,0,0,1-10.05,12.3c-2.25,2.25-4.65,4.65-7,6.75-1.2.9-3.9,2.4-5.1,3.6,1.35-1.65,4.2-3.15,5.55-4.5,1.8-1.5,3.6-3.15,5.25-4.8A112.37,112.37,0,0,0,304,79.47c5.85-8.25,11.7-18.45,12.45-28.8-.15.3-.15.45,0-.15Zm-46.35,71.25c-1.2-2.1-2.1-3.6-1.8-3.75A27.06,27.06,0,0,0,270.08,121.62Zm5.1-30.45c0,.15-.15.15-.15.3A.52.52,0,0,0,275.18,91.17Zm3.45-29.55,3.9-8.55a34.94,34.94,0,0,1-1.35,3.45A53.89,53.89,0,0,1,278.63,61.62Zm0,74.25c.15.15.15.3.3.3C278.78,136.17,278.78,136,278.63,135.87Zm.45.6v-.16c-.15-.29-.15-.14-.15-.14Z"/>
    <path d="M414.52,40c-1.35.3-2.7.15-3.9.6a1.36,1.36,0,0,0-1.5,0,.66.66,0,0,1-.15.75,31.81,31.81,0,0,1-8.4,2.4c-3,.6-6,1.5-9,1.95a16.28,16.28,0,0,0-3.75.6c-1.5.45-1.2.75-2.25,1-2.7,1.05-5.54,1.05-8.25,1.35-1.5.3-3.15.75-4.65,1.2l-2.69.45a1.82,1.82,0,0,1-.61,1.2,1.76,1.76,0,0,1,.31-1.2c-.9.15-2.55,6.15-2.86,7.05l-3.14,8c-1.5,3.9-3,7.65-4.35,11.55,1.8-5,4.2-11.1,5.55-14.25-3.15,7.65-11.4,30.9-12.3,33.45,6.6-.75,13.2-1.2,19.65-2,3.44-.45,6.74-.9,10.19-1h1.95c.45-.15.9-.9,1.2-.75,1.8.6,1.35,1.95.15,3-2,1.65-5.1,1-7.35,1.65-1.2.3-.59.6-1.95,1.2-1.35.9-3.75,1-5.24,1.35-2.86.3-5.55.9-8.4,1.35-2.1.3-3.15,1.5-5.7,1.8-1.95.3-5.7,0-7.35,1.2-.9.75-1.65,4.8-2.1,6l-1.8,5.55c-2.25,7.35-4.8,14.4-7.35,21.59-1.5,3.91-2.85,7.8-4.2,11.71-.9,2.69-2.25,5.09-2.4,7.79,0,.45.6-2.85,1.05-2.4s-.15,2.25,0,2.85c6.6-1.2,13.5-5.7,19.35-8.85,5.7-3,11.25-6.44,17-9.44,2.7-1.35,4.19-.75,3,2.39-1.05,2.86-3.91,5.7-6.16,7.8-3.29,3-6.44,6-10,8.85-7.2,5.4-17.7,13.35-27.15,9.45-5.85-2.4-12-8-11.4-14.85.3-2.84,1.95-4.8,3.3-7.2.3-.75,1.65-6.74,2.4-6.89,0,0-.45,1.5-.6,1.95l.75-2.25a19.72,19.72,0,0,1,.45-2.7l1.65-4.2c1.05-2.7,2.25-5.25,3.15-7.95,2.1-5.25,3.15-10.65,5.4-15.9-4.05,0-10.5-5.55-5-8.1.15,0,.3,0,.3-.15,1.95-.6,4.5-.45,6.45-.6.9-.15,1.8-.6,2.55-.75.15,0,.3-1.2.6-1.05a7.06,7.06,0,0,1-.45,1.35c.75-.15,1.8-4.2,2.25-5.7a6.08,6.08,0,0,1-.75,1.35c.15,0,12.15-36.3,13.2-39.6-4.8.75-13.8-.15-12.9-7,.15-1.65.9-2.55,2.7-3.15,4-1.5,12.6.6,15-3,1.95-2.7.3-6.3,3.9-7.5,2.55-.9,6,.6,8.1,2.1a26,26,0,0,1,2.84,3,2.54,2.54,0,0,1,.46,1.5l2.84-.45c6.9-.75,13.8-1.2,20.7-2.1,6.45-.75,13.05-1.8,19.65-2a12.12,12.12,0,0,0,2.4-.15c.45,0,1.05-.6,1.2-.6.75,0,1.65,0,1.8,1.2C422.17,38.67,416.17,39.57,414.52,40Zm-63.74,31.5c-1.5,3.9-3.3,7.65-4.5,11.55l-7,19.35c1.95-4.5,4-8.55,6-13.2C347.63,83.67,349,77.07,350.78,71.52Zm3.15,19.8L352,96.12c.45,0,.75-.45.6-1.2Zm10.95-28.65.44-1.05Zm.75-1.5a1.51,1.51,0,0,0,.15-.45C365.78,60.87,365.63,61,365.63,61.17Zm.44-.75c-.14,0-.14.15-.29.3C365.93,60.57,365.93,60.42,366.07,60.42Z"/>
    <path d="M481.72,42.27c1.8,3.3-1.5,7.65-3.3,10.35a83.51,83.51,0,0,1-9.3,11.4c-2.55,2.55-5.25,5.7-8.55,7.65-3,1.8-7.35,1.35-3.75-2.4,1.05-.6,5.25-11.1,7.35-10.95-.3.3-1.5,2.85-2.25,4.2,4.05-5.55,15-21.9,6.45-25.8-3.45-1.5-8.55,0-12,1.2a39,39,0,0,0-10.95,6,37.88,37.88,0,0,1,15.9-6.9c2.55-.45,6-1.05,8.1.75,2.25,2.25.9,4.65.6,6.9,0-3.75,1.2-7.35-4.35-7.8-4.65-.15-9.45,1.5-13.5,3.45a38.35,38.35,0,0,0-17.1,16.35c-7.95,15.75,3.9,32.55,10.05,46.65-3-5.7-6.45-11.25-9.3-16.95,2.1,4.65,2.85,9,5.4,13.5,3.45,5.55,7,10.65,9,16.95,4,13.5-.15,24.45-10.5,33.45l3-2.11c.15,4.5-13.5,10.2-16.65,11.4-9,3.6-20.84,4.35-29.84-.15-12.9-6.6-9.9-23.24-3.6-33.44,1.5-2.4,12.6-17.1,15.9-11.25,1.35,2.4-3.45,8.85-4.35,11.25a37.76,37.76,0,0,0-2.55,7.95c-1.05,4.8-1.95,10.49.15,15.14,2.4,5.7,8.85,5.7,14.09,4.2a32.28,32.28,0,0,0,17.55-13.95,25.48,25.48,0,0,0,3.6-10.94,21.42,21.42,0,0,0-.45-4.35c-.3-.75-1.2-2.1-.9-3.15a9.59,9.59,0,0,0,.9,2.4,19.37,19.37,0,0,1-.75-3.15c0,.15-.6-1.05-.75-1.05a29.18,29.18,0,0,1-1.2-3.3l-2.7-6.75c-3-7.8-6.6-15.45-9.89-23.25a54.24,54.24,0,0,1-4.35-18.15c-.15-1.35-.9-10.5,1.49-10.5a6.78,6.78,0,0,0-.44,2.4,33.61,33.61,0,0,1,3.14-8.4l-1.05,1.5c.75-5.25,7.05-10.8,10.65-14.1a45,45,0,0,1,18.75-10.2c7.2-1.8,13.65-.6,20.4,2.25a25,25,0,0,1,7.35,4C479.77,36.72,480.52,39.42,481.72,42.27Zm-85.49,81.6c-7.05,9.6-10.65,22.49-2.85,32.24C387.53,148.77,390.08,132.72,396.23,123.87Zm35.84-52.95a9.8,9.8,0,0,0,0-2.1Z"/>
    <path d="M530.32,131.37c-8.85,4.5-19.05,4.8-28.35,8.1a79.85,79.85,0,0,0-12.6,5.84c-2.4,1.21-4.35,2.1-6,4.35-.3.45-3.3,3.75-3.15,3.3a27.17,27.17,0,0,1-3.15,2.7c.75-.3,3-1.8,3.15-1.5.3,2-4.35,3.45-5.85,3.75-3.3.45-7.34-.45-8.4-4-1.49-5,2.56-10.5,5.7-13.64a14.63,14.63,0,0,1,5.1-3.45c2.25-1.05,5.1-1.05,6-3.45,0,.15.15-3.45.9-3.9a23.29,23.29,0,0,1-.6,3.15c.45-1.2.6-2.4,1.05-3.75a.28.28,0,0,1-.45,0c-.75-1.95,1.65-7.35,2.1-9.3.75-2.85,1.65-5.55,2.25-8.4A103.37,103.37,0,0,0,490.72,96c.6-5.7,2.25-11.25,3.75-16.65.3-.75,2.85-10.35,3.6-10.35.15,0-.45,2.1-.3,2.25.9-3,1.65-6,2.55-8.85-.15.15-1.2,2.4-1.2,2.1-.3-1.65,1.35-4.35,1.95-6l2.1-6.3a57,57,0,0,1,5.7-12.3c3.3-4.8,8-8.7,14-9a22.12,22.12,0,0,1,12,3.15c6.3,3.45,8.7,8.1,9.15,14.55.45,8-5,19.2-11.25,24-2.4,1.8-5.7,3.3-8.7,3-1.95-.15-4.35-1.2-3.15-3.45a1.12,1.12,0,0,0,.45-.45h-.15c0-.15,5.25-11.1,5.85-11,.15,0-1.8,4.8-1.8,5.1a100.92,100.92,0,0,0,5.7-14.55c.75-2.55,3-8.7,1.2-11.4-2-2.85-6.3.45-8.1,2.1-4.2,4.2-6.75,10.2-9,15.6,2.55-5.85,6.45-15.45,13.05-17.85,6.15-2.25,3.6,6.3,3,8.4.45-1.65,1.65-7.8-.75-8.55-2.85-.75-6.15,3.3-7.5,5.1-6.15,7.95-9.6,18.45-12.75,27.9-6.45,19.5-10.2,39.75-17.7,58.8,9.9-3,20.25-5.55,30.6-6.15a78.77,78.77,0,0,1,10.35.3C538.57,126.12,532.57,130.32,530.32,131.37Zm-53.25,24.29a.15.15,0,0,0-.15.15ZM497,75.87c1.2-3.9,2.55-7.5,4.05-11.1,4.65-10.2,8.85-26.7,20.85-29.7-4.8,1-8.4,3.75-11.55,8.1a61.35,61.35,0,0,0-8.7,17.1C500,65.52,498.37,70.62,497,75.87Zm12.6-4.05c-1.2,3.6-2.4,7.05-3.45,10.65l3.45-10.35Z"/>
    
    <path class="cls-1" d="M73.88,69.27s42.44-33.41,7.25-37.07S30.44,67.65,42.83,86.67s41.48,59.83-14.07,69.44c-36.42,6.3-3.88-42.26-3.88-42.26"/>
    <path class="cls-2" d="M126.51,38.86c-3.94,6.21-45.61,107.74-40.94,114.7"/>
    <path class="cls-3" d="M167.28,42.27c-6.69,15.7-51.16,116.65-46.85,120.14"/>
    <path class="cls-3" d="M85.57,105.11c.4,4.09,63.31-21.37,70.27-13.29"/>
    <path class="cls-4" d="M230.16,44.87s1.78-6.52-8-9.29c-12.16-3.45-23.48,11.33-34,24.87C175.46,76.9,150.29,158.2,178,138.63c23.18-16.38,60.82-84,54.06-73-21.5,35.12-28.63,108-10.13,91,14.65-13.47-4.32-26.21-4.32-26.21"/>
    <path class="cls-3" d="M284.11,37.27s-28.7,56.89-33.49,79.55-13.34,56.74-2.36,16.57,73.95-122.25,76-90.91-23.79,57.15-37,63.84a130,130,0,0,1-22.81,9.22S292.58,176,306.09,172.3s9.72-3,9.72-3"/>
    <path class="cls-2" d="M343,48.63S418.78,43,420.5,36.42"/>
    <path class="cls-3" d="M333.22,101.13s43.52-3,47.94-5.91,12.55-78.52,0-86.63c-6.34-4.11-52.67,140.25-55.29,144.59-4.08,6.76,12.66,20.36,43.79-13.19"/>
    <path class="cls-5" d="M459.54,68.82s34.75-31.35,6.11-35.25S426.12,50.7,424.91,67.68c-1,13.34,8.81,26.81,20,58,3.58,9.92-10.08,27.1-27.65,33.53-12.77,4.68-38.36-5.46-11.83-42.39"/>
    <path class="cls-5" d="M526,71.82S544.3,34.5,531.06,35.5s-24.78,16.68-30.41,42.31-21.64,71.3-28.16,73.68,34.35-27.59,56.32-24"/>
  </g>
</g>
</svg>

マスク用SVG

わかりやすくコメントをつけましたが、マスク用パスと書いてある部分を抜き出して別のSVGファイルとして保存します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 545.87 180.96">
  <path d="M98.78,42.27c1.8,3.3-1.5,7.65-3.3,10.35A83.51,83.51,0,0,1,86.18,64c-2.55,2.55-5.25,5.7-8.55,7.65-3,1.8-7.35,1.35-3.75-2.4,1.05-.6,5.25-11.1,7.35-10.95-.3.3-1.5,2.85-2.25,4.2,4-5.55,15-21.9,6.45-25.8-3.45-1.5-8.55,0-12,1.2a39,39,0,0,0-11,6A37.88,37.88,0,0,1,78.38,37c2.55-.45,6-1.05,8.1.75,2.25,2.25.9,4.65.6,6.9,0-3.75,1.2-7.35-4.35-7.8-4.65-.15-9.45,1.5-13.5,3.45a38.35,38.35,0,0,0-17.1,16.35c-8,15.75,3.9,32.55,10,46.65-3-5.7-6.45-11.25-9.3-16.95,2.1,4.65,2.85,9,5.4,13.5,3.45,5.55,7,10.65,9,16.95,4,13.5-.15,24.45-10.5,33.45l3-2.11c.15,4.5-13.5,10.2-16.65,11.4-9,3.6-20.85,4.35-29.85-.15-12.9-6.6-9.9-23.24-3.6-33.44,1.5-2.4,12.6-17.1,15.9-11.25,1.35,2.4-3.45,8.85-4.35,11.25a37.76,37.76,0,0,0-2.55,7.95c-1.05,4.8-1.95,10.49.15,15.14,2.4,5.7,8.85,5.7,14.1,4.2a32.28,32.28,0,0,0,17.55-13.95,25.48,25.48,0,0,0,3.6-10.94,21.42,21.42,0,0,0-.45-4.35c-.3-.75-1.2-2.1-.9-3.15a9.59,9.59,0,0,0,.9,2.4,19.37,19.37,0,0,1-.75-3.15c0,.15-.6-1.05-.75-1.05a29.18,29.18,0,0,1-1.2-3.3L48.23,109c-3-7.8-6.6-15.45-9.9-23.25A54.48,54.48,0,0,1,34,67.62c-.15-1.35-.9-10.5,1.5-10.5a6.79,6.79,0,0,0-.45,2.4,34.06,34.06,0,0,1,3.15-8.4l-1,1.5c.75-5.25,7-10.8,10.65-14.1a45,45,0,0,1,18.75-10.2c7.2-1.8,13.65-.6,20.4,2.25a25,25,0,0,1,7.35,4C96.83,36.72,97.58,39.42,98.78,42.27Zm-85.5,81.6c-7,9.6-10.65,22.49-2.85,32.24C4.58,148.77,7.13,132.72,13.28,123.87ZM49.13,70.92a9.8,9.8,0,0,0,0-2.1Z"/>
  <path d="M171.23,52.47c-.6,1.65-.75,3.45-1.65,5.4l-3.6,6.9L158.78,79c-2.1,4.2-4.5,8.1-5.55,12.45,3,0,6.6.6,9.6.3.6-.15,1.2.15,1.8,0,0,0,.3-.9.75-.75.9.3,1.8.45,1.5,1.8-.45,1.5-3.3,2-4.2,2.1-2.4.6-5,.3-7.2.9a19.36,19.36,0,0,0-3.75,1.35c-2.55,1.35-4.35,6.6-5.55,9.3l-5,12c-2.1,4.5-3,8.7-4.65,13.35-3.6,9.45-7.5,18.89-10.8,28.49-1.8,5.1-3.6,11.1-10.2,7.05a7.34,7.34,0,0,1-3.6-7.8c1-5.25,3.15-10.65,4.8-15.75,2.1-6.29,4.5-12.29,7-18.29,3.6-8.4,6.15-17.4,9.9-25.8-2.7.45-4.95,1.65-7.95,1.8-3.15.3-6.3.75-9.45,1.2-3,.3-8.7.75-10.5,2.85-1.35,1.65-2.1,5.4-2.85,7.5l-1,4.2c-.9,4.65-2.85,9.15-4.2,13.65-1.65,5.1-3.3,10.19-4.65,15.3-.9,3-1,9.89-4.65,10.64-3.75.75-8.7-4.65-9.15-8-.6-3.14.9-6.6,1.65-9.44,3.15-11.55,7.35-22.65,10.8-34-2.1-.6-6.6-2.7-5.25-5.7.6-1.35,3-1.8,4.2-2.1,2.7-.75,3.6,0,4.8-2.4.9-1.8,1.65-3.75,2.4-5.55,1.5-4,3.15-8,4.65-11.85,5.25-12.9,10.2-25.8,16.65-38.1a19.22,19.22,0,0,0,1.65-3c0,.3.6-1.8.3-1.65,1.5-2.1,4.5-1.65,6.75-.75,3,1,6.45,3.6,5.25,7-.75,1.8-2.55,3.45-3.6,5.25-.9,2-1.2,4.65-2.4,7.05-1.35,3-2.7,6.15-4.2,9.15-2.7,5.1-4.65,10.5-7.05,15.75-1.5,3.15-1.5,6.15-2.85,9.3a58.51,58.51,0,0,1-3,7c4,0,7.65-1.35,11.7-1.8l6.9-.45c2.1-.15,5.55.3,7.5-.45,2.7-1.2,5.1-10,6.45-13.2l6.15-14.4,11-24.6c1-2.4.6-4.35,4.35-3.75,3.75.45,7.5,3.75,9.15,7.2C175.13,47.67,172.58,49.47,171.23,52.47ZM118.13,67c-3,6.45-7.2,12.6-9.75,19.35s-4.65,13.2-6.9,19.95q2.92-7.87,6.3-15.75Zm.3-.6.3-.75C118.58,66,118.43,66.12,118.43,66.42Zm9.9,77.24c-.9,1.65-2.55,3.15-3,5a28.81,28.81,0,0,0-.9,4.95,18.83,18.83,0,0,1,1.2-2.54A33.43,33.43,0,0,0,128.33,143.66Z"/>
  <path d="M240.23,67.32a.78.78,0,0,1,.6-.3c.3.15-3,5.4-3.6,5.1-.15,0,.3-.6.6-1.2a93.27,93.27,0,0,0-10.35,21.3c1.8-4.8,5.4-13.5,6.6-14.25-1.05,1.2-6.6,15.75-7.05,17.25a99.25,99.25,0,0,0-4.65,18.3c-1,6.3-1.65,12.6-2.4,18.75-.6,4.95-1.8,10.65-1.35,15.14a3.83,3.83,0,0,1,.3-1.8c.15,0,1.2,6.6,2.1,7.2.45.3.9-.15,1.35-.15,2.7-.45,5.7-4.64,7.2-6.44,1-1.2,2.85-4.8,4.35-5.41,5.4-2.39-1.05,14.1-2.55,15.9-2.4,3.15-4.65,5.7-9,5.7a15.32,15.32,0,0,1-9.75-3.6c-4.8-4.35-6.9-11.1-7.2-17.25a41.12,41.12,0,0,1,.9-7.5c0-.59-.3-5.09.15-5.24,0,.15.15.3.15.45,0-.3-.15-.6,0-.75-.3,0-.45-2.7-.45-2.85.15-2,.6-3.75.9-5.7a80.87,80.87,0,0,0,1.2-8.4c0-1,2.7-13.8,4.2-13.65.3,0-.15,1,0,1.2l1.2-4.2c-8,12.9-16.2,26.1-25.05,38.55-2.85,3.75-7.95,12-13.35,12.3-4.95.29-9.45-5-11.85-8.71,0,0-1.8-1.79-2-2.54a10.27,10.27,0,0,0,1.5,1.79l-1.8-3.14c.45,1.5-.75-1-.9-1a9.39,9.39,0,0,1-1.05-3.3,27.72,27.72,0,0,1-.9-7.8c.15-5.4,1.65-10.5,2.7-15.75a68.43,68.43,0,0,1,4.8-15.45c.45-.9,4.5-11.1,5.55-10.95a8.6,8.6,0,0,0-.6,2.1,76.71,76.71,0,0,1,3.3-7.2c-.45.6-1.05,1.35-1.05,1.35.15-2.4,2.85-5.55,3.9-7.65l4.5-8.85a133.17,133.17,0,0,1,12-16.95c3.75-4.65,8.4-9.6,14.25-11.7,3-1,6.3-.45,9.3.15,5.55,1.2,11.25,5.1,15.45,8.7,1.65,1.5,4.95,3.9,4.8,6.45,0,2.1-2.55,4.2-4.2,5.25-3.75,2.4-4.95,1-5.85-2.4,0,.15.45,1.65.15,1.8s-1.65-4.65-1.8-5.25a21.87,21.87,0,0,0-1.05-2.85,7.31,7.31,0,0,0,1.2,1.5,6.85,6.85,0,0,0-2.4-3.6c-1.5-.6-3.3-.3-5.7.6a26.37,26.37,0,0,0-8.85,5.7c-7.2,6.45-12.6,15-17.1,23.55a122.22,122.22,0,0,1,9.75-15,50.86,50.86,0,0,1,6-6.75c1.05-1,3.45-2.4,4.65-3.6-1.65,2-4.5,3.75-6.15,5.4a72.3,72.3,0,0,0-5.25,6.6,128,128,0,0,0-9.6,15.6,164.18,164.18,0,0,0-13.95,36,137.74,137.74,0,0,0-3.6,17.4c-.15,1.35-1.2,6.45.3,7.35,2.25,1.35,8.7-6.3,9.75-7.5,3.45-3.6,6.9-7.2,9.9-10.8-.6.6-1.2,1.35-1.5,1.2-.15,0,5.7-8.55,6.3-9.3l7.2-10.2c5.1-7.35,10-15,15-22.35,1.2-1.8,2.1-3.75,3.15-5.7a14.38,14.38,0,0,1,2.85-3.6c1-1,1.2-3,2.25-4.2,3.75-4.65,9.9-1.5,12.6,2.55C242.78,65.07,241.28,66,240.23,67.32Zm-67.65,59.55v.6l.3-2.7a85.48,85.48,0,0,1,2.55-14.85,253,253,0,0,1,9-29.25,159.65,159.65,0,0,1,12.3-25.5,47,47,0,0,1,9.75-12.3c-4.65,3.75-8.25,9.15-10.8,13.65A209,209,0,0,0,183.08,81,124.53,124.53,0,0,0,174.23,112C173.63,116.82,172.88,121.92,172.58,126.87ZM185.48,82l-.3.75.3-.45Zm21.75-39.75,1.8-1.35A14.07,14.07,0,0,0,207.23,42.27Zm.9,101.39a27.21,27.21,0,0,1,.15-4.94c.3-2.85.9-5.55,1.2-8.4.15-2.4,0-4.95.3-7.2-.45,1-.75,2.1-1.05,3a34.79,34.79,0,0,0-.9,8.85A55.48,55.48,0,0,0,208.13,143.66ZM224,41.22l-.6-1.2A3,3,0,0,0,224,41.22Zm0,0,.45.45A1.12,1.12,0,0,1,224,41.22Zm3.45,51-.45,1.2Z"/>
  <path d="M331.57,45.72c-.14-.3,0,.75,0,.75,0,.75.16,2.7-.14,2.85.14-.15-.15-1-.3-1.65a32.29,32.29,0,0,1-.6,7.65c.29-.75.75-1.8.75-1.8.6,3-2.55,9.6-3.46,11.85a64.48,64.48,0,0,1-8.69,16.2,97.92,97.92,0,0,1-10.2,12c-3.3,3.45-8.1,9-12.9,10.2,14.55-12.6,26.25-27.9,29.7-47.4-2.55,14.1-11.55,26.4-21.15,36.45-4.8,5.25-9,11.25-14.55,15-6.15,3.9-15.15,9.75-22.65,9.3,2.4,4.5,4.8,8.85,7.5,13l-4.8-8.55c4.2,6.9,13.8,20.55,15.15,22l10.35,11.85c2.4,2.7,5.1,6.45,7.65,8.55a3.76,3.76,0,0,1-.6-1.05c0-.15,5.25,3,5.85,3.3a9.87,9.87,0,0,0,4.5,1.05c3.9,0,8.7-3,11.25-5.7,1.35-1.5,2.85-3.45,3.15.6.15,1.65-.45,2.85-1.65,4.35-4.8,6.15-11.4,13.5-20,14.25a14.39,14.39,0,0,1-8.85-2.4c-.6-.45-7.8-7.2-7.65-7.65a.52.52,0,0,1,.3.15c-.15-.3-.45-.45-.6-.6.3.6-1.5-.75-1.65-.9a19.85,19.85,0,0,1-2.7-3.3c-1.35-1.95-2.85-3.75-4.5-5.7-.75-.6-7.05-9.44-5.85-10.35.3-.15.6.6.75.6a28.7,28.7,0,0,1-1.65-3c0,.15.15.45,0,.75-.3.15-7.05-13-7.65-14.24-1.35-2.7-3.3-5.25-4.05-8.25-.6-2-.15-2.7-1.05-4.35-4.5,10.5-8.85,21.9-10.35,33.14a.78.78,0,0,1-.3-.6c-3.3,3.45-10.5,3.75-12.6-.9-2.25-4.95,1.05-12.9,2.1-17.84,1.5-6.6,2.55-13,4.8-19.35.9-2.4,2.1-4.65,3.15-6.9.3-.6,1.2-5.1,1.5-5.25a.9.9,0,0,1,.15.6,3.53,3.53,0,0,0,.3-1.2c-.6,1.35.15-2.4.15-2.55.6-1.8,1.35-3.6,2.1-5.4a43.46,43.46,0,0,0,2.55-8.25c.3-1.2,4.8-13.65,6.15-13.35.3,0-.3,1-.15,1.2.6-1.35,1.2-2.7,1.65-4a1.5,1.5,0,0,1-.6.75c-.3-.15,7.95-18,8.7-19.8a59.59,59.59,0,0,1,4.65-9.9c.9-1.2,1.95-1.65,2.55-2.55.45-.6.6-1.8,1.05-2.55.75-1.5,2.4-5.1,4.35-5.85,3.15-1.35,5.4,2.85,6.3,5.25s.45,3.3-.45,4.95l.45-.3c.45.15-2.55,6-3.15,5.85-.15,0,.3-1.2.75-2.1a264.58,264.58,0,0,0-27.6,63.15A155,155,0,0,1,271,79.17l-1.5,3.45,3.6-7.65a186.75,186.75,0,0,0-6.9,20.1,175.36,175.36,0,0,1,11.4-19.95c3.9-5.7,8.55-10.65,12.75-16.05,0,0,1.2-2.7,1.95-3a22,22,0,0,0-1.35,2.25l2.1-2.7c-.15,0-.15,0-.3-.15.3-2.1,3.75-5.1,5.1-6.6a81.59,81.59,0,0,1,6.15-6.3c3.3-3.3,7.95-9,12.6-10.35C324.38,30,331,38.52,331.57,45.72Zm-15.14,4.65c.75-14.4-14.1,5-16.65,8-8.1,9.75-16.8,20.4-23.4,31.05a.77.77,0,0,1,.75-.6s-4.8,9.15-5.4,10c-2.1,3.9-4.05,7.8-6,11.7.6-.3,6.6-3,6.9-2.7,0,.15-3,1.65-4.2,2.4,15.15-6.3,27.75-18.15,36.9-31.8a112.37,112.37,0,0,1-10.05,12.3c-2.25,2.25-4.65,4.65-7,6.75-1.2.9-3.9,2.4-5.1,3.6,1.35-1.65,4.2-3.15,5.55-4.5,1.8-1.5,3.6-3.15,5.25-4.8A112.37,112.37,0,0,0,304,79.47c5.85-8.25,11.7-18.45,12.45-28.8-.15.3-.15.45,0-.15Zm-46.35,71.25c-1.2-2.1-2.1-3.6-1.8-3.75A27.06,27.06,0,0,0,270.08,121.62Zm5.1-30.45c0,.15-.15.15-.15.3A.52.52,0,0,0,275.18,91.17Zm3.45-29.55,3.9-8.55a34.94,34.94,0,0,1-1.35,3.45A53.89,53.89,0,0,1,278.63,61.62Zm0,74.25c.15.15.15.3.3.3C278.78,136.17,278.78,136,278.63,135.87Zm.45.6v-.16c-.15-.29-.15-.14-.15-.14Z"/>
  <path d="M414.52,40c-1.35.3-2.7.15-3.9.6a1.36,1.36,0,0,0-1.5,0,.66.66,0,0,1-.15.75,31.81,31.81,0,0,1-8.4,2.4c-3,.6-6,1.5-9,1.95a16.28,16.28,0,0,0-3.75.6c-1.5.45-1.2.75-2.25,1-2.7,1.05-5.54,1.05-8.25,1.35-1.5.3-3.15.75-4.65,1.2l-2.69.45a1.82,1.82,0,0,1-.61,1.2,1.76,1.76,0,0,1,.31-1.2c-.9.15-2.55,6.15-2.86,7.05l-3.14,8c-1.5,3.9-3,7.65-4.35,11.55,1.8-5,4.2-11.1,5.55-14.25-3.15,7.65-11.4,30.9-12.3,33.45,6.6-.75,13.2-1.2,19.65-2,3.44-.45,6.74-.9,10.19-1h1.95c.45-.15.9-.9,1.2-.75,1.8.6,1.35,1.95.15,3-2,1.65-5.1,1-7.35,1.65-1.2.3-.59.6-1.95,1.2-1.35.9-3.75,1-5.24,1.35-2.86.3-5.55.9-8.4,1.35-2.1.3-3.15,1.5-5.7,1.8-1.95.3-5.7,0-7.35,1.2-.9.75-1.65,4.8-2.1,6l-1.8,5.55c-2.25,7.35-4.8,14.4-7.35,21.59-1.5,3.91-2.85,7.8-4.2,11.71-.9,2.69-2.25,5.09-2.4,7.79,0,.45.6-2.85,1.05-2.4s-.15,2.25,0,2.85c6.6-1.2,13.5-5.7,19.35-8.85,5.7-3,11.25-6.44,17-9.44,2.7-1.35,4.19-.75,3,2.39-1.05,2.86-3.91,5.7-6.16,7.8-3.29,3-6.44,6-10,8.85-7.2,5.4-17.7,13.35-27.15,9.45-5.85-2.4-12-8-11.4-14.85.3-2.84,1.95-4.8,3.3-7.2.3-.75,1.65-6.74,2.4-6.89,0,0-.45,1.5-.6,1.95l.75-2.25a19.72,19.72,0,0,1,.45-2.7l1.65-4.2c1.05-2.7,2.25-5.25,3.15-7.95,2.1-5.25,3.15-10.65,5.4-15.9-4.05,0-10.5-5.55-5-8.1.15,0,.3,0,.3-.15,1.95-.6,4.5-.45,6.45-.6.9-.15,1.8-.6,2.55-.75.15,0,.3-1.2.6-1.05a7.06,7.06,0,0,1-.45,1.35c.75-.15,1.8-4.2,2.25-5.7a6.08,6.08,0,0,1-.75,1.35c.15,0,12.15-36.3,13.2-39.6-4.8.75-13.8-.15-12.9-7,.15-1.65.9-2.55,2.7-3.15,4-1.5,12.6.6,15-3,1.95-2.7.3-6.3,3.9-7.5,2.55-.9,6,.6,8.1,2.1a26,26,0,0,1,2.84,3,2.54,2.54,0,0,1,.46,1.5l2.84-.45c6.9-.75,13.8-1.2,20.7-2.1,6.45-.75,13.05-1.8,19.65-2a12.12,12.12,0,0,0,2.4-.15c.45,0,1.05-.6,1.2-.6.75,0,1.65,0,1.8,1.2C422.17,38.67,416.17,39.57,414.52,40Zm-63.74,31.5c-1.5,3.9-3.3,7.65-4.5,11.55l-7,19.35c1.95-4.5,4-8.55,6-13.2C347.63,83.67,349,77.07,350.78,71.52Zm3.15,19.8L352,96.12c.45,0,.75-.45.6-1.2Zm10.95-28.65.44-1.05Zm.75-1.5a1.51,1.51,0,0,0,.15-.45C365.78,60.87,365.63,61,365.63,61.17Zm.44-.75c-.14,0-.14.15-.29.3C365.93,60.57,365.93,60.42,366.07,60.42Z"/>
  <path d="M481.72,42.27c1.8,3.3-1.5,7.65-3.3,10.35a83.51,83.51,0,0,1-9.3,11.4c-2.55,2.55-5.25,5.7-8.55,7.65-3,1.8-7.35,1.35-3.75-2.4,1.05-.6,5.25-11.1,7.35-10.95-.3.3-1.5,2.85-2.25,4.2,4.05-5.55,15-21.9,6.45-25.8-3.45-1.5-8.55,0-12,1.2a39,39,0,0,0-10.95,6,37.88,37.88,0,0,1,15.9-6.9c2.55-.45,6-1.05,8.1.75,2.25,2.25.9,4.65.6,6.9,0-3.75,1.2-7.35-4.35-7.8-4.65-.15-9.45,1.5-13.5,3.45a38.35,38.35,0,0,0-17.1,16.35c-7.95,15.75,3.9,32.55,10.05,46.65-3-5.7-6.45-11.25-9.3-16.95,2.1,4.65,2.85,9,5.4,13.5,3.45,5.55,7,10.65,9,16.95,4,13.5-.15,24.45-10.5,33.45l3-2.11c.15,4.5-13.5,10.2-16.65,11.4-9,3.6-20.84,4.35-29.84-.15-12.9-6.6-9.9-23.24-3.6-33.44,1.5-2.4,12.6-17.1,15.9-11.25,1.35,2.4-3.45,8.85-4.35,11.25a37.76,37.76,0,0,0-2.55,7.95c-1.05,4.8-1.95,10.49.15,15.14,2.4,5.7,8.85,5.7,14.09,4.2a32.28,32.28,0,0,0,17.55-13.95,25.48,25.48,0,0,0,3.6-10.94,21.42,21.42,0,0,0-.45-4.35c-.3-.75-1.2-2.1-.9-3.15a9.59,9.59,0,0,0,.9,2.4,19.37,19.37,0,0,1-.75-3.15c0,.15-.6-1.05-.75-1.05a29.18,29.18,0,0,1-1.2-3.3l-2.7-6.75c-3-7.8-6.6-15.45-9.89-23.25a54.24,54.24,0,0,1-4.35-18.15c-.15-1.35-.9-10.5,1.49-10.5a6.78,6.78,0,0,0-.44,2.4,33.61,33.61,0,0,1,3.14-8.4l-1.05,1.5c.75-5.25,7.05-10.8,10.65-14.1a45,45,0,0,1,18.75-10.2c7.2-1.8,13.65-.6,20.4,2.25a25,25,0,0,1,7.35,4C479.77,36.72,480.52,39.42,481.72,42.27Zm-85.49,81.6c-7.05,9.6-10.65,22.49-2.85,32.24C387.53,148.77,390.08,132.72,396.23,123.87Zm35.84-52.95a9.8,9.8,0,0,0,0-2.1Z"/>
  <path d="M530.32,131.37c-8.85,4.5-19.05,4.8-28.35,8.1a79.85,79.85,0,0,0-12.6,5.84c-2.4,1.21-4.35,2.1-6,4.35-.3.45-3.3,3.75-3.15,3.3a27.17,27.17,0,0,1-3.15,2.7c.75-.3,3-1.8,3.15-1.5.3,2-4.35,3.45-5.85,3.75-3.3.45-7.34-.45-8.4-4-1.49-5,2.56-10.5,5.7-13.64a14.63,14.63,0,0,1,5.1-3.45c2.25-1.05,5.1-1.05,6-3.45,0,.15.15-3.45.9-3.9a23.29,23.29,0,0,1-.6,3.15c.45-1.2.6-2.4,1.05-3.75a.28.28,0,0,1-.45,0c-.75-1.95,1.65-7.35,2.1-9.3.75-2.85,1.65-5.55,2.25-8.4A103.37,103.37,0,0,0,490.72,96c.6-5.7,2.25-11.25,3.75-16.65.3-.75,2.85-10.35,3.6-10.35.15,0-.45,2.1-.3,2.25.9-3,1.65-6,2.55-8.85-.15.15-1.2,2.4-1.2,2.1-.3-1.65,1.35-4.35,1.95-6l2.1-6.3a57,57,0,0,1,5.7-12.3c3.3-4.8,8-8.7,14-9a22.12,22.12,0,0,1,12,3.15c6.3,3.45,8.7,8.1,9.15,14.55.45,8-5,19.2-11.25,24-2.4,1.8-5.7,3.3-8.7,3-1.95-.15-4.35-1.2-3.15-3.45a1.12,1.12,0,0,0,.45-.45h-.15c0-.15,5.25-11.1,5.85-11,.15,0-1.8,4.8-1.8,5.1a100.92,100.92,0,0,0,5.7-14.55c.75-2.55,3-8.7,1.2-11.4-2-2.85-6.3.45-8.1,2.1-4.2,4.2-6.75,10.2-9,15.6,2.55-5.85,6.45-15.45,13.05-17.85,6.15-2.25,3.6,6.3,3,8.4.45-1.65,1.65-7.8-.75-8.55-2.85-.75-6.15,3.3-7.5,5.1-6.15,7.95-9.6,18.45-12.75,27.9-6.45,19.5-10.2,39.75-17.7,58.8,9.9-3,20.25-5.55,30.6-6.15a78.77,78.77,0,0,1,10.35.3C538.57,126.12,532.57,130.32,530.32,131.37Zm-53.25,24.29a.15.15,0,0,0-.15.15ZM497,75.87c1.2-3.9,2.55-7.5,4.05-11.1,4.65-10.2,8.85-26.7,20.85-29.7-4.8,1-8.4,3.75-11.55,8.1a61.35,61.35,0,0,0-8.7,17.1C500,65.52,498.37,70.62,497,75.87Zm12.6-4.05c-1.2,3.6-2.4,7.05-3.45,10.65l3.45-10.35Z"/>
</svg>

こんな感じですね。viewBox属性・xmls属性は同じにしておきます。

アニメーション用SVG

次にアニメーション用。マスク用のパスを除いた残りのソースを少し変更します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 545.87 180.96">
  <defs>
    <style>
      .cls-1,
      .cls-2,
      .cls-3,
      .cls-4,
      .cls-5{
        fill:none;
        stroke:#fff;
        stroke-linecap:round;
        /* stroke-miterlimit:10; */
      }
      .cls-1{
        stroke-width:23px;
      }
      .cls-2{
        stroke-width:14px;
      }
      .cls-3{
        stroke-width:17px;
      }
      .cls-4{
        stroke-width:18px;
      }
      .cls-5{
        stroke-width:20px;
      }
    </style>
    <mask id="clipMask">
      <path class="cls-1" d="M73.88,69.27s42.44-33.41,7.25-37.07S30.44,67.65,42.83,86.67s41.48,59.83-14.07,69.44c-36.42,6.3-3.88-42.26-3.88-42.26"/>
      <path class="path-h cls-2" d="M126.51,38.86c-3.94,6.21-45.61,107.74-40.94,114.7"/>
      <path class="path-h cls-3" d="M167.28,42.27c-6.69,15.7-51.16,116.65-46.85,120.14"/>
      <path class="path-h cls-3" d="M85.57,105.11c.4,4.09,63.31-21.37,70.27-13.29"/>
      <path class="cls-4" d="M230.16,44.87s1.78-6.52-8-9.29c-12.16-3.45-23.48,11.33-34,24.87C175.46,76.9,150.29,158.2,178,138.63c23.18-16.38,60.82-84,54.06-73-21.5,35.12-28.63,108-10.13,91,14.65-13.47-4.32-26.21-4.32-26.21"/>
      <path class="cls-3" d="M284.11,37.27s-28.7,56.89-33.49,79.55-13.34,56.74-2.36,16.57,73.95-122.25,76-90.91-23.79,57.15-37,63.84a130,130,0,0,1-22.81,9.22S292.58,176,306.09,172.3s9.72-3,9.72-3"/>
      <path class="path-e cls-2" d="M343,48.63S418.78,43,420.5,36.42"/>
      <path class="path-e cls-3" d="M333.22,101.13s43.52-3,47.94-5.91,12.55-78.52,0-86.63c-6.34-4.11-52.67,140.25-55.29,144.59-4.08,6.76,12.66,20.36,43.79-13.19"/>
      <path class="cls-5" d="M459.54,68.82s34.75-31.35,6.11-35.25S426.12,50.7,424.91,67.68c-1,13.34,8.81,26.81,20,58,3.58,9.92-10.08,27.1-27.65,33.53-12.77,4.68-38.36-5.46-11.83-42.39"/>
      <path class="cls-5" d="M526,71.82S544.3,34.5,531.06,35.5s-24.78,16.68-30.41,42.31-21.64,71.3-28.16,73.68,34.35-27.59,56.32-24"/>
    </mask>
  </defs>
  <image xlink:href="マスク用SVGへのパス" width="100%" height="100%" mask="url(#clipMask)"></image>
</svg>

まず<mask>要素を<defs>の中に作り、その中にアニメーション用のパスを全て入れます。mask要素にはclipMaskというidを付けておきます。

<defs>
  <style>
   <!-- CSS -->
  </style>
  <mask id="clipMask">
    <!-- アニメーション用パスをここに入れる -->
  </mask>
</defs>

そして<defs>の外側に<image>要素を作成し、xlink:href属性に先ほど作ったマスク用SVGへのパスを設定（環境差があるので適宜調整してください）し、mask属性にurl(#clipMask)とします。

<defs>
  <style>
   <!-- CSS -->
  </style>
  <mask id="clipMask">
    <!-- アニメーション用パスをここに入れる -->
  </mask>
</defs>
<image xlink:href="マスク用SVGへのパス" width="100%" height="100%" mask="url(#clipMask)"></image>

CSSも調整しておきます。strokeは#fff（白）にしておきます。イラレでパスを描く際に線端を角丸にした場合はstroke-miterlimitが設定されている場合がありますが、Firefoxではこのプロパティがあるとmaskの表示に不具合が出るのでコメントアウトするか削除します。

<style>
   .cls-1,
   .cls-2,
   .cls-3,
   .cls-4,
   .cls-5{
     fill:none;
     stroke:#fff;
     stroke-linecap:round;
     /* stroke-miterlimit:10; */
   }
   /* CSS以下省略 */
</style>

またこのあとのアニメーション調整のため、「H」と「E」の文字のパーツとなるpath要素にそれぞれpath-h、path-eとclassを振っておきます。

<mask id="clipMask">
  ...
  <path class="path-h cls-2" d="..."/>
  <path class="path-h cls-3" d="..."/>
  <path class="path-h cls-3" d=""/>
  ...
  <path class="path-e cls-2" d="..."/>
  <path class="path-e cls-3" d="..."/>
  ...
</mask>

ここまでできたらアニメーション用のSVGをhtmlファイルに直接書いて表示すると下の画面のように文字がすべて表示される状態になります。

最後にこれをアニメーションさせます。

SVGを動かす

いろんな方法がありますが、今回は簡単に使えるanime.jsを使って動かしてみたいと思います。

最終はこんな感じ。

ではまず完成したコードを見てみます

<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
<script>
  const animation = anime.timeline()
  .add({
    easing            : 'easeOutSine',
    targets           : document.querySelectorAll('path'),
    duration          : (el,i) => {
      if(el.classList.contains('path-h')){
        return 100;
      }
      if(el.classList.contains('path-e')){
        return 150;
      }
      return 300;
    },
    strokeDashoffset  : [anime.setDashoffset, 0],
    delay             : (el, i) => {
      if(i >= 7){
        return (i * 300) - 600;
      }
      if(i >= 3){
        return (i * 300) - 400;
      }
      if(i >= 2){
        return (i * 300) - 200;
      }
      return i * 300;
    }
  });
</script>

anime.jsの基本的なラインドローイングアニメーションを利用したものです。

anime.js

https://animejs.com/documentation/#lineDrawing

ポイントはdurationとdelayの部分です。
何も考えずにノーマルの設定を書いてみます。

const animation = anime.timeline()
.add({
  easing            : 'easeOutSine',
  targets           : document.querySelectorAll('path'),
  duration          : 300,
  strokeDashoffset  : [anime.setDashoffset, 0],
  delay             : (el, i) => {
    return i * 300;
  }
});

文字自体のアニメーションはできていますが、「H」と「E」の部分がなんか遅いというか違和感のある動きになってしまいました。

これを調整していきます。

duration

duration          : (el,i) => {
  if(el.classList.contains('path-h')){
    return 100;
  }
  if(el.classList.contains('path-e')){
    return 150;
  }
  return 300;
},

「H」はパスが3つに分かれているので、１つのパスを100msに調整して1文字で300msになるように調整します。
「E」も同じくパスが2つなので150msとします。

delay

delay             : (el, i) => {
  //E以降を調整
  if(i >= 7){
    return (i * 300) - 550;
  }
  // H以降を調整
  if(i >= 3){
    return (i * 300) - 400;
  }
  if(i >= 2){
    return (i * 300) - 200;
  }
  return i * 300;
}

ここで引数のiに入っているのはインデックス（要素の順番）になるので、delayをパスごとに少しずらします。
「H」の2番目のパスと3番目のパス、「E」の2番目のパスをdurationから計算してずらします。（数学苦手なので割と力技）
今回違う文字で作成した場合はここが違ってきます。

うまく調整できました。
これで完成です！

手書き風アニメーションのDEMO

シュバババっといい感じになりました！

おわりに

今回は参考サイトをもとに自分がやってみた方法の１つをメモしました。他にもいろいろとやり方があるので時間がある時にチャレンジしてみたいと思います。

最初はAirbnbが出してる「lottie」でやってみようとしたのですが、AfterEffectsに慣れていないこともありうまく動かせず…。もうちょっとAEを触って使えるようになったら「lottie」のアニメーションもメモしていきたいと思います！

記事一覧

RELATED

inoue
TIPS

【CSS + JS】テキストの無限ループアニメーション

  • JS
  • CSS
inoue
TIPS

【Shopify】カートへの遷移を飛ばしてチェックアウトに進むボタンを設置する

  • Shopify
inoue
TIPS

【JS】PhotoSwipe v5を使って画像をポップアップ表示する

  • PhotoSwipe
  • JS
inoue
TIPS

gulpでjpg・pngからAVIF画像を生成する

  • AVIF
  • WebP
  • gulp
  • WordPress
inoue
TIPS

【JS】MutationObserverでDOMを監視[PhotoSwipe（v5）+Swiper（v8）連携]

  • MutationObserver
  • PhotoSwipe
  • Swiper
  • JS
inoue
TIPS

【Google Sheets API】 スプレッドシートのデータをJSONで取得する

  • GoogleSpreadSheet
  • API

NEW POSTS

inoue
TRY

【WordPress】GA4連携の人気記事ランキング機能を自作プラグイン化してみた

  • GA4
  • Simple GA Ranking
  • php
  • WordPress
inoue
TRY

【netlify】ビルドイメージを更新 [ Ubuntu Xenial 16.04 → Ubuntu Focal 20.04 ]

  • Netlify
  • Nuxt.js
inoue
TIPS

【PHP】Google Business Profile APIを使ってクチコミを取得する

  • API
  • Google Business Profile
  • php
inoue
TRY

スクリーンショットのAPI「screendot」を使ってみた

  • API
  • php
  • WordPress
inoue
TIPS

【window.matchMedia】メディアクエリでhoverが使えるデバイスを判定

  • JS
  • CSS
inoue
TIPS

lax.jsの使い方【スクロール連動アニメーションの実装】

  • lax.js
  • パララックス
  • JS
ブログ記事一覧
  • HOME
  • TIPS
  • SVGで手書き風文字アニメーション