SIBYL System

SVGでサイトロゴのアニメーションを作ってみる

SVGでぬるぬる動く画像作れるとなんだかできる人っぽいですよね。なので今回はSVGでアニメーションするロゴを作ってみたいと思います。

 

完成品はこちら

Adobe illustratorでロゴを作成。ロゴは文字ツールとそれっぽいフォントを指定して作るだけです。

 

文字ツールで作成した文字を右クリックして「アウトラインを作成」を押下して文字をアウトライン化します。

この状態でメニューの「保存」を押下し、保存形式でSVGを選択するとSVG形式のファイルを取得することができます。

以下SVGのサンプルです。こんな感じのデータが出力されます。どこからどこへ線を引くかという情報がたくさん書かれていますね。

次にウェブ上で表示させるためindex.htmlを書きます。svgファイルのsvgタグをdivタグの中に入れます。また、CSSでアニメーションさせるため、svgタグ内にあるpathタグの中に「class=”path”」属性を追記しています。

最後にsvgをアニメーションさせるCSSを記述しましょう。ファイル名はdefault.cssとしました。

以上で完成です。

完成品はこちら

もっと細かいことをしたいならば詳しく調べないとですが・・。初めの第一歩としてこれで十分楽しめますね。

 

参考:

SVG線画が美しいリッチアニメーションの作り方

モバイルバージョンを終了