Codepad Logo Animation

HTML
<div id="codepad-logo"> <div id="codepad-fill"> <img src="https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0"> </div> </div>
CSS
body { margin: 0; background-color: #333; } #codepad-logo { margin: 200px auto; position: relative; } #codepad-fill { display: none; position: absolute; top: 0; left: 0; } #codepad-fill img { width: 100%; height: 100%; }
JAVASCRIPT
// SVG // ====== var pathObj = { "codepad-logo": { "strokepath": [ { "path": "M134.62,3.31L58.4,79.53a2.39,2.39,0,0,1-3.38,0h0L29.71,54.19a2.39,2.39,0,0,1,0-3.38h0L55,25.5a2.39,2.39,0,0,1,3.38,0h0l6.17,6.17a2.39,2.39,0,0,0,3.38,0h0l4.49-4.49a4.78,4.78,0,0,0,0-6.74L55.34,3.31a4.78,4.78,0,0,0-6.74,0L2.74,49.12a4.78,4.78,0,0,0,0,6.74L48.6,101.71a4.78,4.78,0,0,0,6.74,0L131.55,25.5a2.39,2.39,0,0,1,3.38,0h0l25.29,25.29a2.39,2.39,0,0,1,0,3.38h0L134.95,79.48a2.39,2.39,0,0,1-3.38,0h0l-6.17-6.17a2.39,2.39,0,0,0-3.38,0h0l-4.49,4.49a4.78,4.78,0,0,0,0,6.74l17.17,17.17a4.78,4.78,0,0,0,6.74,0l45.86-45.86a4.78,4.78,0,0,0,0-6.74L141.4,3.31a4.78,4.78,0,0,0-6.76,0Z", "duration": 4000 } ], "dimensions": { "width": 190, "height": 105 } } }; // PAINT // ====== $(document).ready(function(){ $('#codepad-logo').lazylinepainter( { "svgData": pathObj, "strokeWidth": 1, "strokeColor": "#fff", "onComplete": function(){ $("#codepad-fill").fadeIn("slow"); $(this).lazylinepainter('erase'); } }).lazylinepainter('paint'); });
Expand for more options Login