I wanted to make some fluid wave animations for a website selling pools. So after some research i found Paper.js. As it says on paperjs.org; “Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.”. And with examples looking a lot like what i wanted to make, this looked perfect for what i was looking to achieve.

So from a simple sine wave example i made this. Added an extra sine wave on every other point to make it look more fluid and random. And converted it to OPP so it was easy to add multiple waves.

Here is the JS code (running above):

Here is the result on the actual site: