もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

手書き風の文字アニメーションは、jsでマスク画像（svg）をアニメーションさせて、文字本体が描かれていくように見せるのが一般的です。
今回は、サイトのアクセントとして手書きのロゴが一筆書き風のアニメーションで表示されるローディングの実装方法をご紹介します。

完成型のデモを見る

必要なパーツ

ロゴのillustratorデータ

マスク用のillustratorデータ

このマスク用のパスデータを順にjsで消していくことでロゴが一筆書きのように表示されるようにします。

ロゴ（.ai）をsvg形式に書き出します。

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 521.98 183.04">
 <defs>
  <mask id="clip_mask">
   <path class="mask_line" d="M17.42,78.75s17.87-25,24.19-36.6,7.65-14,12.64-24.28-4.17-7.81-11.31,2.66c0,0-26.2,32.46-33.25,74.16-6,35.46-5.41,47.17-5.66,57.53-.38,15.67,2.66,19.62,4.33,5.65,1.12-9.45,8.18-42.34,16.29-60.17s21.47-35.12,31-31.37-29,56.18-32.68,59.4-6.25,3.54-6.25,3.54S41.28,105.33,48.93,100,80,82.24,80,82.24L77.19,59.7,95.81,72.08S81.18,73.37,78.19,88.52s6.57,1.69,13.13-6.28c5.92-7.18,18.32-24,18.32-24S96.47,86.71,93.15,106.33s6,14.3,14,5.49,30.45-39.66,30.45-39.66S127.07,90.72,128.74,96s2.88,2.22,13-7c11.09-10.17,15.67-24.27,25.9-23.94s14,21.13,14.34,39.94-6.49,50.74-15.55,64.61-17.77,12.47-12.73-4.39c4-13.53,24-49.58,35.93-63.22S214.2,74,214.2,74h49.55s-3.58,6.67-5.66,21,3,23.61,7,14.63,15.31-39,15.31-39-7.9,19.43,1.31,17.83,17.82-7.62,17.82-7.62S288.36,93.36,286.69,106s7.13,11.55,16.74.34,33.14-34.56,42.12-60.68,15.66-38.38,11.26-40.9-13.5,16.46-21.23,37.4-12.31,56.07-10.65,74.42,9.2,42.67,9.2,42.67l6.26-58.57s11.91-27.91,17.81-38,13.12-33.5,17.36-45.78c5.51-15.93,1.7-16.84-6.4-4-6.31,10-18.55,40-20.28,56.24s-6,35.81-2.66,56.65a192.46,192.46,0,0,0,9,35.47l-5.31-73.77L363.78,61.1l11.78,12.35s-7-1.89-13.87,7.45c-8.11,11-2.56,15,2.09,10.11C367.61,87,390.66,57.5,390.66,57.5S378,80.89,375.56,99.34s-2,27,10.23,15.43,31.59-38.36,31.59-38.36l3.33-27.28,27.6,10.57-13.2,13.67s4.83-10.32-1.82-8.24S407.14,85.37,410,92.65s11.65,1.33,18.18-4.13S455,65.85,461.94,62.65s3.33.93,1.66,11.86S441,134.72,433,152.55s-27,37.12-21.61,11.3c5.32-25.6,55.74-66.33,58.52-71.2s14.63-11.11,14.63-11.11,2.43,6.67,7.36,3.5c5.46-3.5,9.32-8.91,4.57-12.32-6.71-4.81-16.41,9.35-16.58,20.63s4,22,16.58,13.31S518,78.83,518,78.83C515.19,67.61,395.86,47.3,372.75,46.94s-47.22-1.45-53.75,2.9-18.08,24.67-18.08,24.67"/>
   </mask>
 </defs>

マスク用のデータ（.ai）をsvg形式でファイル（mask.svg）として書き出します。これを「mask」タグを画像として指定します。

html

