JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>

JavaScript

/**
 * для вопроса https://toster.ru/q/647181
 * Как создать морфинг svg анимацию привязанную к движению мыши в виде капли?
 * используется библиотека snap.svg http://snapsvg.io
 */
const s = Snap(800,500);
const params = [
  [280,90,80],
  [180,130,90],
  [210,210,60],
  [250,190,80],
  [320,150,80],
];
const cloud = params.map(p => s.circle(...p));
const group = s.g(...cloud);
group.attr({
    fill: "#bada55",
});
const randomMod = (circle, initial) => {
  circle.animate(
    {
      x: initial[0] - 80 + 160 * Math.random(),
      y: initial[1] - 80 + 160 * Math.random(),
      r: initial[2] * (0.9 + 0.2 * Math.random()),
    },
    800 + 400 * Math.random(),
    mina.easeinout, 
    () => randomMod(circle, initial)
  );
}

cloud.forEach((c,i) => randomMod(c, params[i]));