SVG Path animation

Place stackoverflow favicon at the end of the animating stroke

by Brett Gaynor

HTML

<svg id="path" viewBox="0 0 200 125">
	<g fill="none" stroke="#fff" stroke-width="7.408">
					<path d="M14.936 17.884C14.936 17.884 14.9383096998 18.960717497 14.9422011155 20.7747866979C14.9439652514 21.5971775049 14.9460544575 22.5711069856 14.948400908 23.6649566406C14.9503095825 24.554727319 14.9523884677 25.5238454819 14.9546010583 26.5552933602C14.9565706672 27.4734699384 14.9586462274 28.4410381048 14.9608019882 29.4459934888C14.9628063481 30.3803700747 14.9648800391 31.3470668188 14.9670023635 32.336435108C14.9690305396 33.2819141452 14.9711031301 34.248097883 14.9732020714 35.2265656514C14.9752487293 36.1806603032 14.9773204415 37.1464346302 14.9794004612 38.1160816814C14.981463999 39.0780452825 14.9835357131 40.0438204763 14.9855992516 41.0057844311C14.9876792593 41.9754258968 14.9897509604 42.941195045 14.9917976083 43.8952850683C14.9938972118 44.874061503 14.9959704488 45.8405466154 14.9979992388 46.7863117964C15.0001210434 47.7754378183 15.0021942322 48.7419004473 15.0041981219 49.676057823C15.0063537864 50.6809683458 15.008429257 51.64849469 15.010398786 52.5666340468C15.0126115066 53.5981425649 15.0146905078 54.5673147913 15.016599278 55.4571301002C15.0189463108 56.5512511741 15.0210359667 57.5253903274 15.0228003682 58.3479049678C15.0266908872 60.1615561859 15.029 61.238 15.029 61.238C15.9978835449 61.2218195801 16.9668259421 61.2090595148 17.9358178218 61.1991818568C18.9045584068 61.1893067605 19.8733484487 61.1823125767 20.842178585 61.1776617766C21.8107721904 61.173012112 22.7794058706 61.170704687 23.74807027 61.1702023664C24.7167515614 61.169700037 25.6854635731 61.171002875 26.6541969489 61.173573717C27.6229485175 61.1761446073 28.5917214511 61.1799835492 29.5605063928 61.1845533493C30.5293110445 61.1891232423 31.498127705 61.1944240231 32.466947017 61.1999184653C33.4357286837 61.2054126941 34.4045130017 61.2111005692 35.3732906149 61.216444927C36.3421569422 61.2217897742 37.3110165634 61.2267910411 38.2798601199 61.2309114164C39.248729958...

CSS

svg {
   position: absolute;
   top: 25px;
   left: 15px;
   width: 200px;
   height: 125px;
}

img {
  position: absolute;
  width: 20px;
}

body {
  background: #333;
}

JavaScript

function drawSVGPaths(id) {
  var _parentElement = document.getElementById(id);
  [..._parentElement.querySelectorAll('path')].forEach((path,i)=>{
    var totalLength = path.getTotalLength();
    path.style['stroke-dashoffset'] = totalLength;
    path.style['stroke-dasharray'] = totalLength + ' ' + totalLength;
    console.log(totalLength);
    $(path).animate({
      'stroke-dashoffset': 0
    }, {
      duration: 1500,
      easing: "swing",
      progress: (prom, now, ms)=>{
      	//console.log('PROM: ', prom);
        var pt = path.getPointAtLength(now*totalLength);
        //console.log(pt);
        pt.x = Math.round(pt.x);
        pt.y = Math.round(pt.y);
        console.log(`X ${pt.x}, Y: ${pt.y}`);
        document.getElementById("image"+i).style.transform = 'translate3d('+pt.x+'px,'+pt.y+'px, 0)';
      }
    });
  });
}

drawSVGPaths("path");