<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snowflake On Click</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>
* {
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background: linear-gradient(#12a7f9, #008aef);
  overflow: hidden;
}
.snowflake {
  position: absolute;
  background-image: url("https://i.postimg.cc/TPSBWW9m/snowflake-image.png");
  background-size: cover;
  border-radius: 50px;
  animation: fall 2s linear infinite;
}
@keyframes fall {
  0% {
    transform: translate(50%, 50%);
    opacity: 1;
  }
  100% {
    transform: translate(50%, 1000%);
    opacity: 0;
  }
}
document.addEventListener("click", (e) => {
  //create span for snowflake
  var snowflake = document.createElement("span");
  snowflake.classList.add("snowflake");

  //set position of snowflake to mouse pointer's position
  snowflake.style.left = e.offsetX + "px";
  snowflake.style.top = e.offsetY + "px";

  //select random number between 20 and 100
  var size = Math.random() * (100 - 20 + 1) + 20;

  //set width and height
  snowflake.style.width = size + "px";
  snowflake.style.height = size + "px";
  document.body.appendChild(snowflake);
  setTimeout(() => {
    snowflake.remove();
  }, 1000);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.