<div class="container">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>  
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
</div>

<svg>
  <defs>
    <filter id="morph">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="20" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -6" result="blob" />
      <feBlend in2="blob" in="SourceGraphic" result="mix" />
    </filter>
  </defs>
</svg>

body { 
  background: oklch(94% 10% 2deg); 
  background-size: contain;
  margin: 0 auto;
  height: 90dvh;
  width: 90dvw;
  overflow: hidden;
}
.container {
  display: grid;
  align-content: center;
  justify-content: center;
  
  filter: url("#morph");
  
  margin: 3% auto;
  height: 100%;
  width: 100%;
}

.blob { 
  --min: 2rem;
  --d: clamp(var(--min), 8dvw, calc(var(--min) * 2));
  background: var(--bg, white);
  border-radius: 1dvw;
  height: var(--d);
  width: var(--d);
  
  filter: blur(10px);
  
  animation-name: move;
  animation-delay: var(--delay, 0s);
  animation-duration: var(--duration, 1.5s);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  
  &:nth-of-type(even) {
    margin-left: -25%;
  }
  
  /* white */
  &:nth-of-type(1) {
    /* --bg: oklch(80% 70% 40deg); */
    --min: 1.5rem;
  }
  
  /* orange */
  &:nth-of-type(2) {
    --bg: oklch(80% 70% 90deg);
    /* --min: 3rem; */
    --delay: 2s;
  }
  
  /* yellow */
  &:nth-of-type(3) {
    --bg: oklch(100% 50% 50deg);
    --min: 4rem;
    --delay: 1s;
  }
  
  /* green */
  &:nth-of-type(4) {
    --bg: oklch(80% 70% 120deg);
    --min: 1.5rem;
    --delay: 3.25s;
  }
  
  /* green-blue */
  &:nth-of-type(5) {
    --bg: oklch(50% 20% 190deg);
    --min: 2rem;
    --delay: 2.25s;
  }
  
  /* indigo */
  &:nth-of-type(6) {
    --bg: oklch(60% 60% 280deg);
    --min: 3rem;
    --delay: .5s;
  } 
  
  /* purple */
  &:nth-of-type(7) {
    --bg: oklch(80% 50% 300deg);
    --min: 2rem;
    --delay: 2s;
  }
  
  /* pink */
  &:nth-of-type(8) {
    --bg: oklch(85% 20% 340deg);
    --min: 1.25rem;
    --delay: 3s;
  }
}

@keyframes move {
  to { margin-left: 75%; }
}