みなさん、お疲れ様です。
今回はSVGアニメーションに挑戦しました。→DEMO
存在自体は知ってたのですが、使いどころがわからずほったらかしになっていました。
で、なんとなく上のDEMOを作っていたら、知人が「サイトの初めに出したら面白そう」と言ってくれたので、それをヒントに実装しました。もしよければ後でポートフォリオサイトのほうに行ってみてください。ページ上部のロゴからリンクしてます。
では、使い方です。
今回はこちらのサイトを参考にさせていただきました。サイトが詳しいのでここでは簡単に説明させていただきます。
http://ascii.jp/elem/000/000/901/901319/
①まず、Illustratorでイラストを描きます。アンカーポイントは少ないほうがよさそうです。
②イラストをsvg形式で保存します。このときレイヤーの名前は半角英数にしておきましょう。
③svgの画像をDreamweaverなどのテキストエディタで開きます。すると以下のようなコードが出ます（見えないと思いますが、雰囲気だけ）。
④このコードの<svg>～</svg>をコピーしてHTMLの埋め込みたいところにペーストします。このときブロック要素で囲んでおいて、その要素の幅で画像の大きさを操作します。
⑤CSSでアニメーションの動きを決めます。 stroke・・・線の色 fill・・・塗りつぶしの色 stroke-width・・・線の幅 stroke-dasharray・・・破線の間隔 stroke-dashoffset・・・破線の開始位置 仕組みとしては破線の間隔を見えなくなるくらい長くして、破線の開始位置をすごく大きいところから小さくしていくことで、描画するような動きになるということだそうです。
一応以上で完成です。まだやり始めでわかってないこともたくさんあるので、またいろいろ試してみて載せたいと思います。