手書き風アニメーション(vivus.js) - Qiita

はじめに vivus.jsという素晴らしい、プラグイン？を使用したのでメモとして残します。 まだ理解し切ってないので、本当にメモ書き程度のまとめです。 完成イメージ 手順 illustratorで新規作成 ・「base」「mask」のレイヤー作成 ・「base」レイヤーに文字を書く ・文字のオブジェクトの上で「右クリック」→「アウトラインを作成」 ・そのまま(選択した状態で)「オブジェクト」→「複合パス」→「作成」 ・「base」にロックをかけ、「mask」レイヤーに切り替える ・「ペンツール」で文字をなぞる ※この時、線どうしは被らない様にすると綺麗なアニメーションになる。交差点がある場合は、一旦線を切ってパスギリギリの幅の線を書くといい。 【ペンツールの使用前後の画面】 ・最後にSVGに書き出す。 コーディング ・SVGをエディターで開く ※開いたら、タグ毎に改行すると見やすい <sv