<div class="logo_wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 521.98 183.04">
<defs>
<mask id="clip_mask">
 <path class="mask_line" d="M17.42,78.75s17.87-25,24.19-36.6,7.65-14,12.64-24.28-4.17-7.81-11.31,2.66c0,0-26.2,32.46-33.25,74.16-6,35.46-5.41,47.17-5.66,57.53-.38,15.67,2.66,19.62,4.33,5.65,1.12-9.45,8.18-42.34,16.29-60.17s21.47-35.12,31-31.37-29,56.18-32.68,59.4-6.25,3.54-6.25,3.54S41.28,105.33,48.93,100,80,82.24,80,82.24L77.19,59.7,95.81,72.08S81.18,73.37,78.19,88.52s6.57,1.69,13.13-6.28c5.92-7.18,18.32-24,18.32-24S96.47,86.71,93.15,106.33s6,14.3,14,5.49,30.45-39.66,30.45-39.66S127.07,90.72,128.74,96s2.88,2.22,13-7c11.09-10.17,15.67-24.27,25.9-23.94s14,21.13,14.34,39.94-6.49,50.74-15.55,64.61-17.77,12.47-12.73-4.39c4-13.53,24-49.58,35.93-63.22S214.2,74,214.2,74h49.55s-3.58,6.67-5.66,21,3,23.61,7,14.63,15.31-39,15.31-39-7.9,19.43,1.31,17.83,17.82-7.62,17.82-7.62S288.36,93.36,286.69,106s7.13,11.55,16.74.34,33.14-34.56,42.12-60.68,15.66-38.38,11.26-40.9-13.5,16.46-21.23,37.4-12.31,56.07-10.65,74.42,9.2,42.67,9.2,42.67l6.26-58.57s11.91-27.91,17.81-38,13.12-33.5,17.36-45.78c5.51-15.93,1.7-16.84-6.4-4-6.31,10-18.55,40-20.28,56.24s-6,35.81-2.66,56.65a192.46,192.46,0,0,0,9,35.47l-5.31-73.77L363.78,61.1l11.78,12.35s-7-1.89-13.87,7.45c-8.11,11-2.56,15,2.09,10.11C367.61,87,390.66,57.5,390.66,57.5S378,80.89,375.56,99.34s-2,27,10.23,15.43,31.59-38.36,31.59-38.36l3.33-27.28,27.6,10.57-13.2,13.67s4.83-10.32-1.82-8.24S407.14,85.37,410,92.65s11.65,1.33,18.18-4.13S455,65.85,461.94,62.65s3.33.93,1.66,11.86S441,134.72,433,152.55s-27,37.12-21.61,11.3c5.32-25.6,55.74-66.33,58.52-71.2s14.63-11.11,14.63-11.11,2.43,6.67,7.36,3.5c5.46-3.5,9.32-8.91,4.57-12.32-6.71-4.81-16.41,9.35-16.58,20.63s4,22,16.58,13.31S518,78.83,518,78.83C515.19,67.61,395.86,47.3,372.75,46.94s-47.22-1.45-53.75,2.9-18.08,24.67-18.08,24.67"/>
   </mask>
 </defs>
 <image xlink:href="https://atwork.co.jp/wordpress-atwork/wp-content/themes/theme-atwork/images/mask.svg" width="100%" height="100%" mask="url(#clip_mask)"></image>
</svg>
</div>

css

* { margin: 0; padding: 0; box-sizing: border-box;}

html { height: 100%;}
html, body { height: 100%;}

.cover { width: 100%; height: 100%; background: linear-gradient(-45deg, #3e1729, #6d5115, #2a271f) fixed; background-size: 400% 400%; animation: GradietionAnimation 4s ease; position: absolute; top: 0; left: 0; z-index: 5;}

@keyframes GradietionAnimation { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.logo_wrapper { width: 30%; height: 0; padding-top: calc(183 / 522 * 100%); position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; z-index: 6;}
.logo_wrapper svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.mask_line { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px;}

js

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

ここで注意することはロゴのsvgとマスクのパスがずれることなく重なることです。マスク用のパスは大きくはみ出ることなく描くことが大切です。