.grid
  - 2500.times do
    .point(data-point)
View Compiled 
* {
  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%;
}
View Compiled 
const points = [...document.querySelectorAll('[data-point]')]

points.forEach((point, i) => {
  point.animate({
    transform: ['scale(1)', 'scale(.3)']
  }, {
    duration: 500,
    delay: i * -Math.PI,
    direction: 'alternate',
    iterations: Infinity,
    easing: 'linear'
  })
})
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.