html

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg class="text-content" version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 292 148" style="enable-background:new 0 0 292 148;" xml:space="preserve">
  <!-- テキストをマスクしているパス 開始 -->
  <g class="text-mask">
    <path d="M84.43,62.74v-1.2h7.7c2.6-4.13,5.27-8.3,8-12.5c2.73-4.2,5.6-7.98,8.6-11.35c3-3.37,6.13-6.1,9.4-8.2
c3.27-2.1,6.7-3.15,10.3-3.15c2.13,0,3.87,0.45,5.2,1.35c1.33,0.9,2,2.28,2,4.15c0,1.6-0.5,2.92-1.5,3.95
c-1,1.03-2.27,1.62-3.8,1.75c0.27-0.93,0.48-1.82,0.65-2.65c0.17-0.83,0.25-1.82,0.25-2.95c0-1.33-0.32-2.4-0.95-3.2
c-0.63-0.8-1.72-1.2-3.25-1.2c-2.47,0-4.98,1.12-7.55,3.35c-2.57,2.23-5.1,5.05-7.6,8.45s-4.93,7.08-7.3,11.05
c-2.37,3.97-4.62,7.68-6.75,11.15h22.6v1.2h-23.2c-6.4,10.93-12.13,20.3-17.2,28.1c-5.07,7.8-9.93,14.2-14.6,19.2
c-4.67,5-9.33,8.67-14,11c-4.67,2.33-9.83,3.5-15.5,3.5c-2,0-3.92-0.25-5.75-0.75c-1.83-0.5-3.45-1.25-4.85-2.25
s-2.53-2.25-3.4-3.75c-0.87-1.5-1.3-3.25-1.3-5.25c0-2.6,0.82-4.82,2.45-6.65c1.63-1.83,4.38-2.75,8.25-2.75h0.9v0.8
c-2,0.13-3.7,0.9-5.1,2.3c-1.4,1.4-2.1,3.33-2.1,5.8c0,3.47,0.97,6.22,2.9,8.25c1.93,2.03,4.77,3.05,8.5,3.05
c3.6,0,7.03-0.82,10.3-2.45c3.27-1.63,6.42-3.88,9.45-6.75c3.03-2.87,6-6.23,8.9-10.1c2.9-3.87,5.8-8.05,8.7-12.55
c2.9-4.5,5.82-9.2,8.75-14.1c2.93-4.9,5.93-9.78,9-14.65H84.43z" />
    <path d="M122.62,61.54c-2.6,3.53-5.1,6.9-7.5,10.1c-2.4,3.2-4.53,6.13-6.4,8.8c-1.87,2.67-3.35,4.98-4.45,6.95
c-1.1,1.97-1.65,3.52-1.65,4.65c0,1.07,0.27,1.85,0.8,2.35c0.53,0.5,1.23,0.75,2.1,0.75c1.27,0,2.65-0.4,4.15-1.2
s3.03-1.83,4.6-3.1c1.57-1.27,3.1-2.67,4.6-4.2c1.5-1.53,2.9-3.05,4.2-4.55c1.3-1.5,2.43-2.88,3.4-4.15c0.97-1.27,1.68-2.27,2.15-3
l8.8-13.4h6.9c-3.6,4.93-6.65,9.12-9.15,12.55c-2.5,3.43-4.53,6.35-6.1,8.75c-1.57,2.4-2.68,4.35-3.35,5.85
c-0.67,1.5-1,2.82-1,3.95c0,0.8,0.23,1.48,0.7,2.05c0.47,0.57,1.13,0.85,2,0.85c1.33,0,2.87-0.48,4.6-1.45
c1.73-0.97,3.53-2.23,5.4-3.8c1.87-1.57,3.72-3.33,5.55-5.3c1.83-1.97,3.57-3.92,5.2-5.85c1.63-1.93,3.12-3.75,4.45-5.45
c1.33-1.7,2.37-3.08,3.1-4.15l1,0.3c-0.8,1.13-1.87,2.58-3.2,4.35c-1.33,1.77-2.83,3.63-4.5,5.6c-1.67,1.97-3.43,3.97-5.3,6
c-1.87,2.03-3.78,3.85-5.75,5.45c-1.97,1.6-3.9,2.92-5.8,3.95s-3.68,1.55-5.35,1.55c-1.87,0-3.35-0.52-4.45-1.55
c-1.1-1.03-1.65-2.42-1.65-4.15c0-1.33,0.22-2.62,0.65-3.85c0.43-1.23,0.75-2.02,0.95-2.35l-0.2-0.2c-1.4,1.6-2.87,3.13-4.4,4.6
c-1.53,1.47-3.07,2.75-4.6,3.85c-1.53,1.1-3.08,1.98-4.65,2.65c-1.57,0.67-3.12,1-4.65,1c-2.13,0-3.67-0.48-4.6-1.45
c-0.93-0.97-1.4-2.12-1.4-3.45c0-1.67,0.45-3.47,1.35-5.4c0.9-1.93,2.15-4.1,3.75-6.5s3.52-5.1,5.75-8.1
c2.23-3,4.68-6.43,7.35-10.3H122.62z" />
    <path d="M189.32,70.84c-1.53,2.47-3.55,5.12-6.05,7.95c-2.5,2.83-5.22,5.48-8.15,7.95c-3.6,3-7.2,5.42-10.8,7.25
