JSFiddle - React, Tailwind, and code Playground

by Przemek Misztal

HTML

<button id="launch">Do Magic!</button>
<div id="aero">
<svg width="1920" height="1080">
<g transform="translate(0.000000,191.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
 <path class="dik" stroke="#000" stroke-width="4.3" fill="none" d="M6052 1553 c4 -26 -113 -31 -158 -7 -41 22 -64 13 -64 -25 0 -22 8
-35 25 -47 32 -21 31 -26 -2 -41 -16 -7 -44 -26 -64 -43 l-37 -30 6 -66 5 -66
-42 7 c-50 8 -77 -11 -107 -76 -14 -33 -16 -46 -7 -70 l11 -29 -189 0 -189 0
0 58 c0 68 -11 82 -62 82 -25 0 -45 7 -58 20 -16 16 -35 20 -102 22 -46 0 -94
0 -108 -1 -20 -1 -22 0 -10 9 13 10 13 11 0 7 -9 -2 -14 -13 -12 -25 2 -11 -2
-23 -8 -27 -14 -9 -13 -41 4 -73 7 -15 17 -37 20 -49 l7 -23 -730 0 c-680 0
-731 1 -731 17 0 15 -2 14 -14 -3 -8 -10 -17 -16 -20 -13 -9 9 4 39 17 39 6 0
28 8 49 18 35 16 38 20 33 49 -5 28 -2 33 32 50 30 14 39 24 41 49 4 42 -39
78 -82 70 -21 -4 -33 -1 -42 11 -12 17 -13 17 -14 -3 0 -17 -8 -23 -38 -28
-40 -6 -82 -34 -82 -55 0 -19 15 -12 25 12 23 52 107 22 108 -38 0 -33 -12
-45 -55 -56 l-33 -8 33 3 c29 2 32 0 26 -18 -4 -12 -7 -25 -7 -31 0 -14 -47
-15 -47 -1 0 6 -3 21 -6 33 -5 18 0 25 30 40 30 14 36 22 34 42 -5 38 -33 50
-59 24 -22 -22 -19 -43 7 -43 20 0 18 -18 -3 -22 -10 -2 -24 3 -31 12 -11 13
-12 12 -4 -5 5 -11 12 -35 16 -54 3 -19 13 -43 22 -52 21 -23 10 -39 -27 -39
-30 0 -38 20 -20 48 6 10 10 9 14 -7 3 -12 12 -21 21 -21 13 0 13 3 -4 20 -11
11 -20 28 -20 37 -1 10 -10 47 -20 83 -15 48 -19 55 -15 25 4 -27 -2 -62 -18
-110 l-24 -70 -44 0 -44 0 -3 58 c-2 31 -8 57 -13 57 -6 0 -8 -9 -4 -19 5 -16
-3 -22 -49 -35 -31 -9 -69 -19 -86 -22 -16 -4 -31 -9 -31 -13 -4 -15 -6 -147
-2 -156 2 -6 46 -9 113 -7 114 3 121 1 100 -39 -10 -17 -22 -19 -110 -19 -71
0 -100 3 -100 12 0 9 -3 9 -12 0 -7 -7 -31 -12 -55 -12 l-43 0 0 125 0 125 40
0 40 0 2 -107 2 -108 5 100 c5 77 9 101 21 104 63 17 159 51 133 47 -18 -3
-33 -1 -33 4 0 6 12 11 28 11 22 1 23 2 5 6 -14 3 -20 9 -16 19 5 15 -125 222
-161 256 -13 12 -35 18 -66 18 -41 0 -52 -6 -106 -52 -134 -116 -164 -151
-163 -183 2 -26 2 -27 6 -5 9...

CSS

#aero {
visibility: hidden;
}

JavaScript

var button=document.getElementById("launch");
button.addEventListener("click", draw);
function draw() {
document.getElementById('aero').style.visibility = 'visible';
var path = document.querySelector('.dik');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
  'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 20s ease-in';
// Go!
path.style.strokeDashoffset = '0';
}