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

手書き風フォントのテキストをどうしてもシュバババっと動かしたくなって、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」のアニメーションもメモしていきたいと思います！