Как создать циклическую деформирующую текстовую анимацию ⇐ CSS

[Anonymous]

Я пытаюсь создать SVG-анимацию, в которой фигура постоянно деформируется (например, дышащая или жидкая капля).
Цель состоит в том, чтобы позже поместить текст внутри фигуры, чтобы текст деформировался вместе с ней, что-то вроде «пространственного» или эластичного текстового эффекта.
[![введите описание изображения здесь][1]][1]
Мне удалось анимировать фигуру, используя точки многоугольника, но я застрял как заставить текст соответствовать форме или деформировать ее.
Я пробовал преобразовать текст в контур SVG, но он не перемещается и не искажается при анимации многоугольника.
И мне интересно... как вы думаете, я иду по правильному пути или мне следует использовать Three.js?
:root { color-scheme: light dark; }
body {
margin: 0;
min-height: 100svh;
display: grid;
place-items: center;
background: radial-gradient(1200px 800px at 50% 20%, #fff 0, #f3f3f3 40%, #e9e9e9 100%);
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.frame {
width: min(70vmin, 520px);
aspect-ratio: 5 / 3;
display: grid;
place-items: center;
}
svg {
width: 80%;
filter: drop-shadow(0 12px 22px rgba(0,0,0,.18));
}
.blob { fill: #000; }







```

[1]: https://i.sstatic.net/OW4q6j18.png


Подробнее здесь: https://stackoverflow.com/questions/797 ... -animation