jamesknelson/index.html

## index.html
<body>
  <style>
    body {
      background-color: black;
      overflow: hidden;
    }

    .firework {
      top: 0;
      left: 0;
    }

    .dot {
      position: absolute;
    }

    .inner {
      border-radius: 999px;
      width: 7px;
      height: 7px;
      animation: 0.8s ease-out explode;
      opacity: 0;
    }

    @keyframes explode {
      0% {
        transform: translateY(0);
        opacity: 1;
      }

      100% {
        transform: translateY(100px);
        opacity: 0;
      }
    }
  </style>

  <script>
    function renderFirework(options) {
      const numberOfDots = options.numberOfDots

      const wrapper = document.createElement('div')
      wrapper.className = "firework"
      wrapper.style.transform = `
        translate(${options.left}px, ${options.top}px)
        scale(${options.scale})
      `

      const angleBetweenDots = 360 / numberOfDots

      for (let i = 0; i < numberOfDots; i++) {
        const dot = document.createElement('div')
        dot.className = "dot"
        dot.style.transform = `rotate(${i * angleBetweenDots}deg)`

        const dotInner = document.createElement('div')
        dotInner.className = "inner"
        dotInner.style.backgroundColor = options.color

        dot.appendChild(dotInner)
        wrapper.appendChild(dot)
      }

      document.body.appendChild(wrapper)

      setTimeout(() => {
        document.body.removeChild(wrapper)
      }, 3000)
    }

    function renderRandomFirework() {
      const width = document.body.clientWidth
      const height = document.body.clientHeight

      const red = Math.random() * 255
      const green = Math.random() * 255
      const blue = Math.random() * 255

      const numberOfDots = Math.floor(10 + Math.random()*10)

      const scale = 0.5 + Math.random()

      renderFirework({
        color: `rgb(${red}, ${green}, ${blue})`,
        left: Math.random() * width,
        top: Math.random() * height,
        numberOfDots,
        scale,
      })

      const delayUntilNext = 300 + 500*Math.random()
      setTimeout(renderRandomFirework, delayUntilNext)
    }

    renderRandomFirework()
  </script>
</body>
	<body>
	<style>
	body {
	background-color: black;
	overflow: hidden;
	}

	.firework {
	top: 0;
	left: 0;
	}

	.dot {
	position: absolute;
	}

	.inner {
	border-radius: 999px;
	width: 7px;
	height: 7px;
	animation: 0.8s ease-out explode;
	opacity: 0;
	}

	@keyframes explode {
	0% {
	transform: translateY(0);
	opacity: 1;
	}

	100% {
	transform: translateY(100px);
	opacity: 0;
	}
	}
	</style>

	<script>
	function renderFirework(options) {
	const numberOfDots = options.numberOfDots

	const wrapper = document.createElement('div')
	wrapper.className = "firework"
	wrapper.style.transform = `
	translate(${options.left}px, ${options.top}px)
	scale(${options.scale})
	`

	const angleBetweenDots = 360 / numberOfDots

	for (let i = 0; i < numberOfDots; i++) {
	const dot = document.createElement('div')
	dot.className = "dot"
	dot.style.transform = `rotate(${i * angleBetweenDots}deg)`

	const dotInner = document.createElement('div')
	dotInner.className = "inner"
	dotInner.style.backgroundColor = options.color

	dot.appendChild(dotInner)
	wrapper.appendChild(dot)
	}

	document.body.appendChild(wrapper)

	setTimeout(() => {
	document.body.removeChild(wrapper)
	}, 3000)
	}

	function renderRandomFirework() {
	const width = document.body.clientWidth
	const height = document.body.clientHeight

	const red = Math.random() * 255
	const green = Math.random() * 255
	const blue = Math.random() * 255

	const numberOfDots = Math.floor(10 + Math.random()*10)

	const scale = 0.5 + Math.random()

	renderFirework({
	color: `rgb(${red}, ${green}, ${blue})`,
	left: Math.random() * width,
	top: Math.random() * height,
	numberOfDots,
	scale,
	})

	const delayUntilNext = 300 + 500*Math.random()
	setTimeout(renderRandomFirework, delayUntilNext)
	}

	renderRandomFirework()
	</script>
	</body>