SVGアニメーション Lazy Line Painter for jQuery 実装してみた

Fireworksなんかで、書き出したSVGを、いい感じにアニメーションにしてくれる Lazy Line Painter

LAZY LINE PAINTER
http://lazylinepainter.info/

ここにSVGファイルをドラッグすると、、、

こんな風にプレビューがでてきて、色味なんか調整できる。
そして、このJSコードをコピーして、使う。

実際には、

CSS

#test {
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	margin:80px 0 0 -175px;
}

jQuery , Raphael そして、LAZY LINE PAINTER を読み込む。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="jquery.lazylinepainter-1.1.min.js"></script>

JSはこんな感じ　　※(A)object名,(B)id のところは、書き換え

(function( $ ){
	var pathObj = {               // pathObj ・・・　(A)
	    "test": {                 // test ・・・・・・　(B)
	        "strokepath": [
	            {
	                "path": "M 115 42 C 64 68 64 90 64 93 C 64 96 83 119 83 119 L 148 125 L 159 106 L 146 96 C 146 96 131 100 131 105 C 131 110 126 114 126 114 L 109 109 L 100 91 L 115 78 L 181 59 L 171 34 L 147 23 L 116 19 L 47 20 C 47 20 32 90 32 92 C 32 94 31 113 32 118 C 33 123 42 147 42 147 L 73 162 L 117 173 L 142 171 L 170 166 L 181 135 L 185 117 L 151 145 L 127 158 L 83 135 L 54 120 ",
	                "duration": 800
	            }
	        ],
	        "dimensions": {
	            "width": 200,
	            "height": 200
	        }
	    }
	};

	$(document).ready(function(){
		// Setup your Lazy Line element.
		// see README file for more settings
		$('#test').lazylinepainter({                           // (B) = test
				'svgData' : pathObj,                           // (A) = pathObj
				'strokeWidth':7,
				'strokeColor':'#de8f8f',
				'onComplete' : function(){
					$(this).animate({'marginTop':60},500);
					}
			}
		)

		// Paint your Lazy Line, that easy!
		$('#test').lazylinepainter('paint');                     // (B) = test
	})

})( jQuery );

HTMLはこう！　　※(B)のところは、書き換え

<div id='test'></div>　                   <!-- (B) = test -->

何かに使えそう。