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