Amazing Texture & Pattern Effects with CSS & JavaScript

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

The mathematical concept of a torus is a fascinating ring-shaped revolution. This example is simply stunning. It demonstrates the concept better than anyone could possibly explain it. What’s more, it uses a mere 33 lines of JavaScript to create. You may have the urge to stare at this one for a few hours.

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.

Night Glow

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

Here we have an animated tree that is reminiscent of a hand-drawn flipbook. The tree sprouts up and forms leaves as a scribbly background moves furiously about. Even better is that it uses just HTML5 Canvas and JavaScript – no images necessary.

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.

Hello, Sunshine

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.

The post Amazing Texture & Pattern Effects with CSS & JavaScript appeared first on Speckyboy Web Design Magazine.