Textures and patterns have long been a part of web design. Whether used as a subtle background or as a focal point of our content, they help to set the tone for our creations.
But thanks to ever-evolving web technologies, we can use textures and patterns to even greater effect. They no longer have to be confined to static display. Now, they can be combined with motion and shading techniques to produce some mind-blowing graphical features.
We have put together a collection of some highly-creative code snippets that use classic assets in new and exciting ways. Enjoy, and be sure not to operate any heavy machinery for a few minutes after viewing! Your eyes may play some tricks on you.
Big Torus, Little Code
Is That a Petri Dish?
Beyond the beautiful detail of this “circle packing” animation, there could be very useful real-world adaptations. This could be used, say, to demonstrate how bacteria grows or to re-create a pointillistic painting. Regardless, it’s quite mesmerizing to watch.
Textures still make for great backgrounds. And this night sky full of glowing (and occasional shooting) stars shows that special effects don’t have to be overbearing. You can create something that has movement while maintaining usability.
Dynamic Disco Ball
This one is quite interesting. It uses reflection mapping with Three.js to create a disco-ball like surface that changes as you move your cursor. Moving up and down results in a change to the smoothing, while sideways movement increases the “bumpiness” of the texture.
Feed the Tree
That’s a Lot of Dots
At first, this example could be mistaken for footage of a cosmic event. In reality, it’s a script that uses WebGL2 to create transform feedback particles. There are 500,000 color-shifting particles here that react to your cursor movement. If this is indeed happening in space, we’d better take cover.
Back to Math
Let us not even try to explain the concept of a Logarithm. Just know that, in animated form, it is quite compelling to watch. A colorful, shape-shifting texture gives off an incredibly retro vibe. As a bonus, clicking on the animation will create a new effect.
If this doesn’t bring a smile to your face, you might do better studying the mystery math above. With spinning shapes layered on top of an ever-changing background, there is a lot going on here. While probably not a great fit for a page background, it certainly would bring focus to a banner or hero area.
A Pattern of Change
The examples above have taken something basic (a shape, a pattern, etc.) and transformed it into something else completely. These snippets are colorful, interactive and compelling.
It just goes to show what the right mix of coding knowledge and creativity can achieve.
- 8 Fantastic Onboarding Carousel HTML & CSS Snippets
- Send Holiday Cheer with these Pure CSS Christmas Code Snippets
- 8 Snippets That Demonstrate the Repelling Effect in Web Design
- 8 Creative CSS & JS Snippets for Creating Pixelated Backgrounds