Water Ripple Effect


  • Click on the water to make a splash!


  • Ripple refraction.
  • Ripple shadow.
  • Ripples reflect off walls.


Browser Support

  • Chrome - This is a chrome experiment and hence works best with Google Chrome. The Chrome browser is free, so download it here.
  • Firefox - Works, but is slower than Chrome.
  • Opera - Works.
  • Internet Explorer - Not supported.


  • If this demo is running slowly try a smaller canvas size.
  • A nice shallow water effect can be created by setting the damping and refraction to zero and the shading to four. Then make a couple waves and let it run.
  • This project was largely inspired by this article on 2D water effects.