[WEB]SVGを使った手書き風フォントアニメーションの一番簡単な作り方

はじめに

よくあるっと文字をペンで「すらすら～」と書いていくようなアニメーションをWEBサイト等で追加したいとき。
表現の仕方が少し難しく、検索の仕方もいろいろなワードで検索されていますが、やりたいことは「文字の手書き風アニメーション」、「フォントアニメーション」、「フォントライン　アニメーション」といった感じ。
いろいろ方法を探しましたが、中でもSVG画像とツールを使ってJavaScriptで実装する方法が一番簡単だと思ったため、以下からはその方法を紹介。

データの作成

Adobe Illustratorで動かしたいSVGを作成する。
※svg画像の作成はフリーソフトのInkscapeで代用も可能。

好きな文字を「文字ツールで描き、アウトライン化する

アウトライン化した文字をなぞるように、鉛筆ツールで画像の中心にパスを作成

線の太さをいい感じに調整する
マウスで作った精度の低いパスを目立ちにくくするために、「オブジェクト→パス→単純化」から、曲線部を滑らかにする

「オブジェクト→アートボード→選択したオブジェクトに合わせる」で余白をトリミングする

SVG形式で保存

アニメーションをつける

http://lazylinepainter.info/
前項で作成したSVGをドロップ、動きを確認し、生成されたコードをコピーする

ファンクションの設定などはこちらの記事を参考にさせていただきました。
SVGを手書き風に描いてくれるjQueryプラグイン

サイトにコピペする

これだけではまだ自分のサイトにアニメーションを表示させることはできないため、以下の作業を行う。

さきほどの出来上がったコードを自分のサイトにコピペ。
外部jsファイルにするか、scriptタグでHTMLに埋め込む。

以下から「lazylinepainter-1.7.0.min.js」をダウンロードして、head内に埋め込む。
https://github.com/camoconnell/lazy-line-painter

出来上がり

※gif画像のためガタつきありますが、実際にはかなりなめらかに作ることができる

最後に

SVGを作った後の設定をとてもわかりやすく紹介している記事
http://trunk4649.hateblo.jp/entry/2016/09/07/215625
https://blog.mismithportfolio.com/web/20150617lazy-line-painter