今回は、手書き風のテキストを実装する方法をまとめました。

まずは完成形

こんなかんじでHello Worldが手書きしたような動きになります！

上記サンプルはこちら！
→https://tnyk.jp/example/tegaki/

では早速手順を紹介していきます。

イラレなどのツールで表示させたいテキストの画像を作成

表示させたいテキストを打ち込み、画像として出力する。

jpegでもpngでもOKですが、svgにするのが一番オススメです。

svgにする場合は、テキストのアウトライン化を忘れずに！

ペンツールでなぞり、SVG画像を作成

別のレイヤーを作成し、表示させたいテキストの上からペンツールでなぞっていきます。

一筆書きでもOKですが、普通に１文字ずつなぞっていくほうがやり直しもしやすいのでオススメです。

文字が完全に重なるようにペンの太さや、パスの位置を調整してください。

調整が終わったら、SVG画像として書き出します。こちらをマスクにするため必ずSVGにしてください。

画像をSVGタグで実装

まずはコードから。

<style>
  /* マスク側の画像の幅と高さを指定する */
  #svg-animation {
    width: 350px;
    height: 68px;
  }

  #svg-animation path {
    fill: none;
    stroke: #fff;
    stroke-width: 10; /* マスク側の画像の文字幅を指定する */
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 1.5;
  }
</style>

<svg id="svg-animation" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  xml:space="preserve" xmlns:serif="http://www.serif.com/">
  <!-- ここに表示させたい画像 -->
  <!-- x,yでマスク側の中央になるように補正する。今回は、
                x: (350 - 344) / 2 = 3
                y: (68 - 60) / 2 = 4
                -->
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="hello.svg" width="344" height="60" mask="url(#clipmask)"
    x="3" y="4"></image>

  <!-- ここに手書き（マスクをかけたい）画像 -->
  <mask id="clipmask" maskUnits="objectBoundingBox" width="350" height="68">

    <g id="レイヤー2">
      <path
        d="M819.82,135.442C822.626,135.335 825.525,136.056 828.352,136.26C831.91,136.516 831.766,136.707 835.254,136.707C836.771,136.707 838.287,136.653 839.803,136.653C841.124,136.653 842.021,137.249 843.263,137.467C844.835,137.743 850.688,137.916 851.84,136.757C852.288,136.307 853.564,136.992 853.859,136.398C854.054,136.006 855.484,136.592 855.759,136.039" />
      <!-- 省略 -->
    </g>

  </mask>
</svg>

コメントでも解説してますが、width と heightは、画像の大きい方にあわせてください。（変な画像の切り出し方をしてなければ、マスク側の画像のほうが大きくなってると思います。）

styleに関しては、cssファイルに書いてもいいし、styleタグで近くに書いておいてもどちらでもいいです。

pathのstyleに関しては、必ず、「fill: none;」にする。 strokeの色も#「fff」で透明度１００％の色表示になります。

imageタグの属性「xlink:href」で、表示させたい画像を指定する。属性「mask」で、maskタグのIDを指定する。

maskタグ内に、手書きで書いたsvg画像のタグ内をコピーする。gとかpathとかのみになる。

vivus.jsで手書きのような動きにする

vivus.jsを利用します。→https://github.com/maxwellito/vivus

ダウンロードして、ファイルを設置、読み込みするだけでOKです。

あとは、下記のようにsvgのIDを指定して実行すれば完了です。

new Vivus('svg-animation', {type: 'scenario-sync', duration: 3, forceRender: false, animTimingFunction:Vivus.EASE},function(){});

一筆書きにする場合は、「anmTimingFunctionをVivus.EASE_OUT」にしたり、「durationを150など」大きい値にするとうまく動きます。