<div class="wrapper">
  <canvas id="canvas"></canvas>
</div>

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #272a37;
}

.wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  image-rendering: pixelated;
}

const canvas = document.getElementById("canvas");
const outputContainer = document.getElementsByClassName("wrapper")[0];
const ctx = canvas.getContext("2d");

canvas.width = 400;
canvas.height = 400;

const colors = ["#ff6188", "#fc9867", "#FDB0C0", "#247AFD", "#ED0DD9"];
const pixelSize = 10;
const animationInterval = 120;
let timer = 0;
let colorIndex = 0;

animate();

function animate(time) {
  let stepAmount = Math.floor((time - 1200) / 100) * pixelSize;

  for (let y = 0; y < canvas.height; y += pixelSize) {
    if (stepAmount < y) {
      for (let x = 0; x < canvas.width; x += pixelSize) {
        ctx.fillStyle = "#111111";
        ctx.fillRect(x, y, pixelSize, pixelSize);
      }
    } else {
      for (let x = 0; x < canvas.width; x += pixelSize) {
        ctx.fillStyle = colors[randomNum(0, colors.length - 1)];
        ctx.fillRect(x, y, pixelSize, pixelSize);
      }
    }

    if (stepAmount > 500) {
      colorIndex = colorIndex + 0.01;
      console.log(colorIndex);
      // Turn all the colors in the array to the background color
      colors[Math.floor(colorIndex)] = "#272A37";
    }
  }

  setTimeout(() => requestAnimationFrame(animate), animationInterval);
}

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}