<button>ANIMATE!</button>
<svg viewBox="0 0 189.11873 215.10544" width="400" height="400" id="example">
  <defs id="defs49">
    <linearGradient id="linearGradient3244" y2="160.8" gradientUnits="userSpaceOnUse" x2="737.16998" gradientTransform="matrix(1.0892,0,0,1.0892,-328.27,156.42)" y1="159.91" x1="597.71997" inkscape:collect="always">
      <stop id="stop3174" style="stop-color:#ffbcb3" offset="0" />
      <stop id="stop3176" style="stop-color:#c8ffbf" offset="1" />
    </linearGradient>
    <linearGradient id="linearGradient3246" y2="171.92999" gradientUnits="userSpaceOnUse" x2="765.90997" gradientTransform="matrix(1.0892,0,0,1.0892,-328.27,156.42)" y1="171.92999" x1="563.89001" inkscape:collect="always">
      <stop id="stop3198" style="stop-color:#ec1a00" offset="0" />
      <stop id="stop3200" style="stop-color:#2fc500" offset="1" />
    </linearGradient>
  </defs>
  <g id="g3240" transform="translate(-327.44396,370.61064)">
    <path id="path2167" style="fill:#ffffff;stroke:#2fc500;stroke-width:8.8185997" d="m 422.42,-327.99 c 18.96,0.34 40.63,-6.23 41.6,-38.09 -8.76,-0.87 -34.18,3.84 -35.98,27.68 -1.29,17.48 -7.93,8.8 -10.65,-4.07 -4.14,1.28 -1.12,0.22 -6.6,2.32 13.56,21.96 7.09,33.36 9.7,33.16 2.91,-0.23 2.01,-10.38 1.93,-21 z"
    inkscape:connector-curvature="0" />
    <path id="path2165" style="fill:#ffffff;stroke:#ec1a00;stroke-width:14.78899956;stroke-linejoin:round" d="m 351.65,-289.46 c -32.21,29.23 -17.72,102.7 40.19,121.69 26.38,8.51 59.38,6.46 83.59,-11.81 19.87,-14.72 36.38,-36.23 33.41,-79.81 -1.69,-24.5 -38.31,-68.49 -86.37,-41.53 -13.24,-6.75 -38.55,-18.28 -70.82,11.46 z"
    inkscape:connector-curvature="0" />
  </g>
body {
  background: #fff;
  padding: 20px;
}

button {
  display: block;
  margin: 0 auto 20px;
  padding: 10px;
  font-size: 20px;
}

svg {
  display: block;
  margin: auto;
}
// custom stuff...
document.querySelector('button').addEventListener('click', function () {
  var svg = new Walkway({
    selector: '#example',
    duration: 3000
  });

  svg.draw();
}, false);

// walkway.js lib
!function(t,n){"function"==typeof define&&define.amd?define(["exports"],function(){n(t)}):n("object"==typeof exports?exports:t)}(this,function(t){"use strict";function n(t){var n=["path","line"],e=n.reduce(function(n,e){return n+t+" "+e+", "},"");return e.slice(0,-2)}function e(t){return this instanceof e?("string"==typeof t&&(t={selector:t}),t.selector?(this.opts=t,this.selector=t.selector,this.duration=t.duration||500,this.easing=s[t.easing]||s.easeInOutCubic,this.paths=this.getPaths(),this.setInitialStyles(),void(this.id=!1)):this.error("A selector needs to be specified")):new e(t)}function i(t,n,e){this.el=t,this.length=t.getTotalLength(),this.duration=n,this.easing=e,this.animationStart=null,this.animationStarted=!1}function a(t,n,e){this.el=t,this.length=o(t),this.duration=n,this.easing=e,this.animationStart=null,this.animationStarted=!1}function o(t){var n=t.getAttribute("x1"),e=t.getAttribute("x2"),i=t.getAttribute("y1"),a=t.getAttribute("y2");return Math.sqrt(Math.pow(n-e,2)+Math.pow(i-a,2))}var r=0;window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,window.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame,window.requestAnimationFrame||(window.requestAnimationFrame=function(t){var n=(new Date).getTime(),e=Math.max(0,16-(n-r)),i=window.setTimeout(function(){t(n+e)},e);return r=n+e,i}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)});var s={linear:function(t){return t},easeInQuad:function(t){return t*t},easeOutQuad:function(t){return t*(2-t)},easeInOutQuad:function(t){return.5>t?2*t*t:-1+(4-2*t)*t},easeInCubic:function(t){return t*t*t},easeOutCubic:function(t){return--t*t*t+1},easeInOutCubic:function(t){return.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easeInQuart:function(t){return t*t*t*t},easeOutQuart:function(t){return 1- --t*t*t*t},easeInOutQuart:function(t){return.5>t?8*t*t*t*t:1-8*--t*t*t*t},easeInQuint:function(t){return t*t*t*t*t},easeOutQuint:function(t){return 1+--t*t*t*t*t},easeInOutQuint:function(t){return.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t}};e.prototype.error=function(t){console.log("Walkway error: "+t)},e.prototype.getPaths=function(){var t=this,e=n(this.selector),o=document.querySelectorAll(e);return o=Array.prototype.slice.call(o),o.map(function(n){return"path"===n.tagName?new i(n,t.duration,t.easing):"line"===n.tagName?new a(n,t.duration,t.easing):void 0})},e.prototype.setInitialStyles=function(){this.paths.forEach(function(t){t.el.style.strokeDasharray=t.length+" "+t.length,t.el.style.strokeDashoffset=t.length})},e.prototype.draw=function(t){var n,e=this.paths.length;if(0===e)return t&&"function"==typeof t&&t(),window.cancelAnimationFrame(this.id);for(;e--;){n=this.paths[e];var i=n.update();i&&this.paths.splice(e,1)}this.id=window.requestAnimationFrame(this.draw.bind(this,t))},i.prototype.update=function(){this.animationStarted||(this.animationStart=Date.now(),this.animationStarted=!0);var t=this.easing((Date.now()-this.animationStart)/this.duration);return t>=1?!0:(this.el.style.strokeDashoffset=Math.floor(this.length*(1-t)),!1)},a.prototype.update=function(){this.animationStarted||(this.animationStart=Date.now(),this.animationStarted=!0);var t=this.easing((Date.now()-this.animationStart)/this.duration);return t>=1?!0:(this.el.style.strokeDashoffset=Math.floor(this.length*(1-t)),!1)},t.Walkway=e});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.