@use "sass:math";

body {
  background-color:black;    
  height: 100%;
  width: 100%;
  margin: 0;
  overflow:hidden;
}

.firework {
  position: absolute;
  width: 5px;
  height: 5px;
  opacity: 1;
}

@keyframes launchFirework {
  to { opacity: 0; }
}

@for $i from 1 through 50 {
  @keyframes launchFirework#{$i} {
   to { transform: translate(random(201) - 101 + px, random(201) - 101 + px); }
  }
  .firework#{$i} {
    animation: launchFirework random(1001) + 499 + ms linear forwards, launchFirework#{$i} random(1001) + 499 + ms linear forwards;
  }
}
View Compiled
function random(min, max) {
  return min + Math.random() * (max + 1 - min);
}

const createFirework = () => {
  const xPos = random(0, 100)
  const yPos = random(0, 100)
 	const colour = '#'+Math.random().toString(16).substr(2,6);
  
  // Create 50 divs, start them on top of each other
  // so they can radiate out from the centre
  for (let i = 1; i <= 50; i++) {
    const firework = document.createElement('div')
    firework.className = 'firework'
    firework.classList.add(`firework${i}`)
    firework.classList.add(`set${set}`)
    firework.style.backgroundColor = colour
    firework.style.left = xPos + '%'
    firework.style.top = yPos + '%'
    document.body.appendChild(firework)
  }  
  
  set += 1
}

const deleteFirework = () => {
  const setToDelete = set - 3
  if (set >= 0) {
    const oldFireworks = document.querySelectorAll(`.set${setToDelete}`);

    oldFireworks.forEach(firework => {
      firework.remove();      
    });      
  }
}

let set = 0
createFirework()

// The fireworks last between 500 and 1500 ms
// but we want lots on screen
// so we'll create a new one every 750ms

const fireworkTime = 750
setInterval(createFirework, fireworkTime)

// But we need to delete older ones otherwise it'll get silly
// And the JS can't tell opacity
// But once 1500ms have gone by we can delete the fireworks from 3 sets ago

setInterval(deleteFirework, fireworkTime * 3)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.