手書きのようなSVGアニメーションの作り方 -文字や図形を一筆書きのように線・ラインで描く

文字や図形、そしてイラストやロゴなどを一筆書きのように、線・ラインで描くSVGのアニメーションが驚くほど簡単に作成できるオンラインツールを紹介します。

下記のように一つずつ順番に描いたり、3つを同時に描いたり、タイミングをずらしたりもできます。

※キャッチ画像なので、SVGアニメーションをGIFアニメにしたものです。

ラインで描くSVGのアニメーションをいくつか作成してみました。
まずは、SVGファイルを用意します。

シンプルな図形を描いたSVGのキャプチャ
※キャプチャなので、PNG画像です。

3つの図形を順番にラインのアニメーションで描いてみます。
イラストやモックアップをラインで描くアニメーションをよく見かけますね。

続いて、文字を描くアニメーション。
文字ごとに離れてても平気ですが、文字なら筆記体の方が描いてる感がでます。

文字を描いたSVGのキャプチャ
※キャプチャなので、PNG画像です。

「c」から描き始め、最後に「i」の点を打つようにしました。

これらのSVGアニメーションは、「Vivus Instant」で作成できます。利用にあたっては完全に無料で、登録など面倒な事も一切必要ありません。

Vivus Instant
Vivus -GitHub

使い方は簡単です。
SVGファイルを用意し、ドラッグ&ドロップでアップロードし、アニメーションの設定をするだけです。

SVGファイルをアップロードしたところ

アニメーションの設定には、オートとマニュアルがあります。

アニメーションの設定

「Animation type」でアニメーションのタイプ、順番に描く、同時に描くなどが設定でき、あとは時間やループを設定できます。
設定を変更したら「Update」をクリックすると反映されます。

手元にSVGファイルがない人用に、3つの図形を描いたSVGファイルを用意しました。
順番に描いたり、同時に描いたり、試してみてください。

• shape.svg(4KB)

自分でSVGファイルを用意する際は、SVGのラインは塗りではなく線にしてください。フォントのアウトライン化は通常、塗りになってしまうので、注意が必要です。