ブロガー🔰が爆速⚡ブログを書く

動画制作にも使えるSVGアニメーションでうねうねと線を描く表現JQuery「LAZY LINE PAINTER」

前置き

今回はプログラミングのJavascriptでご挨拶⬇️

※こちらは「typist」を使用しています。→ デモ

本題

こんにちは😋皆さんJQuery使ってますか?
無料でこんなに便利なライブラリーが使えるんだからwebデザイナーの方は、積極的に使わない手はないですね。

さて、今回は、JQueryとLAZY LINE PAINTERを使って簡単に素晴らしいアニメーションを作成する方法をご紹介します。
トップページに用いれば印象に残るサイトにできるんじゃないかと思います。
「百聞は一見に如かず」👀ということで、まずは完成品からご覧ください。

完成品


demo1
demo2

いかがでしょうか?当サイト「エデンのその後」とその「イラスト」を描いています。
なかなか、満足です。
今後のお仕事に、WEBのみでなくアニメーションビデオ制作にも使えそうです。

それでは、レシピの材料をご紹介いたします。

準備する食材

(?人前)

…以上です。
一体、何人前でしょうか?

SVG画像を準備

まず最初に準備した素材

今回はサイトトップIllustratorのaiファイルがありましたので、こちらの画像を使います。
この画像をイラストレーターでsvg形式で保存します。
そして、以下の部分。(このサイトに準備されているコンバーターの部分)に画像をドロップ。


これでOK…
ん?
エラーメッセージが返ってきたぞ…

あっ!と..😓そうでした..やっちまった。
画像サイズは40kb,1000×1000までのサイズ指定があるんでした。
ということで、イラストレーターで
「グループ解除」
「不要なパスの削除」
「パスファインダーで画像を統合」
「背景画像の色を単色に変更」
「文字のアウトライン」
などの処理をちまちまと行いました。
それで、出来たSVG画像がコチラ↓

もう一度、画像をドロップ。
すると以下のような長いコードが出てきますので、コピーします。

コード

