Нестандартное преобразование блока

Нужно создать нестандартную трансформацию блока (метаморфоз). Например есть блок круглой формы, который увеличивается сперва со своей правой стороны так, словно у него вырастает “шишка” :frowning:
После увеличивается с левой стороны и так поочередно с каждой стороны пока не дойдет до нужного размера.

Задача интересная и не простая, буду благодарен за каждое мнение, отпишите пожалуйста даже Ваше размышление как можно реализовать такое?
Возможно лучше использовать svg?

Недавно столкнулся с заданием с фигурами, рисованием. Посмотри в сторону canvas + fabric.js возможно это можно сделать и при помощи этих компонент. Можно рисовать круг поверх основного как вариант пока не дойдет до нужных размеров

Я бы подобное решение хардкодил теми инструментами, которые есть под рукой (это может быть svg графика, gif анимация, пошаговое изменение спрайтов, что-то на css3), и не искал бы общего подхода.

1 лайк