<div class="bubble-container">
  <div class="bubble">
    <div class="soup-layer"></div> 
  </div>
  <div class="dotted-layer pink"></div>
  <div class="dotted-layer white"></div>
</div>

body {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(187, 222, 222, 1) 100%
  );
  overflow: hidden;
}

.bubble-container {
  width: 10rem;
  height: 10rem;
  position: absolute;
  top: 120%;
  left: 30%;
  animation-duration: 8s;
  animation-name: rise;
  animation-iteration-count: 1;
}

.bubble {
  background: radial-gradient(
    circle,
    rgba(187, 222, 222, 1) 0%,
    rgba(219, 238, 238, 0) 53%,
    rgb(255 255 255) 73%,
    rgba(187, 222, 222, 1) 100%
  );
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-left: 1px solid white;
  border-right: 1px solid #7b027747;
  position: absolute;
  box-shadow: -1px -1px 5px rgb(41 169 139 / 28%);
  animation-delay:4s;
  animation-duration: 1s;
  animation-name: disappear-bubble;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}

.bubble::after {
  content: "";
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: 66%;
  top: 20%;
  transform: skew(-0deg, 40deg) rotate(125deg);
  border-top-right-radius: 50%;
  background: linear-gradient(
    90deg,
    rgb(255 255 255) 0%,
    rgb(255 255 255 / 0%) 50%
  );
  border-radius: 50%;
}

.bubble::before {
  content: "";
  width: 2rem;
  height: 3rem;
  position: absolute;
  left: 20%;
  top: 50%;
  transform: rotate(296deg) skew(-22deg, 34deg);
  border-top-right-radius: 50%;
  background: linear-gradient(
    89deg,
    rgb(255 255 255) 0%,
    rgb(255 255 255 / 0%) 26%
  );
  border-radius: 50%;
}

.soup-layer {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 22%,
    rgba(220, 125, 215, 0) 47%,
    rgb(204 68 197 / 13%) 79%,
    rgb(27 191 35 / 6%) 93%
  );
  transform: rotate(45deg);
  border-right: 1px solid #00000030;
}

.dotted-layer {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  left: -1%;
  top: -1%;
  opacity: 0;
}

.dotted-layer.pink {
  border: 2px dotted #a24ea269;
  animation-delay:4s;
  animation-duration: 2s;
  animation-name: disappear-dots-pink;
  animation-iteration-count: 1;
}

.dotted-layer.white {
  border: 4px dotted white;
  animation-delay:4s;
  animation-duration: 4s;
  animation-name: disappear-dots-white;
  animation-iteration-count: 1;
}

@keyframes disappear-bubble {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes disappear-dots-pink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: scale(1.1, 1.1);
  }
}
@keyframes disappear-dots-white {
  from {
    opacity: 1;
    transform: scale(0.95, 0.95);
  }

  to {
    opacity: 0;
    transform: scale(1.2, 1.2);
  }
}

@keyframes rise {
  to {
    top: 3rem
  }
}

setInterval(()=> {
  const bubbleContainer = document.createElement('div');
  bubbleContainer.className = "bubble-container";
  bubbleContainer.innerHTML = `<div class="bubble">
    <div class="soup-layer"></div> 
  </div>
  <div class="dotted-layer pink"></div>
  <div class="dotted-layer white"></div>`;
  bubbleContainer.style.left = `${(Math.random() * 100)}%`;
  document.body.appendChild(bubbleContainer);
  var bubblesCount = document.body.childElementCount;
  if(bubblesCount >17){
    document.body.removeChild(document.body.childNodes[0]);    
  }
}, 500);