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

[Anonymous]

Я пытаюсь создать SVG-анимацию, в которой фигура постоянно деформируется (например, дышащая или жидкая капля).
Цель состоит в том, чтобы позже поместить текст внутри фигуры так, чтобы текст деформировался вместе с ней, своего рода «пространственный» или эластичный текстовый эффект.

Мне удалось анимировать фигуру, используя точки многоугольника, но я застрял в том, как заставить текст соответствовать форме или деформировать ее.
Я попробовал преобразовать текст в путь 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;
}

Код: Выделить всё

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