Как сделать такой калькулятор?

Question

[axblue]

Здравствуйте. Хочу сделать калькулятор не знаю при помощи чего и как можно реализовать. А конкретнее, есть флакон(см. скриншот). Нужно динамически подгружать содержимое в нем. То есть если я выставлю 50% воды, то он должен заполниться на половину. Как сделать сам флакон, картинкой(которая будет фоном) или же нарисовать её фигурой? Пока ток думаю про canvas, но не знаю с чего начать. Помогите в трех словах.

Answer 1

[Роман Татаринов]

На счет SVG не знаю, но я бы сделал как систему рейтинга на CSS. Там при наведении меняется бэкграунд, а в вашем случае при изменении значения в инпуте. Только рейтинг можно без js сделать, у вас немного добавить нужно.
Пример 1: codepen.io/andreas_pr/pen/rxkpB
Пример 2: codepen.io/michaelord/pen/mDfaj

Answer 2

[Ninja Mate]

jsbin.com/ovuret/722/edit?html,css,js,output

Comments

[axblue]

не совсем понял что он делает...

[Ninja Mate]

AX Blue: рисует овалы разных цветов. можно ими заполнять нужную область.

[Ninja Mate]

AX Blue: квадраты рисовать еще проще.