JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100vh" viewBox="0 0 768 1024">
  <rect x="0" y="0" width="768" height="1024" fill="#888086" />
  <g transform="scale(4.000000) translate(0.5 0.5)">
    <polygon fill="#00001c" fill-opacity="0.501961" points="207,18 -16,76 120,207" />
    <polygon fill="#ffffff" fill-opacity="0.501961" points="10,271 -16,158 149,192" />
    <polygon fill="#ffffff" fill-opacity="0.501961" points="83,47 -16,0 207,-1" />
    <polygon fill="#ffffff" fill-opacity="0.501961" points="-16,271 107,244 5,128" />
    <polygon fill="#1a173b" fill-opacity="0.501961" points="67,181 207,90 -16,97" />
    <polygon fill="#ffe597" fill-opacity="0.501961" points="172,61 128,59 165,94" />
    <polygon fill="#ffffff" fill-opacity="0.501961" points="34,255 146,167 22,204" />
    <polygon fill="#fffff7" fill-opacity="0.501961" points="56,41 207,20 51,-16" />
    <polygon fill="#ffdd7a" fill-opacity="0.501961" points="-16,-6 43,-16 -5,95" />
    <polygon fill="#ad9688" fill-opacity="0.501961" points="65,244 193,271 191,103" />
    <polygon fill="#fffff6" fill-opacity="0.501961" points="26,229 35,136 -16,138" />
    <polygon fill="#4d4448" fill-opacity="0.501961" points="72,83 38,-9 -16,153" />
    <polygon fill="#040025" fill-opacity="0.501961" points="191,26 159,128 207,91" />
    <polygon fill="#050431" fill-opacity="0.501961" points="99,183 32,167 41,130" />
    <polygon fill="#f9fffc" fill-opacity="0.501961" points="114,180 61,271 9,177" />
    <polygon fill="#ffefce" fill-opacity="0.501961" points="167,140 207,176 198,94" />
    <polygon fill="#1e1943" fill-opacity="0.501961" points="171,27 46,55 78,118" />
    <polygon fill="#877777" fill-opacity="0.501961" points="64,271 109,188 195,163" />
    <polygon fill="#302c49" fill-opacity="0.501961" points="150,165 146,74 -16,125" />
    <polygon fill="#9f8169" fill-opacity="0.501961" points="20,78 50,-16 47,83" />
    <polygon fill="#feffff" fill-opacity="0.501961" points="175,-5 97,37 52,20"...

CSS

body {
  margin: 0;
  background: white;
}

svg {
  display: block;
  margin: 0 auto;
}

svg polygon {
  opacity: 0;
  transition: all .2s;
}

svg polygon.show {
  opacity: 1;
}

JavaScript

var polygons = [].slice.call(document.querySelectorAll('polygon'))

tick(0)

function tick(i) {
  if (i >= polygons.length) {
    return
  }
  polygons[i].classList.add('show')
  setTimeout(function() {
    tick(i + 1)
  }, 1000 / (i + 1))
}