How do I decrease load time for generating around 1000 divs?

Question

I'm working on my portfolio website so, I was trying some animation for the landing page. Everything is working fine but the animation takes very long time to load. I was generating a matrix of divs using JS and appling CSS and animation to each one of them. Please suggest something to decrease the load time. My Website

Javascript

let holder = document.getElementById("hero");

let gs = 25;

window.onload = () => {
  for (let i = 0; i < gs; i++) {
    for (let j = 0; j < gs; j++) {
      let dot = document.createElement("div");
      dot.classList.add("dot");
      dot.style.animationDelay = `${Math.sin(i * j) / 2}s`;
      holder.appendChild(dot);
    }
  }
};

CSS

.hero {
  /* background-image: url(media/Background.jpg); */
  height: 100vh;
  position: absolute;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(50, 90px);
  grid-template-rows: repeat(50, 90px);
  overflow: hidden;
  text-align: left;
}

.dot {
  width: 2px;
  height: 2px;
  animation-name: wavyDots;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  z-index: -1;
}

.dot:nth-child(odd) {
  background-color: #0cf5d5;
}

.dot:nth-child(even) {
  background-color: #e0017a;
}

@keyframes wavyDots {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(30px, 30px);
  }
}

I tried decreasing the matrix size but didn't help much, if I decrease more then I don't have enough divs to cover my entire page.