/* 以下のコードをコピーします */
var pathObj = {
"eden": {
"strokepath": [
{
"path": "M97.9,198.6l0.4-0.4c1-0.1,2-0.2,2.3-0.2c0.7-0.1,1.2-0.1,1.5-0.1l1.3,0.1c1,0.2,1.6,0.2,1.7,0.2l4.9,0 l13.4,0.4c0.1,0,0.6-0.1,1.3-0.1l1-29.9l-20.4-0.1l-0.7-0.5l1.3-1l-0.7-0.5l-0.1-0.8l2.2-0.6l-1.7-0.3l0-0.8l0.6-0.2l-1.5-0.2 l-0.7-1.1l3.3-0.8l-1.5-0.6l-1-1.1l1.3-0.3l0-0.5l-1.5-0.5l-0.1-0.7l1.8-0.9l-2.3-0.9l0.5-0.9c1.5-0.1,2.8,0,3.4,0 c1,0,2.2,0,4.3,0.1c5.7,0.2,17.5,0.6,23.7,0.7c4.4,0.1,12.8,0,22.9-0.1l0.7,0.8l-1.3,0.8l0.6,0.6l-1.3,0.9l2.1,0.2l0.1,0.8l-2.3,1 l1.3,0.3l0.2,0.8l-3,0.9l2.7,0.2l0.1,0.8l-2.4,0.9l2.7,0.6l0.7,1l-1.6,0.6l0,0.6l1.4,0.8c-1.3,0.4-2.1,0.6-2.4,0.6l-3.9,0.1l-1.9,0 l-4-0.3l-2.3,0c-0.1,0-1.2-0.1-3-0.2c-0.7-0.1-1.7-0.1-3-0.1l-0.5,29.7l3.3,0.1c2,0.2,3.3,0.3,3.5,0.3l1.9,0l13.9,0.1l2.4,0l0.7,0.4 l0.4,0.9l-2.1,0.4l1,0.3l0.4,0.7l-0.6,0.4l-1.2,0.3l3.3,0.9l-0.5,1l-1.7,0.6l1,1l0.1,0.6l-1.9,0.6l2.4,0.6l0.4,0.5l-2.6,1.3l1.2,0.6 l-0.3,0.7l1.5,0.7l0,0.9l-0.7,0.2l-43.9-1.3l-21.2-0.5l0.1-0.3l-0.1-0.5l2-0.7l-2.4-0.6l-0.4-1.3l1.5-0.7l-0.4-0.2l0-0.9l1.6-0.5 l-1.9-0.3l-0.8-1.2l1.3-0.6l0.2-1.2l1,0l-0.1-0.4l-2-0.4l0-0.7l1-0.4l-1.6-0.4L97.9,198.6z",
"duration": 1800
},
{
"path": "M175.4,170.9l6.1-0.2l28.6,0.5l7.5,0.3l5.9-0.1l8.7,0.3c2.4,0,3.7,0,3.7,0c0.4,0,1.6,0.1,2.9,0.3l-0.1,0.9 l-1.3,0.3l0.7,0.3l0,0.3l-1.7,0.8l2,0.5l0.2,0.4l-2.6,0.7l2.1,0.7l0.1,0.7l-1.9,0.8l1.5,0.5l0.1,0.7l-1.3,0.7l1.8,0.2l0.7,0.8 l-1.2,0.5l0.4,0.3l-0.2,0.8l1.2,1.2l-23.6-0.6c-0.7,10.8-6.2,20.3-15.3,26c-6,3.6-14.4,6.5-18.5,6.5l0.1-0.6l1.4-1.2l-2.3-0.3 l2.5-1.8l-4.5-0.1l2.2-1.6l-1.5-0.5l2.5-1.9l-4.4-0.1l0.1-0.7l1.6-1l-2.1-0.2l1.2-1.7l-0.3-0.3l-2.1-0.4l2.4-1.5 c14-1.4,22.8-8.3,23.6-18.6l-27.2-0.3l-0.1-0.4l0.5-0.7l1.8-0.3l-1.8-0.2l0-0.7l2.3-1l-2.3-0.4l0.4-0.7l3.3-1l-2.9-0.3l-0.3-0.9 l1.7-0.7l-2.1-0.4l-0.4-0.7l3.2-1l-2.5-0.3l0.2-1.2l-1.3-0.5L175.4,170.9z M179,153.7l5-0.1l32.6,1.1l-0.9-4.4l0.8-0.7l1,0.7 l0.5-1.2l1.4,1.3l0.4-0.5l0.7,0.8l0.1-1.1l0.5-0.2l0.1,0.2l0.3,0.1l0.7,1.6l0-1.6l0.6-0.4l1.3,1l1.1-1.6l2.4,6.1l2.4-0.1l-0.7-4.1 l0.7-0.6l1,0.8l0.4-0.2l0.8,1.6l-0.1-2.1l0.6-0.4l1.3,1.1l0.4-1.4l0.4-0.1l0.9,1l0.4-0.1l0.6,1.2c0-1.3,0-1.4,0.9-2.6l0.5,0 l3.2,13.5l-0.7,0.2l-0.9-1.3l-0.3,0.3l0,0.7l-0.5,0.1l-1.3-2.1l0.3,2.1l-0.7,0l-1.2-1.6l0.2,1.6l-0.8,0.1l-1.4-1.9l0.3,2l-1.2,0 l-0.8,0.5l2,0.6l-1.7,1.1l2.3,1.2l-0.7,0.7c-2.2,0.3-3.3,0.4-4.7,0.4c-1.1,0-1.1,0-7.9-0.7l-29.3-0.3l-12.4-0.2l0-0.8l1.4-0.6 l-1.2-0.7l0.2-0.5l1.4-0.4l-1.5-0.4l0.2-0.7l1.9-0.9l-2.7-0.6l-0.1-0.6l2.4-0.8l-1.7-0.5l0.2-0.8l1-0.5l-1.2-1.1l-1.2-0.4l0-0.4 l1-0.4l-1.3-0.6L179,153.7z",
"duration": 1800
},
{
"path": "M247.2,203.2c1.5-0.5,2.5-0.8,3-0.9c0.4-0.1,2.5-0.3,5.7-0.6c11.9-1.7,24.6-6.9,32.5-13.5 c6.4-5.1,9.9-8.7,12.1-12.5l0.9,0.2l-0.5,1.7l0.9-0.8l1,0.1l-0.6,2.2l1.1-1l0.8,0.2l-0.4,1.5l2-1.2l0.2,1l-1.2,2.6l1.7-1.6l0.8-0.1 l-0.4,2l1.7-1.1l0.7,0.2l-0.5,2l1.2,0.2l1.3-1.1c-0.4,2.3-0.6,2.7-1.8,4.2c-2.5,3.1-5.4,6.4-5.6,6.3l-4.4,3.9l-1.9,2l-8.4,5.6 c-1,0.7-1.9,1.4-2.9,2c-1,0.8-4.8,2.4-12.7,5.4c-2.3,0.9-1.5,0.6-2.6,1c-2,0.6-4.8,1.4-8.5,2.3c-7.7,1.8-8.2,1.9-9.8,1.9 c-0.4,0-0.7-0.1-1.4-0.2l0.2-1.4l-1,0.1l-0.4-0.4l1.6-1.5l-1.4-0.2l-0.4-0.6l3-1.5l-2.4,0.1l-0.7-0.8l1.5-1l-2.2-0.1l-0.5-0.5l2-1.7 l-1.6,0.2l-0.4-1.1l0.5-0.1l-1.8-0.8l0.2-0.8l1.8-0.8l-1.9,0l-0.2-0.2L247.2,203.2z M252.4,164.3l1.6,0l-0.3-0.4l0-1l2.8,0.6 l-2.1-1.7l-0.4-1l1-0.1l-0.1-0.8l0.8-0.4l1.8,0.2l-0.9-1l0-0.5l0.4-0.4l1,0.2l-1.6-1.4c0.7-0.4,1.3-0.5,1.7-0.5c0.4,0,1,0.2,1.7,0.6 l-2.1-1.6l0.2-0.6l0.7-0.1l-0.2-1.2l0.7-0.2c1.2,0.5,2,0.9,2.3,1.1c1,0.7,2.1,1.3,3.2,2l4.1,2.2l1.3,0.8l3.6,1.8l2.9,1.5 c-0.1,0.1,1.4,0.7,2.8,1.2l0.1,0.7l-1.1,0.9l1,1.5l-2.9-0.1l1,0.8l0,0.4l-0.5,0.4l-1.1-0.2l-0.1,0.8l-0.6,0.5l0.6,0.6l0.1,0.9 l-2.9-0.4l1.4,1.4l0.1,0.8l-1.8-0.2l0.9,0.8l0,0.2l0.6,1.3l-2.6-0.5l0.4,1.1l-0.8,0.6l-18.8-11.2L252.4,164.3z",
"duration": 1800
},
{
"path": "M364.2,219.9l-1.1,0.1l0.7-1.5l-1.3,0l1-1.4l-2.9,0.5l2.2-2.6l-2.2,0.4l-0.5-0.5l2.4-2c-1.2,0.4-2.3,0.6-3,0.6 c-0.2,0-0.5,0-1-0.1l0.2-1l1.7-1.3l-2.8,0.8l-1.2-0.2l1.8-1.5l-2.9-0.8l0.1-0.7c10.8-5.5,16.2-12.4,16.3-20.9c0-1.3-0.1-3.2-0.3-5.2 c-1-4.2-1.9-6.2-3.6-8c-2.7-2.8-6.8-4.5-11-4.6c-4.8-0.1-9.9,1.6-13.7,4.5c-5.2,3.9-7.9,9.4-8,15.9c0,3.2,0.6,6.4,1.7,8.4 c0.5,0.9,1.1,1.6,2.4,2.8c0.8-1.4,1.3-2.3,1.4-2.6l5.4-11.3c0.8-1.5,1.1-2.6,1.4-3.1l0.3-0.9c0.6-1.6,1.3-3.2,2-4.9 c0.2-0.4,0.4-1.1,0.8-2.3l0.9-0.1l0,1.3l1.3-1l-0.3,3l1.8-2l0.7,1.8l0.9-1.2l1.3-0.4l-0.1,3.3l0.9-1.5l0.5-0.1 c0.2,0.7,0.4,1.2,0.3,1.5c0,0.2-0.1,0.6-0.2,1l1.9-2.5l1.2-0.2l-0.2,1.7l1.2,0.2l0.4,0.7l-14.1,29.2c-2,3.8-3.3,5.4-5.6,6.3l0.8-2.1 l-1.7,0.9l2.9-3.9c-2,1.6-2.5,1.8-4.3,2.1c1.4-1.8,1.6-2.1,2.6-3.4c-1.3,0.7-2.3,1.1-2.9,1.1c-0.5,0-1.3-0.2-2.3-0.6 c0.9,0.7,1,0.8,2.2,1.5l-0.2,0.7c-1.6-0.2-1.8-0.3-3.4-0.6c1.3,1.1,1.5,1.2,3,2.1l0.1,0.7l-1.8-0.3l-1.7-0.2c1.2,1,1.4,1.1,2.7,1.9 l0,0.7c-3.5-0.7-5.2-1.6-8.4-4.6c-6-5.4-9.2-13.9-9-24c0.1-5.8,1.2-10.1,3.8-15c3.2-6,6.7-9.7,12.6-13.2c6.3-3.8,11.5-5.2,17.6-5.1 c5.7,0.1,11.8,1.7,16.1,4.2c8.3,4.9,13.6,15,13.5,25.2c-0.1,4.4-1.2,10.1-2.9,14.8c-2.1,5.7-4.7,9.3-11.1,14.7L364.2,219.9z",
"duration": 1800
},
{
"path": "M181,312.3l1.7-0.8l-0.7-0.5l0.6-0.6l3-0.8l-2.8-0.1l-0.8-0.4l1.5-1.1l-2.1-0.4l0-0.4l1.8-1.1l-1.2-0.2l-1-0.7 c4-0.7,5.6-0.9,8.4-0.9c1.2,0,1.2,0,9.8,0.1c3.8-1.7,7.8-5.3,10-9.1l-22,0.4l0.4-1.1l1.8-0.7l-1-0.1l-0.4-0.6l1.8-0.9l-3-1.1 l2.7-1.3l-2.2-0.3l0.1-0.7l2.1-1.1l-2.4,0l2.1-1.8l-1.5,0.1l-0.2-0.1l-1.4-0.2l0.3-1.2l-0.4-0.2l3.5-0.8l32.4-0.5l4.1,0.3l0.9-1.3 l0.2,2.1l-0.5,0.9l0.7,0.1l1.8-4l0.7-0.2l-0.4,3.4l0.7-1.2l0.5,0.1l0.6-1.8l0.7-0.4c-0.2,3.7-0.5,4.7-2.9,9.1 c-3.2,5.7-6.5,9.7-11.3,14l3,0l10.1-0.5l6.5,0.2c3.4-0.3,5.6-0.4,6-0.4c0.5,0.1,1.6,0.4,3,1l-0.5,0.2l0.8,1.4l-2.1,0.8l1.7,0.3 l0.4,0.9l-1.5,1l1.1,0.4l0,0.4l-2.1,0.7l2.7,0.3l-0.1,0.6l-1.3,0.6l1.3,0.5l-0.4,1l-1.1,0.4l1.9,0.6l0.2,0.4l-0.8,0.3l0.6,0.4l0,0.4 c-4.4,0.3-5.5,0.3-11.5,0.5c-8,5.2-8.3,5.4-10.8,7.8c-4.3,4.1-5.4,5.3-6.9,7.6c2.2,0.4,3.2,0.5,4.7,0.5c3.5,0,9.1-0.8,12.3-1.7 c2.7-0.8,2.7-0.8,4.2-1.1l2.2-0.2l0.1,0.6l-1.2,1.3l1.1,0.2l-2.4,1.9l3.5-0.1l0.2,0.6l-2.4,1.4l1.7,0l0.6,0.7l-2.1,1.4l3.1-0.3 l0.6,1l-1.4,0.8l1.3,0.3l0.2,0.5l-0.7,0.6l0.2,0.3l1.2,0l0.2,0.7c-6,3-11.7,4.2-21,4.3c-5,0-13-0.4-16.1-1c-1.5-0.2-3.1-0.7-6.1-1.9 l-1.3-1.5l2.6,0.4L201,340l0.1-0.5l3.2,0.6l-1.9-1.4l-0.5-1.1l3.6,1.1c-2.3-1.8-2.6-2.2-2.8-4.5c-0.5,1.4-0.6,1.6-1,3.1l-0.6,0.2 l0-2.1c-0.8,1.6-0.9,1.8-1.7,3.5l-0.4,0c-0.1-0.7-0.2-1.1-0.2-1.3c0-3.5,3-8.8,8.5-14.7c1.9-2.1,2.3-2.5,7.9-6.5l-34.3,0.7l0.3-0.7 l0.9-0.5l0-0.4l-1.2-0.4l2.7-0.9l-3-0.6L181,312.3z",
"duration": 1800
},
{
"path": "M298.4,346.2l-1.1,0.2l0.7-1.6l-1.3,0l0.9-1.4l-2.9,0.6l2.1-2.6l-2.1,0.5l-0.5-0.5l2.3-2.1 c-1.2,0.5-2.3,0.7-3,0.7c-0.2,0-0.5,0-1-0.1l0.1-1l1.7-1.3l-2.7,0.8l-1.2-0.1l1.8-1.5l-3-0.7l0.1-0.7c10.7-5.8,15.9-12.8,15.8-21.3 c0-1.3-0.2-3.2-0.4-5.2c-1.1-4.2-2.1-6.2-3.8-8c-2.8-2.7-6.9-4.4-11.1-4.3c-4.8,0-9.8,1.9-13.6,4.9c-5.1,4-7.7,9.5-7.6,16.1 c0,3.2,0.8,6.4,1.9,8.3c0.5,0.9,1.1,1.6,2.5,2.8c0.7-1.4,1.2-2.4,1.4-2.6l5.1-11.4c0.7-1.6,1.1-2.6,1.3-3.1l0.3-0.9 c0.6-1.6,1.2-3.3,1.9-4.9c0.1-0.4,0.4-1.1,0.7-2.3l0.9-0.2l0,1.3l1.2-1l-0.2,3l1.8-2.1l0.8,1.8l0.9-1.2l1.3-0.5l0,3.3l0.9-1.5 l0.5-0.1c0.2,0.7,0.4,1.2,0.4,1.5c0,0.2-0.1,0.6-0.1,1l1.8-2.5l1.2-0.2l-0.1,1.7l1.2,0.1l0.4,0.7l-13.4,29.6 c-1.9,3.9-3.2,5.4-5.4,6.4l0.8-2.1l-1.7,0.9l2.8-3.9c-2,1.6-2.5,1.9-4.3,2.2c1.3-1.8,1.5-2.2,2.5-3.5c-1.3,0.8-2.3,1.1-2.9,1.1 c-0.5,0-1.3-0.2-2.3-0.6c0.9,0.7,1,0.8,2.2,1.5l-0.1,0.7c-1.6-0.2-1.9-0.3-3.4-0.6c1.3,1,1.6,1.2,3.1,2l0.1,0.7l-1.9-0.3l-1.7-0.2 c1.3,1,1.4,1.1,2.8,1.8l0,0.7c-3.5-0.6-5.2-1.5-8.6-4.4c-6.1-5.3-9.5-13.7-9.6-23.8c-0.1-5.8,0.9-10.1,3.4-15.1 c3.1-6.1,6.5-9.9,12.3-13.5c6.3-3.9,11.3-5.5,17.5-5.6c5.7-0.1,11.9,1.4,16.2,3.8c8.4,4.7,14,14.7,14.1,24.9 c0,4.4-0.9,10.1-2.5,14.8c-1.9,5.8-4.5,9.4-10.7,15L298.4,346.2z",
"duration": 1800
},
{
"path": "M343.9,277.7l-0.4,1.3l1-0.2l-0.3,2l1.5-0.8l-0.7,2.8l2.1-1.5l0.6,0.4l-1.2,2.7c1.5-1.4,1.8-1.5,3.4-1.5 l-0.6,1.5l2.4-0.5c-0.7,2.5-5.8,8.5-10.1,11.9l-3.2,2.8c-1.2,1-1.8,1.6-6,4.7l-1-0.1l2.4-3.3l-3.4,1.7l-0.7-0.4l1.7-2.5l-1.2,0.1 l-1.2-0.5l2.4-2.4l-2.2,0.5l-1-0.4l2.6-1.9l0-0.1l-1.5,0.9l-0.7-0.3l0.2-0.5l-0.4-0.2l0.7-1l-1,0.7l-1.3-0.3 c1.2-1.7,1.2-1.8,3.5-3.4c4.5-3.1,9.6-8.2,12.5-12L343.9,277.7z M328,308.4l2.2-1.4c9-5.9,13.5-9.6,17.2-14.1l0.6,0.1l-0.6,2.1 l0.6,0.4l1.2-0.3l-0.1,2.4l1.1-0.9l0.7,0.2l-0.2,1.4l0.5,0.1L351,299l1.5-0.9l-0.4,1.9l1-0.3l0.3,0.3l-0.7,1.8l1-1l0.5,0l-2,3.4 l5-0.1l1.5-1l-7.3-12.1l0.1-0.9l0.5,0l1.5,2l0.4-0.6l-0.8-1.7l0.4-1.2l0.8,1.1l13.9-11.2l0.7,0.1l0,0.6l1.3-0.8l0.4,0.4l-0.9,1.6 l0.6-0.4l1.6-0.2l-0.9,1.9l1.5-0.6l0.5,1.3l-0.7,1.3l1.8-1.2l1.1,0l-0.4,1.2l1.6-0.4l-1.6,2.3l3.2-2L366.4,294l1.3,1.6l13-9.8 l0.7,0.1l-0.9,2.7l2-1.6l1,0.2l-1.3,2.7l0.6-0.1l1.2-1l0.7,0.2l-0.9,2.2l2.4-0.8l0.4,0.2l-0.4,1.1l1.5,0.1l-1,1l1.6-0.7l0.6,0.4 c-0.7,0.9-1.3,1.5-1.6,1.8c-0.7,0.7-1.9,1.6-5.7,4.6c-1.5,1-2.9,2.1-4.4,3.1c-0.4,0.3-1.8,1.3-3.4,2.5l7.1-0.4l-0.3-3.3l0.9-0.5 l0.6,0.9l0.4-1l0.5-0.1l1,1.8l0.3-2.1l0.7-0.1l1.1,2.3l0.1-2.4l0.6,0l1,1l0-0.7l1.4-0.4l0-1l0.7-0.2c1.5,3.1,2.2,4.9,3,8.5 c0.4,1.7,0.7,2.7,0.8,3c0.3,1.3,0.7,2.4,1.1,3.6c0.1,0.3,0.2,1,0.4,2.2l-1.8,0.8l-1.7-2.4l0.2,2.9l-1-0.1l-1.6-3.1l0.1,2.1l-0.4,0.7 l0.2,0.1c-0.8,4.1-2.6,7.4-6.8,12.9c4.1,0.6,6.4,0.8,11.8,0.8l1.8,0.4l-0.2,0.7l-2,0.8l2.5,0.3l-0.2,0.8l-1.3,0.5l-0.2,0.9l-2.1-0.1 v0.1l2.9,0.5l0.2,0.7l-3.9,0.9l2.6,0.5l0.5,0.7l-0.4,0.4l-2.7,0.8l2.4,0.7l-0.3,0.8l-2.1,0.6l0,0.4l-0.5,0.3l0.4,0l0.4,1.5 c-1,0.1-1.7,0.2-2.1,0.2c-2.5,0-9.2-1.2-11.5-2.3c-4.4-1.8-4.4-1.8-6.1-2.4c-4.9,3-15,6.7-18.4,6.5l-0.1-0.5l1-0.6l0.6-0.5l-0.2-0.9 l-2.7,0.4l0-0.6l1.4-1l1.2-0.9l-3.2,0l-0.2-0.5l0.6-0.7l1.3-0.5l-2.5-0.9l1.3-0.8l-1.1-0.2l-0.4-0.6l1-0.5l-1.9-0.4l-0.8-2l12-2 l-4.1-3.4l-6,4.2l-1-0.5l0.2-0.6l-1.1-0.2l1-0.9l-1.2,0.6l-0.5-0.3l0.4-1l-0.4-0.3l0.9-1.1l-1.8,1l-0.5-0.4l0.8-1.6l-1.3,0.7 l0.5,17.2l-0.8,0.8l-0.5-1.3l-0.4,0.4l-0.4,0l-0.3-0.6l-0.1,1.8l-0.8,0.5l-0.6-1.7l-0.6,0l-0.2-0.6l-0.6,2l-0.7,0l-1.4-2.2l-0.2,1.6 l-0.8,0.7l-0.6-1.6l-0.7,0l-0.4-1l-0.4,2.3l-0.8,0l-0.2-0.6l-0.3,1l-0.8,0.3l-0.2-26.1l-3.2,1.5l-1.1-0.2l2-2.5l-2.8,0.5l2.3-3.1 l-2.3,0l2.3-2.6l-2.4,0.7l-0.7-0.5l2.1-2.3l-2.1,0.1l-0.4-0.1l1.7-1.9L327,310L328,308.4z M343.9,312.6l1.2,2.4l0.4-1.4l0.5,0 l0.3,0.2l0.4,9.1c0.9-0.7,1.8-1.3,1.9-1.4c1-0.7,2-1.4,2.9-2c1.1-0.8,2.6-2.2,5.3-5.2l-7.5,0.3l-0.2-0.8l1.5-0.8l-0.1-0.6l-1.3-0.1 l-0.5-0.7l1.9-0.8l-0.4-0.4l0.4-0.2l-1.4-0.3l-0.1-0.6l1.2-0.5l-0.4-0.5l-0.8-0.1l-0.3-0.7l-5.8,5.5L343.9,312.6z M371.4,325.8 l3.4-3.5l-9,0.2L371.4,325.8z M369.1,314l0.5,0.2l-0.4,1.6l13.1,0.1l-0.5-2.7l-13.8,0.4l0,1.3L369.1,314z M386.3,314.6l-0.6,1.6 l1.6,0.1L386.3,314.6z",
"duration": 1800
}
],
"dimensions": {
"width": 500,
"height": 500
}
}
};
/* HTMLにscriptタグで囲んで配置する */
$(document).ready(function(){
$('#undefined').lazylinepainter(
{
"svgData": pathObj,
"strokeWidth": 2,
"strokeColor": "#e09b99"
}).lazylinepainter('paint');
});

完成

ほら、出来たでしょう?
サンプルのsvgdata.jsではpathObjやedenの部分がsvgDataやlogoとなっていましたので、Ctrl+Fで対応するワードを検索して置換してください。
それでは、引き続きエデンのその後-After Eden-をどうぞご贔屓に!Hasta la proxima!

関連記事