ntlk/confetti.html

## confetti.html
<html>
  <head>
    <title>Confetti</title>
    <style>
      #confettotainer {
        position: absolute;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }
      .confetto {
        border-radius: 50%;
        position: absolute;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
        width: 8rem;
        height: 8rem;
        margin-top: -4rem;
        margin-left: -4rem;
        animation-name: dropItBaby;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
      }
      @keyframes dropItBaby {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    </style>
  </head>

  <body>
    <div id="confettotainer"></div>
  </body>
  <script>
    const colours = [
      ['rgb(250, 196, 255)', 'rgb(249, 186, 255)'],
      ['rgb(252, 229, 58)', 'rgb(245, 217, 10)'],
      ['rgb(72, 147, 239)', 'rgb(40, 132, 245)']
    ];
    const confettoFactor = 5000;
    const maxConfetti = (window.innerWidth * window.innerHeight) / confettoFactor;
    const confettotainer = document.getElementById('confettotainer');

    const addConfetto = () => {
      const confetto = document.createElement('div');
      const [lighterColour, darkerColour] = colours[Math.floor(Math.random() * colours.length)];

      confetto.className = 'confetto';
      confetto.style.left = randomPos() + 'vw';
      confetto.style.top = randomPos() + 'vh';
      confetto.style.backgroundImage = getGradientFor(lighterColour, darkerColour);

      confettotainer.appendChild(confetto);
    }

    const getGradientFor = (lighterColour, darkerColour) => {
      const degree = Math.random() * 360;
      return `linear-gradient(${degree}deg, ${lighterColour} 30%, ${darkerColour} 70%)`;
    };

    const randomPos = () => Math.random() * 100;

    const removeConfetto = () => {
      if (confettotainer.childElementCount > maxConfetti) {
        confettotainer.removeChild(confettotainer.firstChild);
      }
    }

    const dropConfetto = () => {
      addConfetto();
      removeConfetto();
      setTimeout(dropConfetto, Math.random() * 3000);
    }
    dropConfetto();
  </script>
</html>
	<html>
	<head>
	<title>Confetti</title>
	<style>
	#confettotainer {
	position: absolute;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	}
	.confetto {
	border-radius: 50%;
	position: absolute;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
	width: 8rem;
	height: 8rem;
	margin-top: -4rem;
	margin-left: -4rem;
	animation-name: dropItBaby;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	}
	@keyframes dropItBaby {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}
	</style>
	</head>

	<body>
	<div id="confettotainer"></div>
	</body>
	<script>
	const colours = [
	['rgb(250, 196, 255)', 'rgb(249, 186, 255)'],
	['rgb(252, 229, 58)', 'rgb(245, 217, 10)'],
	['rgb(72, 147, 239)', 'rgb(40, 132, 245)']
	];
	const confettoFactor = 5000;
	const maxConfetti = (window.innerWidth * window.innerHeight) / confettoFactor;
	const confettotainer = document.getElementById('confettotainer');

	const addConfetto = () => {
	const confetto = document.createElement('div');
	const [lighterColour, darkerColour] = colours[Math.floor(Math.random() * colours.length)];

	confetto.className = 'confetto';
	confetto.style.left = randomPos() + 'vw';
	confetto.style.top = randomPos() + 'vh';
	confetto.style.backgroundImage = getGradientFor(lighterColour, darkerColour);

	confettotainer.appendChild(confetto);
	}

	const getGradientFor = (lighterColour, darkerColour) => {
	const degree = Math.random() * 360;
	return `linear-gradient(${degree}deg, ${lighterColour} 30%, ${darkerColour} 70%)`;
	};

	const randomPos = () => Math.random() * 100;

	const removeConfetto = () => {
	if (confettotainer.childElementCount > maxConfetti) {
	confettotainer.removeChild(confettotainer.firstChild);
	}
	}

	const dropConfetto = () => {
	addConfetto();
	removeConfetto();
	setTimeout(dropConfetto, Math.random() * 3000);
	}
	dropConfetto();
	</script>
	</html>