Как залить фигуру цветом используя св-ва CSS?

Question

[Darya Shvakh]

Добрый день!
Скажите пожалуйста, как:
1) плавно
2) залить фигуру цветом

(с низу в верх, или с верху в низ) используя только CSS ?
Т.е. необходимо, что бы при загрузки/наведении фигура плавно заливалась цветом, в направлении с низу в верх или наоборот, как прозрачный сосуд постепенно заполняется цветной жидкостью:)
Предполагаю, что это можно реализовать используя transform, но как именно - задать:
1) Направление заливки
2) Плавность заливки
3) Да и саму заливку не понятно
Спасибо!

Answer 1

[Dymok]

https://codepen.io/UnluckySerivelha/pen/yEwKRe

Comments

[Darya Shvakh]

Dymok, Спасибо!
Вопрос опять не корректно сформулирован, необходим эффект - заливки плавности, т.е. при загрузки/наведении bg как-бы постепенно "заливает" (как прозрачный сосуд цветной жидкостью) с низу в верх.
P/S

ищу работу за еду

;)