    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>물방울 애니메이션 만들기</title>
    </head>
    <body>
      <canvas id="myCanvas" width="800" height="500"
        style="border: 2px solid #cef"> </canvas>
      <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");
        let droplets = [];

        function Droplet(x, y, radius, speed) {
          this.x = x;
          this.y = y;
          this.radius = radius;
          this.speed = speed;

          this.draw = function () {
              ctx.beginPath();
              ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
              ctx.fillStyle = "rgba(0, 0, 255, 0.4)";
              ctx.fill();
            }
            this.update = function () {
              this.y = this.y - this.speed;
              if (this.y + this.radius < 0)
                this.y = canvas.height + this.radius;
            }
        }
        function createDroplet() {
          let x = Math.random() * canvas.width;
          let radius = Math.random() * 15 + 5;
          let speed = Math.random() * 4 + 1;
          return new Droplet(x, canvas.height + radius, radius, speed);
        }
        function animate() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          for (let i = 0; i < droplets.length; i++) {
            droplets[i].update();
            droplets[i].draw();
          }
          requestAnimationFrame(animate);
        }

        for (let i = 0; i < 50; i++) {
          droplets.push(createDroplet());
        }
        animate();
      </script>
    </body>
    </html>