Как анимировать деформацию элемента при наведении курсора?

Question

[Сергей]

Есть два элемента с картинками внутри. При наведении курсора, он деформируется, и из обычного прямоугольника превращается в скругленный. Причем при смещении курсора изогнутость перемещается за ним. На первой картинке курсор в правом верхнем углу, на нижней в правом нижнем. Даже затрудняюсь как правильно все это назвать для поиска в гугл.

Comments

[Kovalsky]

Я думаю это всё про SVG, а там уже либо SNAP и аналоги, либо SMIL

Если без деформаций, то как-то так

С деформациями так (мануал)

[Сергей]

Спасибо, посмотрю

Answer 1

[RAX7]

Попробуй вот эту штуку использовать как clipPath для картинки

Answer 2

[profesor08]

Весь этот изогнутый контур построен из кривых Безье. Параметрами кривых являются точки. При движении курсора, меняется положение нужных точек по любой оси. На основании точек рисуется сама кривая. С помощью SVG можно строить такие замкнутые контуры.