SVG描画アニメーション [Lazy Line Painter]

Lazy Line Painterを用いて、SVGファイルからSVG描画アニメーションを生成しています。


Lazy Line Painter
http://lazylinepainter.info/

Load Files



JavaScript

// [start] Lazy Line Painterによって生成

var pathObj = {
    "lazylinepainter": {
        "strokepath": [
            {
                "path": "M256,254.384c-4.383,4.64-8.323,9.18-11.619,13.443C216.446,304.03,232.927,315.17,256,315.17   c23.055,0,39.554-11.14,11.601-47.344C264.305,263.564,260.383,259.024,256,254.384z",
                "duration": 600
            },
            {
                "path": "M491.099,0.005H20.901C9.374,0.005,0,9.368,0,20.914v470.181c0,11.546,9.374,20.9,20.901,20.9h470.198   c11.546,0,20.901-9.354,20.901-20.9V20.914C512,9.368,502.645,0.005,491.099,0.005z M441.325,238.695   c-11.03,68.999-47.068,131.241-47.068,131.241l-66.789-16.84l-2.928-0.728c43.422-59.94,78.116-138.368,45.89-156.506   c-21.453-12.052-64.377,13.184-96.53,41.368c10.367,10.34,18.746,19.823,24.123,27.3c23.754,33.072,31.784,69.589-3.112,82.663   c-8.268,3.094-26.517,6.105-38.91,6.105c-12.394,0-30.661-3.011-38.928-6.105c-34.878-13.074-26.867-49.591-3.094-82.663   c5.378-7.477,13.756-16.96,24.123-27.3c-32.151-28.184-75.076-53.421-96.528-41.368c-32.226,18.138,2.467,96.566,45.87,156.506   l-2.91,0.728l-66.808,16.84c0,0-36.02-62.242-47.05-131.241c-10.828-67.72,7.807-108.158,64.653-93.694   c37.216,9.483,85.26,43.624,120.672,75.334c35.411-31.71,83.454-65.851,120.671-75.334   C433.517,130.536,452.134,170.975,441.325,238.695z",
                "duration": 3600
            }
        ],
        "dimensions": {
            "width": 512,
            "height": 512
        }
    }
};

/* 
 Setup and Paint your lazyline! 
*/ 
$(document).ready(function(){
$('#lazylinepainter').lazylinepainter({
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#3aabd2"
  }).lazylinepainter('paint');
});

// [end] Lazy Line Painterによって生成


// パスの描画が終わったらpng画像をフェードイン
setTimeout(function() {
    $('.logo').fadeTo(1000, 1);
    $('#lazylinepainter').fadeOut('fast');
}, 2800);

HTML

CSS

.lazylinepainter_wrap {
  margin-top: 40px;
  width: 100%;
  height: 256px;
  background-color: #ffffff;
  padding: 100px 0;
  position: relative;
}
.lazylinepainter {
  width: 256px;
  height: 256px;
  position: absolute;
  left: 50%;
  margin-left: -128px;
  top: 100px;
  z-index: 100;
}
.logo {
  display: none;
  position: absolute;
  width: 256px;
  height: 256px;
  position: absolute;
  left: 50%;
  margin-left: -128px;
  top: 100px;
  z-index: 200;
}