Как анимировать Png чтобы был эффект тянущегося желе?

Question

[Даниил]

Ребят, привет, подскажите, плиз, как можно растянуть только часть изображения в реально времени, сделав подобие прелоудера?
Покажу на примере какой-то головы, необходимо, чтобы ты часть, что состоит из "киселя" растягивалась, а головые при этом оставались в своих пропорциях (поэтому css здесь не пойдет)

Пример:
Начальная точка


Конечная точка


Быть может на канвасе можно подобное сделать или еще как?
Спасибо)

Comments

[Rustam Bainazarov]

Элемент из трёх блоков, растягивается блок с желе по середине. Если о CSS-подходе.

Если у вас canvas и 3D, то это будет круче.

Answer 1

[profesor08]

Три картинки, бошки отдельно, жижа отдельно. Бошки просто двигай, жижу держи на месте и растягивай. Получится то, что получится. Красивым не назовешь, но простой картинки большего ожидать не стоит. Хочешь большего - three.js и шейдеры, шейдеры, шейдеры.

Answer 2

[Алексей Николаев]

Очевидный SVG одной картинкой, в котором желе выделено в отдельную подгруппу \ фигуру. Растягиваете только ее.

Answer 3

[Екатерина Денисова]

Отрисовывать с помощью canvas. Удалить "желе" с png, оставить отдельно две части головы, между ними отрисовать похожее "желе" с помощью кривых и градиентов. А затем анимировать кривые.