SOURCE

const cellSize = 12;
const canvasWidth = 340;
const canvasHeight = 340;
const colors = [
  "#407CEE",
  "#386BE8",
  "#315DC9",
  "#354EB0",
  "#39419C",
  "#292F70",
  "#242A62"
];

/** Create an array to represnt grid */
const makeGrid = (
  canvasWidth,
  canvasHeight,
  cellWidth,
  cellHeight,
  palette
) => {
  const cellsX = Math.ceil(canvasWidth / cellWidth); // cells per row
  const cellsY = Math.ceil(canvasHeight / cellHeight); // rows
  const fadeDirection = ["in", "out"];

  let grid = [];

  for (let i = 0; i < cellsY; i++) {
    grid = [...grid, []]; // create new row

    for (let j = 0; j < cellsX; j++) {
      const cell = {
        xPos: j * cellWidth,
        yPos: i * cellHeight,
        width: cellWidth,
        height: cellHeight,
        speed: Math.random() * 0.02,
        opacity: Math.random(),
        fadeDirection:
          fadeDirection[Math.floor(Math.random() * fadeDirection.length)],
        background: palette[Math.floor(Math.random() * palette.length)]
      };

      grid[i] = [...grid[i], cell];
    }
  }

  return grid;
};

const addLighting = (ctx, x, y, radius) => {
  ctx.save();

  ctx.globalCompositeOperation = "lighter";
  const radialGradient = ctx.createRadialGradient(x, y, 0, x, y, radius);

  radialGradient.addColorStop(0.0, "#2A3178");
  radialGradient.addColorStop(1, "#000000");

  ctx.fillStyle = radialGradient;
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fill();
  ctx.restore();
};

const render = (canvas, grid) => {
  const ctx = canvas.getContext("2d");

  // Setup cell styles
  ctx.strokeStyle = "#0E151F";
  ctx.lineWidth = 0.5;

  const renderGrid = () => {
    // Reset cell
    ctx.fillStyle = "#292F70";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    grid.forEach((row, rowIndex) => {
      row.forEach((cell, cellIndex) => {
        ctx.fillStyle = cell.background;

        if (cell.fadeDirection === "in") {
          if (cell.opacity + cell.speed <= 1) {
            ctx.globalAlpha = cell.opacity + cell.speed;
            cell.opacity = cell.opacity + cell.speed;
          } else {
            ctx.globalAlpha = cell.opacity - cell.speed;
            cell.opacity = cell.opacity - cell.speed;
            cell.fadeDirection = "out";
          }
        } else {
          if (cell.opacity - cell.speed >= 0) {
            ctx.globalAlpha = cell.opacity - cell.speed;
            cell.opacity = cell.opacity - cell.speed;
          } else {
            ctx.globalAlpha = cell.opacity + cell.speed;
            cell.opacity = cell.opacity + cell.speed;
            cell.fadeDirection = "in";
          }
        }

        ctx.fillRect(cell.xPos, cell.yPos, cell.width, cell.height);
        ctx.strokeRect(cell.xPos, cell.yPos, cell.width, cell.height);

        ctx.globalAlpha = 1;
      });
    });

    addLighting(ctx, canvasWidth / 2, canvasHeight / 2, 200);
    requestAnimationFrame(renderGrid);
  };

  return renderGrid;
};

const renderPalette = (palette) => {
  const el = document.getElementById("palette");

  palette.forEach((color) => {
    const swatch = document.createElement("div");
    swatch.classList.add("swatch");
    swatch.style = `background: ${color};`;

    el.appendChild(swatch);
  });
};

const renderGrid = render(
  document.getElementById("pixels"),
  makeGrid(canvasWidth, canvasHeight, cellSize, cellSize, colors)
);

renderGrid();

renderPalette(colors);

<div class="wrapper">
  <div>
    <canvas id="pixels" width="340" height="340"></canvas>
  </div>

  <div id="palette"></div>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #2f80ed, #56ccf2);
  height: 100vh;
}

.wrapper {
  display: flex;
  flex-direction: column;
  grid-gap: 30px;
}

#pixels {
  width: 340px;
  height: 340px;
  border-radius: 12px;
  background: #39419c;
  border: 2px solid #39419c;
  box-shadow: 0 70px 63px -60px;
}

#palette {
  width: 100%;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
}

.swatch {
  height: 20px;
  flex: 1;
}