Say hello

Water Effect.

About

This lightweight water/liquid effect was made using SVG filters and pure JavaScript.


Nuance

The technology is very new, and not all browsers support it.

Live Preview

HTML

In HTML we have to create an SVG filter.

CSS

In CSS we must set the SVG filter id to the filter property.

JavaScript

To animate the SVG filter we have to change the value of the baseFrequency attribute of this filter.


The animation will be rendered recursively using requestAnimationFrame method.