Как изобразить остаток в бутылке через CSS, JS?

Question

[sarkis3]

Здравствуйте.
Задача : Имеется бутылка 1 литр и из нее периодически убавляется вода .
Как можно графически показывать уровень воды в бутылке ?
Ну т.е надо показать визуально, какая часть бутылки заполнена и рядом написать ,сколько МЛ осталось в ней .

Может есть какие-то плагины , графики или столбики , которые я смогу доработать под себя. Буду благодарен за ваши мысли

Вот что-то подобное нашел , но может предложите еще что-то

Comments

[Aetae]

Какие проблемы то? Рисуешь кратинку 1 - бутыль. Рисуешь кратинку 2 - содержимое. Накладываешь 2 на 1 обрезая по нужному уровню.
Делается элементарно сотней способов.

Если же тебе нужен список кем-то сделанных готовых вариантов - то гугли сам. Наполнение бутылок не является сколько-нибудь частой задачей для веба, чтоб кто-то написал 100500 популярных библиотек для этого из которых можно повыбегать.

[Ankhena]

А как бы вы закрашивали цветом обычный прямоугольный столбик?
Вот тоже самое, только поверх бутылка с прозрачной частью или маска.

[WbICHA]

Находишь 3д модель бутылки, переносишь её в в webgl, имитируешь поведение воды, заполняешь. Всё просто!)

[imko]

Спрос на плагины бутыки растет

Answer 1

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

Answer 2

[Сергей delphinpro]

Рисуем бутылку в фотошопе или иллюстраторе.
В иллюстраторе делаем внутренний контур.
Поверх бутылки накладываем див, у которого фон закрашивается по вертикали на необходимый уровень
Делаем из контура свгэшку и накладываем svg-маску на див-заполнитель.