LAZY LINE PAINTER を使った SVGアニメーション

JQueryのプラグインを使用していい感じのSVGアニメーションがつくれみたいだったので、試してみました。

近頃インタラクティブな実装方法を、身につけたいと思っていて惹かれたJQueryです。

思った以上にとっても簡単にできておすすめ!

lazy_line_painter_main

demo

こんな感じで、まるで書いているみたいな動きをつけることができます。

LAZY LINE PAINTER

作り方
1.Illustratorでsvgデータを作成する
2.LAZY LINE PAINTERでJsを作る
3.HTMLを書く
4.補足

Illustratorでsvgデータを作成する

svg_illustration

svg_setting

このとき、書いた順番でアニメーションが作成されます。

LAZY LINE PAINTERでJsを作る

LAZY LINE PAINTER
のサイトの下の方にある
コンバーターにsvgをドラックするかクリックしてファイルを選択し
Jsデータに変換する

converter

このような画面に切り替わりアニメーションが確認できる

Jsをコピーする

HTMLを書く

 
    
    

    
      
      svg-animation