Как сделать обьединение двух обьектов "резиновым" эффектом в html css

У меня есть небольшая структура с двумя обьектами, которые двигаются, на gif показано как должен выглядить эффект

 <main id="main"> 
      <div class="circle" id="a"></div> 
      <div class="circle" id="b"></div> 
</main> 

 * { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
#main { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 100%; 
  height: 100vh; 
  background-color: black; 
  position: relative; 
} 
 
.circle { 
  width: 100px; 
  height: 100px; 
  border-radius: 50%; 
  background-color: #fff; 
  position: absolute; 
  transition: transform 0.5s ease; 
  mix-blend-mode: screen; /* Эффект слияния */ 
} 
 
.circle + .circle { 
  animation: 3s anim alternate infinite; 
} 
 
@keyframes anim { 
  0% { 
    transform: translateX(100px); 
  } 
  100% { 
    transform: translateX(-100px); 
  } 
} 
 
#main { 
  position: relative; 
} 
 
#main::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4)); 
  pointer-events: none; 
} 

Видео не получилось загрузить, ну суть анимации в том, что обьекты как-то "склеиваются" между собой, образуя такое скругление между ними, когда притягиваются друг к другу, как капли