efecto llenado botella de liquido???

[helacer]

Buenos días.

Actualmente estoy desarrollando una web. El cliente me solicita que haya la imagen de una botella y dependiendo un porcentaje dado esta se llene hasta cierto punto de agua o de x liquido.

Estuve buscando y encontré algunos ejemplos para hacerlos en flash pero no quiero usar AS3 ni flash... que tan posible es hacerlo con html5, javascript, etc-

Conocen algún ejemplo del que me pueda guiar o me pueden orientar sobre como hacerlo..gracias

[Rafael]

Dependiendo del tipo de gráfico o haces una secuencia de imágenes y llamas a la respectiva. Creo que es lo más fácil.

La otra es que programes un svg con una librería como esta: http://raphaeljs.com/

O una combinación de las 2 anteriores.

La otra será hacer una especie de mask con canvas.

[helacer]

Muchas gracias Rafael por su respuesta.. Me surge otra duda!!!

Yo puedo dibujar la botella con el liquido en illustrator y generar el svg... Luego es fácil manipular dinamicamente este código o la forma correcta seria dibujarla a punta de código desde ceros..


Tiene o conoce algún ejemplo que me pueda ayudar? Gracias

Nota. Si pensé lo de la secuencia pero la idea es que es para representar los porcentajes de 0 a 100% si quiero algo medio preciso me tocaría hacer 100 imágenes "o 20 por lo menos" sería interesante hacerlo dinámico.

[Rafael]

A la pregunta... se me hace que es las 2 cosas.

No he editado svgs, pero se me ocurre que haces la botella al frente y alguna especie de máscara y ahí dentro, la posición del objeto lo animas... cuestión de probar.