Возможно ли анимировать форму таким образом?

Question

[Ваня Петило]

Привет Хабр!
Возник любопытный вопрос во время работы. Возможно ли анимировать данную форму так, чтобы изначально при открытии она была прямоугольником, но из прямоугольника выплывала форма, которая уже присутствует на макете? Если да -- насколько это будет сложно?

Comments

[Квазиморд Сидорович]

1вариант - подложить фоном статичную картинку(прямоугольник), а при открытии заменить GIF-кой с нужной анимацией.
2вариант - подложить SVG-объект в виде прямоугольника, в нужный момент анимировать свойство path.

Answer 1

[RAX7]

Answer 2

[strelok011]

1. Есть вариант анимировать используя фильтр блюр. Поизвращаться придется конечно, но вполне себе будет рабочий вариант

Пример
Обязательно нужно учитывать, что фильтр на контейнере применится ко всему что в него вложено, соответственно, эти штуки придется делать на отдельном диве.

2. Как предложили выше - svg path
3. Canvas - трудоемкость большая

Вот подборка примеров "жидких" эффектов

Comments

[Ваня Петило]

Восхитительная подборка! Спасибо