jamesknelson/index.html

## index.html
<body>
<style>
  body {
    /* background-color: rgb(195, 226, 224); */
    background-color: black;
    overflow: hidden;
  }

  .petal {
    position: absolute;
    animation: 2s ease-out arc;
  }
  .inner {
    animation: 2s ease-out rotate;
    opacity: 0;
  }
  .petal .left {
    position: relative;
    background-color: rgb(253, 225, 255);
    border-top-left-radius: 99px;
    border-bottom-left-radius: 99px;
    transform: scaleX(0.5);
    height: 30px;
    width: 14px;
  }
  .petal .right {
    position: absolute;
    top: 0;
    left: 6px;
    background-color: rgb(253, 225, 255);
    border-top-right-radius: 99px;
    border-bottom-right-radius: 99px;
    transform: scaleX(0.5);
    height: 30px;
    width: 14px;
  }

  @keyframes arc {
    100% {
      transform: rotate(0deg);
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(10deg) scale(1.2);
    }

    10% {
      opacity: 1;
      transform: rotate3d(0deg) scale(1.1);
    }

    100% {
      opacity: 0;
      transform: rotate(-60deg) scale(0.8);
    }
  }
</style>
<script>
  function addPetal(options) {
    const petalLeft = document.createElement('div')
    const petalRight = document.createElement('div')
    const petalInner = document.createElement('div')
    const petalOuter = document.createElement('div')
    petalLeft.className = "left"
    petalRight.className = "right"
    petalInner.className = "inner"
    petalOuter.className = "petal"
    petalInner.appendChild(petalLeft)
    petalInner.appendChild(petalRight)
    petalOuter.appendChild(petalInner)

    petalOuter.style.left = options.left
    petalOuter.style.top = options.top
    petalOuter.style.transformOrigin = "0 "+options.arcRadius+"px"
    petalOuter.style.transform = "rotate("+options.arcAngle+"deg)"

    document.body.appendChild(petalOuter)
  }

  setInterval(() => {
    const height = document.body.clientHeight
    const width = document.body.clientWidth

    addPetal({
      left: width * Math.random(),
      top: height * Math.random(),
      arcAngle: 30 + Math.random() * 150,
      arcRadius: 150 + Math.random() * 150,
    })
  }, 50)
</script>
</body>
	<body>
	<style>
	body {
	/* background-color: rgb(195, 226, 224); */
	background-color: black;
	overflow: hidden;
	}

	.petal {
	position: absolute;
	animation: 2s ease-out arc;
	}
	.inner {
	animation: 2s ease-out rotate;
	opacity: 0;
	}
	.petal .left {
	position: relative;
	background-color: rgb(253, 225, 255);
	border-top-left-radius: 99px;
	border-bottom-left-radius: 99px;
	transform: scaleX(0.5);
	height: 30px;
	width: 14px;
	}
	.petal .right {
	position: absolute;
	top: 0;
	left: 6px;
	background-color: rgb(253, 225, 255);
	border-top-right-radius: 99px;
	border-bottom-right-radius: 99px;
	transform: scaleX(0.5);
	height: 30px;
	width: 14px;
	}

	@keyframes arc {
	100% {
	transform: rotate(0deg);
	}
	}

	@keyframes rotate {
	0% {
	transform: rotate(10deg) scale(1.2);
	}

	10% {
	opacity: 1;
	transform: rotate3d(0deg) scale(1.1);
	}

	100% {
	opacity: 0;
	transform: rotate(-60deg) scale(0.8);
	}
	}
	</style>
	<script>
	function addPetal(options) {
	const petalLeft = document.createElement('div')
	const petalRight = document.createElement('div')
	const petalInner = document.createElement('div')
	const petalOuter = document.createElement('div')
	petalLeft.className = "left"
	petalRight.className = "right"
	petalInner.className = "inner"
	petalOuter.className = "petal"
	petalInner.appendChild(petalLeft)
	petalInner.appendChild(petalRight)
	petalOuter.appendChild(petalInner)

	petalOuter.style.left = options.left
	petalOuter.style.top = options.top
	petalOuter.style.transformOrigin = "0 "+options.arcRadius+"px"
	petalOuter.style.transform = "rotate("+options.arcAngle+"deg)"

	document.body.appendChild(petalOuter)
	}

	setInterval(() => {
	const height = document.body.clientHeight
	const width = document.body.clientWidth

	addPetal({
	left: width * Math.random(),
	top: height * Math.random(),
	arcAngle: 30 + Math.random() * 150,
	arcRadius: 150 + Math.random() * 150,
	})
	}, 50)
	</script>
	</body>