Noise effects are extremely versatile. They can help establish a retro or futuristic look. And they also provide an easy way to add personality to any design element. Items such as text, images and backgrounds can be enhanced with this cute and sometimes glitchy effect.
So, it’s no surprise that web designers are producing some really creative works that use noise effects. Everything from static features to interactive animations are being shared online. Some of the results are truly stunning.
To prove our point, CodePen has found the best examples of noise effects in action. Want to see for yourself? Let’s bring the noise!
Three-Wave Animation by Chris Gannon
This groovy wave animation is reminiscent of an old fashioned piece of electronic equipment. Noise cues bring some realism to the scene, and SVG makes movements incredibly smooth. This could make a great loading animation.
Check out the Tri-wave Pen by Chris Gannon
SVG Turbulence Filter Test by Simon Coudeville
Here’s a decidedly retro effect that adds Perlin noise to a text container. Adjustable SVG filtering allows you to change the distortion in different ways. The jagged, aliased edges come from a time before high-end video cards made graphics look silky smooth.
See the SVG Pen Turbulence Filter Test by Simon Coudeville
Noise Ghost (WebGL Shader) by Ksenia Kondrashova
Noise can be scary, as evidenced by this ghost following your cursor’s path. Note the grainy outer parts of the character, where it seems to have faded into thin air. The animation is authentic – not to mention a whole lot of fun.
See the Noisy Pen ghost (WebGL shader) by Ksenia Kondrashova
Pure CSS glitch with Tí
Depending on your perspective, this glitchy scene could be considered modern or retro. But what is not to be done are the sharp movements and color changes. This section may prompt you to check your monitor settings – just in case something is off.
Check out Tee’s Glitch Pen Pure CSS Experiment (Twitch Intro WIP).
Dynamic Watercolor Effect by Shaw
By mixing watercolor colors and polygons, this presentation has a worn look. Click or touch the canvas to add a splash of vibrant color. The whole thing is a fun interactive art project.
Check out the Dynamic Watercolor Pen 🖌️
The Art of Noise by Tibix
This snippet’s colorful transition blogs are like a heat map. Use the control panel to adjust the size, speed, shape and color of the animation. Once again, noise effects add some realistic properties to the mix.
See the Art of Noise Pen #8 by Tibix
WebGL Particles & Noise Displacement by Nicolas Garnier
For a more modern take on the effects of noise, check out this particle animation. It uses WebGL to create liquid-like 3D waves, with incredible light shading to boot. Noise affects as the lighting transitions from dark to bright white. It’s both trivial and an example of what this powerful JavaScript library is capable of.
See Pen WebGL particles + noise displacement by Nicolas Garnier
Risograph Gradient Effect with SVG by Christopher Kirk-Nielsen
There are no fancy animations here. Likewise, this shape shows that noise effects can also enhance static elements. The detailed granularity will definitely help you create an aesthetic while grabbing a user’s attention.
See the Gradient Effect Risograph Pen with SVG by Christopher Kirk-Nielsen
Making Noise For Pleasure
Whether it’s used as a subtle backdrop or the star of the show, noise effects make a great addition to a designer’s toolbox. They can be just the thing to add some flair to your projects.
Back in the day, noise was just an addition to an image editor. But thanks to CSS and JavaScript, these effects can be implemented without compromising performance or accessibility. As the clips above show, there’s a world of potential here.
We hope you enjoyed this discussion of what noise effects can do. If you want to see more examples, check out our CodePen collection.
