.grid
  - 2500.times do
    .point(data-point)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  background-color: #fffeca;
}

.grid {
  display: grid;
  width: 100vmin;
  height: 100vmin;
  max-width: 400px;
  max-height: 400px;
  margin: auto;
  grid-template-columns: repeat(50, 1fr);
  grid-template-rows: repeat(50, 1fr);
}

.point {
  width: 100%;
  height: 100%;
  background-color: blue;
  border-radius: 50%;
}

const points = [...document.querySelectorAll('[data-point]')]

// points.forEach((point, i) => {
//   TweenMax.to(point, .5, {
//     scale: .3,
//     yoyo: true,
//     repeat: -1,
//     delay: i * -Math.PI,
//     ease: "none"
//   })
// })