SVG анимация, как правильно сделать?

Question

[Алексей Орлов]

На сайте раз в 4 секунды меняется заголовок, справа от заголовка предполагается сделать анимацию, например, колбы , в которую при смене заголовка будет подливаться ингредиент и в конце концов колба заполняется. Правильно ли я понимаю, что дизайнер рисует анимированные SVG объекты, а я с помощью js вызываю эти объекты в нужное время или как правильно такое реализовать? Если есть ссылки на что-то похожее буду благодарен, если скинете.

Comments

[frontend queen]

https://codepad.co/snippet/bottle-fill-svg-animation
https://codepen.io/aliceuhl/pen/RaPZKW

[Алексей Орлов]

frontend queen, А можешь, пожалуйста, уточнить, вот эти все координаты и значения они даются из уже нарисованного объекта svg в иллюстраторе, правильно?

[frontend queen]

Алексей Орлов, вообще - да. для svg анимаций лучше, чтобы два состояния были нарисованы в одинаковых координатных плоскостях.
еще можно с svg mask решить, как здесь. поиграй с кодом, там маска и два полигона (маска накладывается на второй). анимация просто скейлит rect с цветом воды, а маска ограничивает координатами стакана его видимость

[Алексей Орлов]

frontend queen, Спасибо большое

Answer 1

[Антон Усачев]

Анимированные svg здесь излишни. Достаточно пары картинок и clip-path. А анимировать уже через css.

Набросал пример:

Comments

[Алексей Орлов]

Очень круто, спасибо!