HTML5 Water Droplets Effect (Canvas)

Live Demo

This is a compact javascript library that can be used to create water droplets effect at any web page.

The script is purely based on HTML5 and without using images to create the water droplet. It means that, all the droplets are created with the help of browsers HTML5 canvas capability. Each and every parameter of the droplet can be modified to fit your web page theme.

For example:

• Water Droplet Size
• Droplets count
• Border color
• Shade color
• Falling of water droplets

This effect is well suited for (Light and Medium dark backgrounds)

• Contact Pages
• Minimal portfolio pages that needs a refreshing look
• Under construction pages
• Any notification pages like 404

Steps in adding this effect

1. Add a background image to body tag of the HTML page
2. Include this js file

Check out the live DEMO

Sample backgrounds

Textured Backgrounds

Hope you like our product.

Stay beautiful!

Download HTML5 Water Droplets Effect (Canvas)