هل استطيع انشاء موقع  يظهر في الخلفية فقاعات صابون بالاعتماد الكلي على الجافا سكربت للتحريك واخفاء الفقاعات بالضغط عليها ؟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seifenblasen</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <h3> Seifenblasen </h3>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS CODE
* {
    margin: 0;
    padding: 0;
}

div{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

div h3 {
    color: aliceblue;
    font-size: 8em;
}

div span {
    bottom: -50px;
    position: absolute;
    background: transparent;
    border-radius: 50%;

    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(255,255,0,0.5);
    animation: animate 4s linear infinite;

}

JavaScript Code

function blasen(){
    const section = document.querySelector( 'section')
    const element = document.createElement('span')
    let size = Math.random() * 60;
    element.style.width = 25 +size + 'px';
    element.style.height= 25 + size + 'px';
    element.style.left = Math.random() * innerWidth + "px";
    section.appendChild(element);

    setTimeout (() => {
        element.remove()
    }, 1000)

} setInterval(blasen, 20)