SVG Animation

by Jim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="controls">
        <button class="play-drawing">Draw the Anchor</button>
        </div>

        <div id="anime-demo">
        <svg width="400" height="631"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1" class="lines"><path d="M182.961 0.223 L 181.958 0.347 181.958 4.954 L 181.958 9.561 186.584 9.561 L 191.210 9.561 191.210 4.780 L 191.210 0.000 187.587 0.049 C 185.594 0.077,183.512 0.155,182.961 0.223 " ></path><path d="M199.708 4.460 C 199.433 10.013,199.025 9.561,204.303 9.561 C 209.559 9.561,209.098 10.067,209.098 4.292 L 209.098 0.000 204.513 0.000 L 199.929 0.000 199.708 4.460 " ></path><path d="M217.625 1.928 C 217.518 2.818,217.429 4.882,217.428 6.515 L 217.425 9.483 218.389 9.676 C 218.919 9.782,220.980 9.869,222.969 9.869 L 226.586 9.869 226.786 7.509 C 226.896 6.212,226.985 4.151,226.985 2.930 L 226.985 0.710 223.978 0.511 C 222.325 0.401,220.262 0.311,219.395 0.310 L 217.819 0.308 217.625 1.928 " ></path><path d="M166.230 0.904 C 164.958 1.000,163.922 1.218,163.928 1.388 C 164.037 4.308,164.492 9.860,164.643 10.101 C 164.823 10.390,173.262 10.014,173.587 9.703 C 173.648 9.645,173.596 7.577,173.473 5.107 L 173.248 0.617 170.896 0.672 C 169.602 0.703,167.502 0.807,166.230 0.904 " ></path><path d="M235.518 1.621 C 235.426 2.002,235.254 4.126,235.137 6.342 L 234.923 10.371 238.886 10.773 C 241.066 10.993,243.001 11.232,243.186 11.303 C 243.446 11.403,244.893 3.536,244.875 2.124 C 244.874 2.020,243.103 1.769,240.941 1.565 C 238.778 1.362,236.711 1.136,236.347 1.063 C 235.859 0.965,235.642 1.111,235.518 1.621 " ></path><path d="M154.356 2.002 C 154.187 2.059,152.442 2.337,150.479 2.620 C 148.515 2.903,146.726 3.248,146.503 3.386 C 145.894 3.762,147.660 12.736,148.295 12.492 C 148.537 12.399,150.450 12.083,152.547 11.790 C 155.979 11.310,156.360 11.195,156.358 10.640 C 156.357 10.301,156.149 8.363,155.896 6.334 C 155.643...

CSS

body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

#anime-demo {
  position: relative;
}

svg {
  padding: 10px;
}

button {
  background: orange;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: blue;
}

JavaScript

// Sort paths via degrees (clockwise)
document.querySelectorAll("svg").forEach(function(svgE){
  var centerCoords = [ svgE.getBoundingClientRect().width / 2,
  	svgE.getBoundingClientRect().height / 2
  ];
  var pathsByDeg = [];
  svgE.querySelectorAll("path").forEach(function(pE){
    var coords = (/^M([0-9\.]+)\s+([0-9\.]+)+/.exec(pE.getAttribute("d"))).splice(1,2).map(parseFloat);
    var rad = -Math.atan2(coords[1]-centerCoords[1], coords[0]-centerCoords[0]);
    var deg = ((rad / Math.PI * 180) + (rad > 0 ? 0 : 360)) - 90;
    deg = deg < 0 ? deg + 360 : deg;
    pathsByDeg.push([deg, pE]);
  });
  pathsByDeg.sort(function(a, b){
    return a[0] - b[0];
  });
  pathsByDeg.reduce(function(c,n){
    c[1].parentNode.insertBefore(n[1],c[1]);
    return n;
  }, pathsByDeg[0]);

});
// Setup path animation
var lineDrawing = anime({
  targets: 'svg path',
  easing: 'easeInOutCubic',
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 1000,
  delay: function(el, i) { return i * 20 },
  autoplay: false,
  begin: function(anim) {
    anim.animatables.forEach(function(elem){
      var t = elem.target;
      t.setAttribute("stroke", "#4a56f2");
      t.setAttribute("fill", "none");
    });
  }
});
document.querySelector('.play-drawing').onclick = lineDrawing.restart;