#wrap
 -289.times do
  .cell
   .inner.inner-0
   .inner.inner-1

body {
  display: grid;
  height: 100vh;
  place-items: center;
  overflow:hidden;
  background: linear-gradient(
    to bottom,
    var(--bg) calc(75% + 25px),
    darken(#010824, 1.5%) 100%
  );
  --color0: var(--bg);
  --color1: #38f1ba;
  --color2: #f4a1e9;
  --color3: #5e63ff;
  --color4: #ffb481;
  --color5: #fff;
  --color6: #38f1ba;
  --color7: #f4a1e9;
  --color8: #5e63ff;
  --color9: #ffb481;
  --color10: #fff;
  --clip1: polygon(0 0, 0 100%, 100% 0);
  --clip2: polygon(
    20% 0%,
    20% 100%,
    40% 100%,
    40% 0%,
    60% 0%,
    60% 100%,
    80% 100%,
    80% 0%
  );
  --clip3: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  --clip4: polygon(0 0, 0% 100%, 50% 50%);
  --clip5: circle(50% at 50% 50%);
  --clip6: polygon(0 50%, 50% 50%, 50% 100%, 0% 100%);
  --clip7: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%);

  --bg: #010824;
}

$lr: (44, 60, 189, 205, 109, 93, 158, 174, 278);
$ll: (47, 65, 202, 238, 265, 196, 178, 160, 167, 95, 131, 149);
$ur: (261, 233, 215, 251, 197, 179, 161, 143, 114, 96, 132);
$ul: (243, 230, 138, 276, 133);
$tt: (142, 244);
$tr: (283);
$fpd: (158, 174, 173, 244, 245, 246, 247);
$fpu: (77);
$fpl: (286);
$lg: (62, 127, 175, 207, 211, 239, 182, 111, 262, 270);
$lgr: (281, 194, 165, 201, 271, 288, 80, 241);
$n: (
  35,
  36,
  37,
  38,
  39,
  40,
  41,
  42,
  43,
  48,
  49,
  50,
  51,
  52,
  53,
  54,
  55,
  56,
  57,
  58,
  59,
  66,
  68,
  67,
  69,
  70,
  71,
  72,
  73,
  74,
  75,
  76,
  83,
  84,
  85,
  86,
  87,
  88,
  89,
  90,
  91,
  92,
  100,
  101,
  102,
  103,
  104,
  105,
  106,
  107,
  108,
  117,
  118,
  119,
  120,
  121,
  122,
  123,
  124,
  125,
  134,
  135,
  136,
  137,
  138,
  139,
  140,
  141,
  150,
  151,
  152,
  153,
  154,
  155,
  156,
  157,
  168,
  169,
  170,
  171,
  172,
  185,
  186,
  187,
  188,
  203,
  204,
  214,
  221,
  231,
  232,
  248,
  249,
  250,
  260,
  266,
  267,
  268,
  277,
  284,
  285
);

body.shift {
  #wrap {
    .cell {
      .inner {
        transform: translateY(200%) translateZ(0px);
      }
      &:nth-of-type(3n) {
        .inner {
          transform: translateX(300%) translateZ(0px);
        }
      }
      &:nth-of-type(7n) {
        .inner {
          transform: translateY(-400%) translateZ(0px);
        }
      }
    }
  }
}

body.scale {
  #wrap {
    .cell {
      transition: transform 0.75s cubic-bezier(0.87, 0, 0.13, 1);
      transform: scale(0.75) translateZ(0px);
    }
  }
}

body {
  &:after {
    content: "";
    position: absolute;
    width: 150vmin;
    height: 90vmin;
    left: 50%;
    top: 50%;
    transform:scale(0.75) translate(-50%, calc(-37.5% + 55vmin));
    z-index: 9;
    backdrop-filter: blur(6px);
  }
}

