Как плавно заполнить fill фон SVG?

Question

[Александр]

Нашел на ютубе пример https://www.youtube.com/watch?v=gQQIkkREdoM с анимацией интересной, как мне по аналогии заполнить svg ? Картинка будет другая, суть в том чтобы фон заливался плавной, за нужное мне кол-во времени

Спасибо

Comments

[Александр]

Александр А: тогда фон просто плавно поменяется и все, а нужно его залить как на примере

[uaf0x]

https://www.youtube.com/watch?v=XBdbgD2BaEI следующие видо ?)

[Александр]

uaf0x: там совершенное другое

Answer 1

[#rybak]

На сколько я знаю стандартными возможностями html и css такую задачу не решить.
Посмотрите тут. Ребята занимаются похожими вещами
-------------------------------
У SVG есть своя родная анимация кстати (смотрите тут)
Но есть проблема с кроссбраузерностью.
-------------------------------
Еще один возможный вариант - нарисовать на канвасе (canvas). Но нужно владеть соответствующими знаниями.
-------------------------------
После всего этого обычная гифка кажется не таким уж плохим вариантом :)

Comments

[Александр]

в итоге сделал на канвансе я

[#rybak]

Александр:
Да, это один из лучших вариантов.
Можно глянуть на результат?