JSFiddle - React, Tailwind, and code Playground

HTML

<div id='myobj' width='100%' 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="0px" y="0px"

	 width="163.215px" height="13.44px" viewBox="0 0 163.215 13.44" enable-background="new 0 0 163.215 13.44" xml:space="preserve">

<g>

	<path stroke="#ffffff" id="i0"...

CSS

html, body {
  	height: 100%;
  	width: 100%;
  	padding: 0;
  	margin: 0;
 	background:black;
}

JavaScript

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

	myobj = document.getElementById('myobj').cloneNode(true);
	
	var init = function() {
	  current_frame = 0;
	  total_frames = 60;
	  path = new Array();
	  length = new Array();
	  for(var i=0; i<10;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();