#wrap {
  width: 90vmin;
  height: 90vmin;
  display: grid;
  transform: scale(0.75) translate(0, -12.5%) translateZ(0px);
  -webkit-box-reflect: below 25px
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0.25) 50%
    );
  grid-template-columns: repeat(17, 1fr);
  grid-template-rows: repeat(17, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  position: relative;
  .cell {
    --ur: linear-gradient(45deg, transparent 50%, #000 50%);
    --ul: linear-gradient(-45deg, transparent 50%, #000 50%);
    --ll: linear-gradient(-135deg, transparent 50%, #000 50%);
    --lr: linear-gradient(135deg, transparent 50%, #000 50%);
    --td: linear-gradient(to bottom, #000, #000);
    position: relative;
    overflow: hidden;
    transform: scale(1.0125) translateZ(0px);
    transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1);
    @for $i from 2 through 10 {
      &:nth-of-type(#{$i}n) {
        .inner {
          transition-delay: #{$i/5}s;
        }
      }
      &:nth-of-type(#{(11 - $i)}n) {
        .inner {
          transition-duration: #{($i/12) + 0.35}s;
        }
      }
    }
    &:nth-of-type(3n) {
      .inner {
        &:last-of-type {
          top: 0;
          left: -300%;
        }
      }
    }
    &:nth-of-type(7n) {
      .inner {
        &:last-of-type {
          top: 400%;
          left: 0;
        }
      }
    }
    .inner {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: var(--color-a);
      transform: translateY(0px) translateZ(0px);
      transition: transform 0.5s cubic-bezier(0.87, 0, 0.13, 1);
      &:before,
      &:after {
        transform: translateZ(0px);
      }
      &:last-of-type {
        top: -200%;
      }
    }
    .inner:before,
    .inner:after {
      content: "";
      opacity: 1;
      position: absolute;
      width: 100%;
      height: 100%;
      background: var(--color-b);
      clip-path: var(--clip-a);
      transform: rotate(calc(var(--rotate-1) * 1deg));
    }
    .inner:after {
      background: var(--color-c);
      transform: rotate(calc(var(--rotate-1) * 1deg));
    }
    &:nth-of-type(82) {
      clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0);
    }
    &:nth-of-type(99) {
      clip-path: polygon(100% 50%, 100% 100%, 0 100%, 0 0, 50% 0);
    }
    @each $num in $lg {
      &:nth-of-type(#{$num}) {
        transform: scale(calc(1.0125 * var(--modifier)))
          translate(
            calc(25% * (var(--modifier) - 1)),
            calc(25% * (var(--modifier) - 1))
          )
          translateZ(0px);
        z-index: 10;
        .inner {
          &:after {
            background: repeating-linear-gradient(
              calc((var(--rotate-1) * 1deg) + 45deg),
              var(--color-a) 1vmin,
              var(--color-b) 1vmin,
              var(--color-b) 2vmin,
              var(--color-a) 2vmin,
              var(--color-a) 3vmin
            );
            transform: rotate(0deg);
            clip-path: none;
            opacity: var(--opacity-2);
          }
        }
      }
    }
    @each $num in $lgr {
      &:nth-of-type(#{$num}) {
        transform: scale(calc(1.0125 * var(--modifier)))
          translate(
            calc(-25% * (var(--modifier) - 1)),
            calc(-25% * (var(--modifier) - 1))
          )
          translateZ(0px);
        z-index: 10;
        .inner {
          &:after {
            background: repeating-linear-gradient(
              calc((var(--rotate-1) * 1deg) + 45deg),
              var(--color-b) 1vmin,
              var(--color-c) 1vmin,
              var(--color-c) 2vmin,
              var(--color-a) 2vmin,
              var(--color-a) 3vmin
            );
            transform: rotate(0deg);
            clip-path: none;
            opacity: var(--opacity-2);
          }
        }
      }
    }
    @each $num in $lr {
      &:nth-of-type(#{$num}) {
        --td: linear-gradient(to bottom, transparent, transparent);
        mask: var(--td), var(--lr);
      }
    }
    @each $num in $ll {
      &:nth-of-type(#{$num}) {
        --td: linear-gradient(to bottom, transparent, transparent);
        mask: var(--td), var(--ll);
      }
    }
    @each $num in $ur {
      &:nth-of-type(#{$num}) {
        --td: linear-gradient(to bottom, transparent, transparent);
        mask: var(--td), var(--ur);
      }
    }
    @each $num in $ul {
      &:nth-of-type(#{$num}) {
        --td: linear-gradient(to bottom, transparent, transparent);
        mask: var(--td), var(--ul);
      }
    }
    @each $num in $tt {
      &:nth-of-type(#{$num}) {
        --td: linear-gradient(to bottom, transparent, transparent);
        mask: var(--td), var(--lr) 0% 100% / 50% 50% no-repeat,
          var(--ll) 100% 100% / 50% 50% no-repeat;
      }
    }
    @each $num in $tr {
      &:nth-of-type(#{$num}) {
        --td: linear-gradient(to bottom, transparent, transparent);
        mask: var(--td), var(--ll) 0% 0% / 50% 50% no-repeat,
          var(--ul) 0% 100% / 50% 50% no-repeat;
      }
    }
    @each $num in $fpd {
      &:nth-of-type(#{$num}) {
        mask: var(--td);
        --td: linear-gradient(to bottom, transparent 50%, #000 50%);
      }
    }
    @each $num in $fpu {
      &:nth-of-type(#{$num}) {
        mask: var(--td);
        --td: linear-gradient(to top, transparent 50%, #000 50%);
      }
    }
    @each $num in $fpl {
      &:nth-of-type(#{$num}) {
        mask: var(--td);
        --td: linear-gradient(to right, transparent 50%, #000 50%);
      }
    }
    @each $num in $n {
      &:nth-of-type(#{$num}) {
        visibility: hidden;
        .inner {
          display: none;
        }
      }
      @for $i from 1 through 34 {
        &:nth-of-type(#{$i}) {
          visibility: hidden;
          .inner {
            display: none;
          }
        }
      }
    }
  }
}

let v = 0;

function draw() {
  v = 1 - v;
  document.body.classList.add("scale");
  setTimeout(() => {
    document.body.classList.remove("scale");
  }, 3000);
  document.body.classList.toggle("shift");
  document.querySelectorAll(".inner-" + v).forEach((cell) => {
    cell.style.setProperty(
      "--color-a",
      "var(--color" + Math.floor(Math.random() * 11) + ")"
    );
    cell.style.setProperty(
      "--color-b",
      "var(--color" + Math.floor(Math.random() * 11) + ")"
    );
    cell.style.setProperty(
      "--color-c",
      "var(--color" + Math.floor(Math.random() * 11) + ")"
    );
    cell.style.setProperty(
      "--clip-a",
      "var(--clip" + Math.floor(Math.random() * 8) + ")"
    );
    cell.style.setProperty(
      "--clip-b",
      "var(--clip" + Math.floor(Math.random() * 8) + ")"
    );
    cell.style.setProperty("--rotate-1", Math.floor(Math.random() * 6) * 90);
    cell.style.setProperty("--rotate-2", Math.floor(Math.random() * 6) * 90);
    cell.style.setProperty("--opacity", Math.floor(Math.random() * 4) - 2);
    cell.style.setProperty("--opacity-2", Math.floor(Math.random() * 4) - 1);
  });
  document.querySelectorAll(".cell").forEach((cell) => {
    cell.style.setProperty("--modifier", Math.floor(Math.random() * 2) + 1);
  });
}

draw();

setInterval(function () {
  draw();
}, 4500);