SVGで手書きアニメーションの作り方

SVGで手書き風のアニメーションを作成した際の制作手順を簡単にまとめました。

1.元となるSVGファイルの作成・書き出し

今回はIllustratorでロゴを元となるSVG形式で書き出しました。

2.マスクSVG作成・書き出し

元のSVGファイルに沿って、パスを引きます。（パス以外の塗りつぶし・シェイプはアニメーションをつけることは出来ませんので注意）
上の画像は元SVGを入れた状態ですが、マスクSVGを書き出す際は元SVGは削除してからマスクSVGを作成してください。

3.マスクSVGにアニメーションをつける

マスクSVGを書き出した後は、アニメーションをつけます。
http://lazylinepainter.info/
のサイトにアクセスし

の箇所にファイルをドロップすると、アニメーションが再生されます。
アニメーションが再生されない場合は、SVGの作成がうまくいっていないです。
（私はパスではなく塗りつぶしで作成したファイルをアップして駄目でした(^_^;)）
好みの動きに調整したら、「Download ZIP」をクリックしてファイルをDownloadします。

4.HTMLファイルにて設定

DownloadしたHTMLファイルを編集エディタ（Dreamweaverなど）で開きます。

<polyline class="st00" points="12.1,49.7 30.8,100.1 44,47.9 66,103.3 67.7,70.8 71.4,33.5 79.5,9 " data-llp-id="mask-0" data-llp-duration="730" data-llp-delay="0" fill-opacity="0" style="" data-llp-stroke-join="" data-llp-stroke-cap=""/>
<polyline class="st10" points="118.2,42.1 81.8,72.4 104.1,105.7 117.4,103.5 " data-llp-id="mask-1" data-llp-duration="730" data-llp-delay="730" fill-opacity="0" style="" data-llp-stroke-join="" data-llp-stroke-cap=""/>

のようなコードが記述されている箇所を「mask」タグで囲みます。

<mask id="clipmask" maskUnits="objectBoundingBox">
<polyline class="st00" points="12.1,49.7 30.8,100.1 44,47.9 66,103.3 67.7,70.8 71.4,33.5 79.5,9 " data-llp-id="mask-0" data-llp-duration="730" data-llp-delay="0" fill-opacity="0" style="" data-llp-stroke-join="" data-llp-stroke-cap=""/>
<polyline class="st10" points="118.2,42.1 81.8,72.4 104.1,105.7 117.4,103.5 " data-llp-id="mask-1" data-llp-duration="730" data-llp-delay="730" fill-opacity="0" style="" data-llp-stroke-join="" data-llp-stroke-cap=""/>
</mask>

次に、元のSVGのソースコードを開き

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 125.7 117.9" style="enable-background:new 0 0 125.7 117.9;" xml:space="preserve">
・
・
の間に記述されている部分をコピーします。
・
・
</svg>

コピーしたら、上記の記述下にmaskタグ下辺りに、ペーストします。
ペーストしたタグの先頭にマスク属性を追記します「mask=”url(#clipmask)」

完成

デモページ

細かい調整は下記辺りでできそう

let myAnimation = new LazyLinePainter(el, {"ease":"easeInCubic","strokeWidth":20,"strokeOpacity":1,"strokeColor":"#FFFFFF"}); 

<style type="text/css">
	.st00{fill:none;stroke:#000000;stroke-width:19;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st10{fill:none;stroke:#000000;stroke-width:18;round;stroke-miterlimit:10;}
</style>