Read my book

I wrote books about Webpack and React. Check them out!

Sunday, December 28, 2014

HTML5 Canvas Gradients - Animating Gradients

In my previous post I showed you how to generate something I called lattice gradient. That got me thinking. Wouldn't it be cool to animate this sort of thing? Apparently yes.


See demo below. Put some Quincy Jones as background music and tweak the values of the script for extra hilarity.

JS Bin

Code Example

Here's the full code (not visible in RSS):

I am quite certain the code can be optimized a lot. Now it does plenty of ineffective things. Some lookups could be memoized or even precalculated and so on.