c-3.6,1.83-7.13,2.75-10.6,2.75c-2.47,0-4.53-0.65-6.2-1.95c-1.67-1.3-2.5-3.22-2.5-5.75c0-3.2,0.92-6.47,2.75-9.8
c1.83-3.33,4.13-6.38,6.9-9.15c2.77-2.77,5.8-5.02,9.1-6.75c3.3-1.73,6.42-2.6,9.35-2.6c1.93,0,3.62,0.35,5.05,1.05
c1.43,0.7,2.15,1.92,2.15,3.65c0,0.8-0.22,1.47-0.65,2c-0.43,0.53-0.97,0.97-1.6,1.3c-0.63,0.33-1.33,0.58-2.1,0.75
c-0.77,0.17-1.45,0.28-2.05,0.35c0.27-0.67,0.5-1.35,0.7-2.05c0.2-0.7,0.3-1.42,0.3-2.15c0-2.47-1.17-3.7-3.5-3.7
c-1.73,0-3.78,0.85-6.15,2.55c-2.37,1.7-4.6,3.85-6.7,6.45s-3.88,5.47-5.35,8.6c-1.47,3.13-2.2,6.17-2.2,9.1
c0,1.8,0.42,3.33,1.25,4.6c0.83,1.27,2.12,1.9,3.85,1.9c2.33,0,5.02-0.77,8.05-2.3c3.03-1.53,5.98-3.43,8.85-5.7
c3-2.33,5.88-5.02,8.65-8.05c2.77-3.03,5.08-5.98,6.95-8.85L189.32,70.84z" />
    <path d="M221.72,26.74c-5.47,8.67-10.93,17.18-16.4,25.55c-5.47,8.37-11.13,16.62-17,24.75l0.2,0.2c1.73-1.93,3.45-3.88,5.15-5.85
c1.7-1.97,3.47-3.73,5.3-5.3c1.83-1.57,3.73-2.85,5.7-3.85c1.97-1,4.02-1.5,6.15-1.5c2.2,0,3.78,0.53,4.75,1.6
c0.97,1.07,1.45,2.37,1.45,3.9c0,1.6-0.48,3.02-1.45,4.25c-0.97,1.23-2.17,2.3-3.6,3.2c-1.43,0.9-3,1.62-4.7,2.15
c-1.7,0.53-3.25,0.93-4.65,1.2v0.2c0.8,0.4,1.48,1.15,2.05,2.25c0.57,1.1,0.85,2.25,0.85,3.45c0,0.8-0.15,1.63-0.45,2.5
c-0.3,0.87-0.65,1.77-1.05,2.7c-0.4,0.93-0.75,1.85-1.05,2.75c-0.3,0.9-0.45,1.82-0.45,2.75c0,1.27,0.53,1.9,1.6,1.9
c1.8,0,4.07-0.8,6.8-2.4c2.73-1.6,5.63-3.93,8.7-7c2.13-2.13,4.3-4.5,6.5-7.1s4.57-5.73,7.1-9.4l0.9,0.6
c-1.27,1.8-3.12,4.27-5.55,7.4c-2.43,3.13-5.28,6.33-8.55,9.6c-3.13,3.13-6.1,5.5-8.9,7.1s-5.37,2.4-7.7,2.4
c-2,0-3.55-0.43-4.65-1.3s-1.65-2.2-1.65-4c0-0.93,0.23-1.98,0.7-3.15c0.47-1.17,0.97-2.3,1.5-3.4c0.53-1.1,1.03-2.13,1.5-3.1
c0.47-0.97,0.7-1.75,0.7-2.35c0-1.27-0.57-1.9-1.7-1.9c-0.67,0-1.45,0.13-2.35,0.4c-0.9,0.27-1.92,0.4-3.05,0.4
c-1,0-1.5-0.3-1.5-0.9s0.5-0.9,1.5-0.9c0.4,0,0.85,0.03,1.35,0.1c0.5,0.07,1.12,0.1,1.85,0.1c2,0,3.85-0.23,5.55-0.7
c1.7-0.47,3.18-1.15,4.45-2.05c1.27-0.9,2.25-1.98,2.95-3.25c0.7-1.27,1.05-2.7,1.05-4.3c0-1.4-0.33-2.43-1-3.1
c-0.67-0.67-1.47-1-2.4-1c-1.27,0-2.73,0.52-4.4,1.55c-1.67,1.03-3.45,2.43-5.35,4.2c-1.9,1.77-3.83,3.8-5.8,6.1
c-1.97,2.3-3.87,4.7-5.7,7.2c-1.83,2.5-3.55,5-5.15,7.5c-1.6,2.5-2.97,4.85-4.1,7.05h-6.6c7.4-11.53,14.78-22.98,22.15-34.35
c7.37-11.37,14.78-22.88,22.25-34.55L221.72,26.74z" />
  </g>
  <!-- テキストをマスクしているパス 終了 -->

  <!-- マスクされているテキスト 開始 -->
  <mask id="mask">
    <polyline class="text-masked" points="132,39 133,30 131.64,26.77 124.65,26.77 117,31 101,51 94,63 89,72 82,84 73.57,96.74 68,104 58,115 
