JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<button onclick="rerun();">Again!</button>

<div id="myobj" width="50%" height="100%">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="220px" y="200px"
	 viewBox="0 0 1520.5 630.5" enable-background="new 0 0 152.5 63.5" xml:space="preserve">
<path transform="scale(0.5,-0.5) translate(3400,-400)" id="i0" fill="none" stroke="blue"  glyph-name="eight" unicode="8" horiz-adv-x="10" 
d="M188, 293q-45, 39, -45, 75q0, 50, 52, 86.5t117.5, 36.5t102, -25.5t36.5, -66.5q0, -69, -117, -105q57, -23, 57, -76q0, -82, -88, -145.5t-174, -63.5q-62, 0, -98.5, 32t-36.5, 86t53.5, 100t140.5, 66zM283, 322q35, 10, 56, 32.5t21, 51.5q0, 40, -53, 40q-32, 0, -53, -16.5t-21, -42.5q0, -42, 50, -65z,
M230, 266q-63, -14, -105.5, -49t-42.5, -71.5t27, -60.5t70.5, -24t84.5, 40.5t41, 85.5q0, 27, -18.5, 49.5t-56.5, 29.5z" />
<path transform="scale(0.5,-0.5) translate(3400,-400)" id="i1" fill="none" stroke="blue"  
d="M188, 293q-45, 39, -45, 75q0, 50, 52, 86.5t117.5, 36.5t102, -25.5t36.5, -66.5q0, -69, -117, -105q57, -23, 57, -76q0, -82, -88, -145.5t-174, -63.5q-62, 0, -98.5, 32t-36.5, 86t53.5, 100t140.5, 66zM283, 322q35, 10, 56, 32.5t21, 51.5q0, 40, -53, 40q-32, 0, -53, -16.5t-21, -42.5q0, -42, 50, -65z,
M230, 266q-63, -14, -105.5, -49t-42.5, -71.5t27, -60.5t70.5, -24t84.5, 40.5t41, 85.5q0, 27, -18.5, 49.5t-56.5, 29.5z" />
<path transform="scale(0.5,-0.5) translate(3400,-400)" id="i2" fill="none" stroke="blue"  
d="M188, 293q-45, 39, -45, 75q0, 50, 52, 86.5t117.5, 36.5t102, -25.5t36.5, -66.5q0, -69, -117, -105q57, -23, 57, -76q0, -82, -88, -145.5t-174, -63.5q-62, 0, -98.5, 32t-36.5, 86t53.5, 100t140.5, 66zM283, 322q35, 10, 56, 32.5t21, 51.5q0, 40, -53, 40q-32, 0, -53, -16.5t-21, -42.5q0, -42, 50, -65z,
M230, 266q-63, -14, -105.5, -49t-42.5, -71.5t27, -60.5t70.5, -24t84.5, 40.5t41, 85.5q0, 27, -18.5, 49.5t-56.5, 29.5z" />
<path transform="scale(0.5,-0.5) translate(400,-400)" id="i3" fill="none" stroke="blue"  
d="M637 181l-1 -39l-55...

CSS

button {
  position: absolute;
  top: 10px;
  right: 5px;
}

JavaScript

var current_frame, total_frames, path, length, handle, myobj;

myobj = document.getElementById('myobj').cloneNode(true);

var init = function() {
  current_frame = 0;
  total_frames = 240;
  path = new Array();
  length = new Array();
  for(var i=0; i<5;i++){
    path[i] = document.getElementById('i'+i);
    l = path[i].getTotalLength();
    length[i] = l;
    path[i].style.strokeDasharray = l + ' ' + l; 
    path[i].style.strokeDashoffset = l;
  }
  handle = 0;
}
 
 
var draw = function() {
   var progress = current_frame/total_frames;
   if (progress > 1) {
     window.cancelAnimationFrame(handle);
   } else {
     current_frame++;
     for(var j=0; j<path.length;j++){
	     path[j].style.strokeDashoffset = Math.floor(length[j] * (1 - progress));
     }
     handle = window.requestAnimationFrame(draw);
   }
};

init();
draw();

var rerun = function() {
  var old = document.getElementsByTagName('div')[0];
  old.parentNode.removeChild(old);
  document.getElementsByTagName('body')[0].appendChild(myobj);
  init();
  draw();
};