Pixel grid blink effect 2 (Scale)

<div class="pixel"></div>

<style>
.pixel {
  position: relative;
  top: 0;
  left: 0;
  width: 300px;
  height: 240px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0;
  z-index: 5;
  pointer-events: none;
}

.pixel div {
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: pixelBlink 3s infinite ease-in-out;
  background-color: var(--e-global-color-accent) !important;
}

@keyframes pixelBlink {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  25%, 75% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 0.8; transform: scale(1); }
}
</style>

<script>
(function() {
  const grid = document.querySelector('.pixel');
  const columns = 5;
  const rows = 4;
  const pixelCount = columns * rows;

  for (let i = 0; i < pixelCount; i++) {
    const pixel = document.createElement('div');

    // Nasumičan delay
    pixel.style.animationDelay = (Math.random() * 4) + 's';

    // Nasumična brzina animacije
    pixel.style.animationDuration = (2 + Math.random() * 2) + 's';

    // Nasumična šansa da piksel svetli (50% piksela ostaje prazno)
    if (Math.random() < 0.5) {
      pixel.style.animation = 'none';
    }

    grid.appendChild(pixel);
  }
})();
</script>