Just recently, I have been able to finally get around to my portfolio projects, which had long been in the works. One of the main things that kept me from building it out is that I wanted some unique effect in the website.

After some brainingstorming, I decided to come up with an animated, pixelated background effect. It is in use on my website. So, how did I make this effect?

This effect is composed of three distinct layers that are rendered stacked on top of one another:

Any noise pattern can be used to generate the noise, but I found that simplex noise works the best, because of its ability to be generated in 3 dimesnions: x, y, and time.

To start, we can define the initial setup for the noise:

This gets us off to a great start, as you can see below.

Using the 3D instead of 2D noise allows for a smooth iteration through time, which is what I was going for in my website.