on:2017年4月4日sponsors文字や図形、そしてイラストやロゴなどを一筆書きのように、線・ラインで描くSVGのアニメーションが驚くほど簡単に作成できるオンラインツールを紹介します。下記のように一つずつ順番に描いたり、3つを同時に描いたり、タイミングをずらしたりもできます。※キャッチ画像なので、SVGアニメーションをGIFアニメにしたものです。ラインで描くSVGのアニメーションをいくつか作成してみました。SVGファイルを用意します。シンプルな図形を描いたSVGのキャプチャ※キャプチャなので、PNG画像です。3つの図形を順番にラインのアニメーションで描いてみます。イラストやモックアップをラインで描くアニメーションをよく見かけますね。続いて、文字を描くアニメーション。文字ごとに離れてても平気ですが、文字なら筆記体の方が描いてる感がでます。文字を描いたSVGのキャプチャ※キャプチャなので、PNG画像です。「c」から描き始め、最後に「i」の点を打つようにしました。Instant」で作成できます。利用にあたっては完全に無料で、登録など面倒な事も一切必要ありません。-GitHub使い方は簡単です。SVGファイルを用意し、ドラッグ&ドロップでアップロードし、アニメーションの設定をするだけです。SVGファイルをアップロードしたところアニメーションの設定には、オートとマニュアルがあります。type」でアニメーションのタイプ、順番に描く、同時に描くなどが設定でき、あとは時間やループを設定できます。設定を変更したら「Update」をクリックすると反映されます。手元にSVGファイルがない人用に、3つの図形を描いたSVGファイルを用意しました。順番に描いたり、同時に描いたり、試してみてください。shape.svg(4KB)自分でSVGファイルを用意する際は、SVGのラインは塗りではなく線にしてください。フォントのアウトライン化は通常、塗りになってしまうので、注意が必要です。