50.44,121.52 43.14,121.52 35.93,124.54 31.33,122.51 24.07,119.78 23,116 23,113.04 23,109 25,106 27.54,103.8 34,102 53.92,61.54 
122.62,61.54 123,56 113,71 108.81,75.44 104,84 99,91 101,94 105.52,95.14 114.27,90.84 119,84 145.02,48.51 146,56.31 123,88 
123,94 128.72,96.74 137.42,90.29 150,73 157,70 167.17,63.28 174.27,61.54 178,64 178,66.15 177,67 172,71 171.12,54 149,82 
148,87 148,90 149,92 150,94 151,95 154,96 163,92 170,87 179.93,78.74 200.66,50.17 225,18 171.56,96.74 178,98 193.16,70.55 
201,66 209,60 214,64 214,68 213,71 209.34,74 191,78 201,73 202.62,80.99 202.62,85.01 199,92 201,95 204,96 212.99,93.18 
230.27,75.44 239.43,61.54 " />
  </mask>
  <!-- マスクされているテキスト 終了 -->
</svg>

scss

.text-masked {
  stroke-dasharray: 1060px; //破線の間隔を指定
  stroke-dashoffset: 0px; //線の始まりの位置を指定
  stroke: #fff; //アウトラインの色を設定
  stroke-width: 8px; //アウトラインの幅を設定
  fill: none; //塗りの色を指定
  stroke-opacity: 1; //アウトラインの不透明度を設定
  fill-opacity: 1; //内部の塗りの不透明度を設定
  stroke-linecap: round; //線の端の形状を設定
  stroke-linejoin: round; //パスのつなぎ目の形状を設定
  animation: handWriting 6s ease-in forwards;
}

.text-content {
  fill: #333; //表示されるテキストの色を設定
}

@keyframes handWriting {
  0% {
    // スタート時の数値は.text-maskedの数値に合わせる
    stroke-dashoffset: 1060;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.text-mask {
  mask: url(#mask);
}

text

アニメーション用SVG作成手順
参照:https://fuuno.net/ani/ani17/ani17.html

(1)
illustrator起動　→　レイヤー①作成

(2)
レイヤー①にアニメーションさせたい文字をテキストで入力　→ テキストをアウトライン化

(3)
アートボードサイズをテキストサイズと一致させる

(4)
アウトライン化したテキストを一筆書きの書き順になるようにペンツールでパスを書く(塗りなし・線あり(見やすい色))
このとき、書き順やパスの角度を考慮するためにパスはテキストの外側まで伸びて良い

(5)
パスの太さをアウトライン化したテキストを覆うように調整　→ svgで保存
ファイル形式：svg
SVGプロファイル:svg1.1
文字:svg

(6)
コピーしたhtmlをhtmlファイルにペースト
①手順4で作成した<path>群を囲む<g>にclass名"test-mask"を付与
②手順2で作成したアウトライン化されている要素にclass名"text-masked"を付与
③class名"text-masked"を<mask id="mask">で囲む

(7)
cssアニメーションを記述