JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="top left">
      <a href="http://www.subpixel.net">
        <svg id="logo-text" xmlns="http://www.w3.org/2000/svg" x=0px y=0px width=162px height=52px viewBox="0 0 162 42.17">
          <defs><style>.letter{fill:#fff;}</style></defs>
          <path class="letter s" d="M3.93,26.11c2.54,4.41,9.21,4.79,9.4.77,0-1.82-2.16-2.35-3.88-2.73-3.5-.67-8.82-2.06-8.82-7.67s5-7.58,9.25-7.58A11.85,11.85,0,0,1,18,12.45L14.81,15.9c-2.73-2.73-8.68-3-9,.14C5.66,18.25,8.29,19,10.36,19.3c4,0.67,8.15,2.21,8.2,7.48,0,9.64-14.62,10.45-18.55,1.87Z"/>
          <path class="letter u" d="M41.57,32.49C33.37,36,22.1,35.7,22.1,25.92V9.23h5.27V26c0.19,4.12,5.85,4.79,9,3.12V9.23h5.23V32.49Z"/>
          <path class="letter b" d="M51.68,0.08V9.86c5.66-2.73,14.38.24,14.34,7.58v9.16C65.2,36.8,53.65,35.89,46.41,33V0.08h5.27Zm0,29.77c2.83,1.25,8.82,1.1,9.06-3.26v-9.4c-0.38-4-6.09-4.7-9.06-2.83V29.85Z"/>
          <path class="letter p" d="M71,10.72c7-3.16,19.61-3.69,19.61,6.66v8.53c0,7.34-8.63,9.88-14.34,7.48v8.77H71V10.72ZM76.28,29c3.45,1.15,8.68.91,9.06-3.12V17.29c0-4.36-5.66-4.7-9.06-3.16V29Z"/>
          <path class="letter i" d="M96,9.19V34.07h5.27V9.19H96Z"/>
          <path class="letter i" d="M101.89,3.16a0.43,0.43,0,0,1,0,.61l-3,3a0.43,0.43,0,0,1-.61,0l-3-3a0.43,0.43,0,0,1,0-.61l3-3a0.43,0.43,0,0,1,.61,0Z" />
          <path class="letter x" d="M126.14,9.23L118,21.65c2.59,3.79,5.56,8.73,8.15,12.42H120.1l-5.23-8.29c-0.72,1.15-1.49,2.49-5.32,8.29h-6.14l8.44-12.42c-2.59-3.79-5.9-8.73-8.44-12.42h6.14l5.32,8.34c1.77-2.68,3.6-5.75,5.23-8.34h6Z"/>
          <path class="letter e" d="M146.95,29.51A10.36,10.36,0,0,1,138,34.6c-4.89,0-9.83-2.83-9.83-8.53V17.34c0-5.8,4.94-8.53,9.83-8.53s9.68,2.73,9.68,8.53V24.1H133.52v2c-0.1,4.08,7,5.08,9,.91Zm-4.31-12.27c0-4.65-9.3-4.7-9.11.1v2.4h9.11V17.24Z"/>
          <path class="letter l" d="M162,34.26c-6.14,0-9.59-3.26-9.59-8.53V0.12h5.27v25.6c0,2,1.34,3.6,4.31,3.6v4.94Z"/>
        </svg>
      </a>
    </h1>
    <div id=container>
      <svg id=logo...

CSS

html {
  padding: 0;
  height: 100%; }

body {
  padding: 0;
  margin: 0;
  background: #222228;
  overflow: hidden;
  height: 100%;
  position: relative; }

#container {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0; }

#logo {
  position: relative;
  left: -175px;
  top: -172px; }

h1 {
  top: 20px;
  left: 20px;
  position: absolute;
  margin: 0;
  display: block;
}

#logo-text .letter {
  -webkit-animation: slidein-top .5s 0s cubic-bezier(0.64, 1.11, 0.58, 1.08) forwards;
  -ms-animation: slidein-top .5s 0s cubic-bezier(0.64, 1.11, 0.58, 1.08) forwards;
  animation: slidein-top .5s 0s cubic-bezier(0.64, 1.11, 0.58, 1.08) forwards;
  -webkit-transform: translateY(-200px);
  transform: translateY(-200px);
}

#logo-text .s {
  animation-delay: .4s;
  -ms-animation-delay: .4s;
  -webkit-animation-delay: .4s;
}

#logo-text .u {
  animation-delay: .5s;
  -ms-animation-delay: .5s;
  -webkit-animation-delay: .5s;
}

#logo-text .b {
  animation-delay: .6s;
  -ms-animation-delay: .6s;
  -webkit-animation-delay: .6s;
}

#logo-text .p {
  animation-delay: .7s;
  -ms-animation-delay: .7s;
  -webkit-animation-delay: .7s;
}

#logo-text .i {
  animation-delay: .8s;
  -ms-animation-delay: .8s;
  -webkit-animation-delay: .8s;
}

#logo-text .x {
  animation-delay: .9s;
  -ms-animation-delay: .9s;
  -webkit-animation-delay: .9s;
}

#logo-text .e {
  animation-delay: 1.0s;
  -ms-animation-delay: 1.0s;
  -webkit-animation-delay: 1.0s;
}

#logo-text .l {
  animation-delay: 1.1s;
  -ms-animation-delay: 1.1s;
  -webkit-animation-delay: 1.1s;
}

h1 a {
  display: block; }

@-webkit-keyframes slidein-top {

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

@-ms-keyframes slidein-top {

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

@keyframes slidein-top {

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

#Cells > g > g {
 ...

JavaScript

var animationsToComplete = {'CellRed' : true, 'CellGreen' : true, 'CellBlue' : true};

  function handleAnimationComplete(event) {
    delete animationsToComplete[event.target.id]

    // if animationsToComplete.keys().length !== 0
    for (var key in animationsToComplete) {
      return;
    }

    var cells = document.getElementById('Cells');
    cells.setAttribute('class', 'interactive');

    window.removeEventListener('webkitAnimationEnd', handleAnimationComplete, false);
  }

  window.addEventListener('webkitAnimationEnd', handleAnimationComplete, false);