SVGでさらさら筆記体アニメーションを作ろう

SVGをつかった筆記アニメーションを作ろう

避けて通ってきたsvgだけど、避けられなくなったので作ってみた。
おもったより簡単だったかも。
大変なのはIllustratorでパスを作るところかも。

DEMO
http://deep-space.blue/testing/svg-animation/

参考

http://ascii.jp/elem/000/000/901/901319/

それでは作ってみよう

まずはsvgを作る作業。

下がお手本。作りたい姿。
上はトレス。

筆記アニメーションをつなげたいところは一本のパスになるように、Illustratorで書き直す。
パスが得意な人に頼んだ方がいいかも。

出来上がったらsvgに書き出す。

pathってなっているのが一番長い線。lineはそれぞれ、iの点とtの横棒。
class=”st1″だけ、styleで太くなっているので、これがillustratorで太くしたiの点だな…とあたりをつける。
実はtの横棒も下が右のtの線なので、並び替えてあげた方がわかりやすい。

いらないidなどを取っ払ってすっきりさせて、css(今回はscss)を設定。

それぞれのパスに、stroke-dasharrayとstroke-dashoffsetを設定して、それをanimationで動かしているのだが、その値はパスの長さに合わせて調節しないといけない。
scssの変数が便利。

cssに展開するとこんな感じ。

これで、筆記アニメーション付き筆記体svgの出来上がり。
適宜ベンダープレフィックスをつけてどうぞ。

http://deep-space.blue/testing/svg-animation/