<div id="box" class="box">
  
  <div class="blob blob-1"></div>
  <div class="blob blob-2"></div>
  <div class="blob blob-3"></div>
  <div class="blob blob-4"></div>
  <div class="blob blob-5"></div>
  <div class="blob blob-6"></div>
  <div class="blob blob-7"></div>
  <div class="blob blob-8"></div>
  <div class="blob blob-9"></div>
  <div class="blob blob-10"></div>
  <div class="blob blob-11"></div>
  <div class="blob blob-12"></div>
  <div class="blob blob-13"></div>
  <div class="blob blob-14"></div>
  
</div>

.box {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 600px;
  height: 600px;
  background: #9ddadb;
  z-index: 50;
  overflow: hidden;
}

.blob {
  position: absolute;
  z-index: 100;
}

.blob-1 {
  height: 10rem;
  width: 10rem;
  background: #774898;
  top: calc(50% - 5rem);
  right: calc(50% - 5rem);
  animation: blob 10s ease-in-out infinite, float 175s ease-in-out infinite;
}

.blob-2 {
  height: 8rem;
  width: 8rem;
  background: #de4383;
  top: 10%;
  right: 10%;
  border-radius: 65% 60% 35% 50% / 65% 38% 75% 36%;
  animation: blob 8s ease-in-out infinite, float 125s ease-in-out infinite;
}

.blob-3 {
  height: 6rem;
  width: 6rem;
  background: #f3ae4b;
  top: 80%;
  right: 70%;
  animation: blob 5s ease-in-out infinite, float 95s ease-in-out infinite;
}

.blob-4 {
  height: 10rem;
  width: 10rem;
  background: #de4383;
  top: 80%;
  right: 5%;
  animation: blob 10s ease-in-out infinite, float 250s ease-in-out infinite;
}

.blob-5 {
  height: 8rem;
  width: 8rem;
  background: #f3ae4b;
  top: 5%;
  right: 75%;
  animation: blob 8s ease-in-out infinite, float 250s ease-in-out infinite;
}

.blob-6 {
  height: 6rem;
  width: 6rem;
  background: #f3ae4b;
  top: 55%;
  right: 15%;
  animation: blob 5s ease-in-out infinite, float 240s ease-in-out infinite;
}

.blob-7 {
  height: 4rem;
  width: 4rem;
  background: #774898 ;
  top: 60%;
  right: 80%;
  animation: blob 10s ease-in-out infinite, float 100s ease-in-out infinite;
}

.blob-8 {
  height: 6rem;
  width: 6rem;
  background: #774898;
  top: -2%;
  right: 40%;
  animation: blob 8s ease-in-out infinite, float 70s ease-in-out infinite;
}

.blob-9 {
  height: 6rem;
  width: 6rem;
  background: #de4383;
  top: 35%;
  right: 68%;
  animation: blob 5s ease-in-out infinite, float 120s ease-in-out infinite;
}

.blob-10 {
  height: 2rem;
  width: 2rem;
  background: #de4383;
  top: 10%;
  right: 65%;
  animation: blob 10s ease-in-out infinite, float 250s ease-in-out infinite;
}

.blob-11 {
  height: 2rem;
  width: 2rem;
  background: #f3ae4b;
  top: 40%;
  right: 5%;
  animation: blob 8s ease-in-out infinite, float 250s ease-in-out infinite;
}

.blob-12 {
  height: 3rem;
  width: 3rem;
  background: #f3ae4b;
  top: 20%;
  right: 45%;
  animation: blob 5s ease-in-out infinite, float 240s ease-in-out infinite;
}

.blob-13 {
  height: 4rem;
  width: 4rem;
  background: #774898 ;
  top: 0%;
  right: 0%;
  animation: blob 10s ease-in-out infinite, float 100s ease-in-out infinite;
}

.blob-14 {
  height: 6rem;
  width: 6rem;
  background: #de4383;
  top: 80%;
  right: 45%;
  animation: blob 5s ease-in-out infinite, float 120s ease-in-out infinite;
}



@keyframes blob { 
  0% { 
    border-radius: 65% 60% 35% 50% / 65% 38% 75% 36%; 
  } 
  25% { 
    border-radius: 89% 54% 62% 42% / 83% 45% 75% 63%; 
  } 
  50% { 
    border-radius: 65% 60% 35% 50% / 65% 38% 75% 36%;   } 
    25% { 
    border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; 
  } 
  50% { 
    border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;   } 
  75% { 
    border-radius: 89% 54% 62% 42% / 83% 45% 75% 63%; 
  } 
  100% { 
    border-radius: 65% 60% 35% 50% / 65% 38% 75% 36%;   } 
}

@keyframes float {
 0% {  transform: rotate(0deg) translateX(0%) translateY(0%); }
 25% {  transform: rotate(10deg) translateX(35%) translateY(-100%);}
 50% {  transform: rotate(0deg) translateX(-35%) translateY(100%);}
 100% {  transform: rotate(0deg) translateX(0%) translateY(0%); }
}