The ability of developers to do amazing things with code never ceases to amaze. Sure, functionality still plays a huge role. But these days, we also see some otherworldly visuals come to life through the help of CSS and JavaScript, among others.
Today, we’re going to focus on an area that is sure to grab your attention: Background patterns. Note that there is no subtlety here. The code snippets we’re about to show you turn up the volume to 11. Some even include far-out animations to enhance the effect.
In that way, they may not be ideal for use on your new portfolio, but they are terrific examples of what is possible with some coding knowledge and a lot of creativity. Enjoy!
Oh, and you may want to put on your sunglasses first.
60’s Wallpaper
This retro-inspired mix of orange and blue was created with a whopping eight lines of SCSS. While it’s not animated, staring at it in just the right way does provide the feeling of movement. Now, if they only made pants with this pattern…
See the Pen Orange &Blue 🧡💙 by Gemma Stiles
Moiré, Please
Here we have another orange and blue example, this time with motion added to the mix. It’s a Moiré (interference) pattern and is quite intense to watch. The noisy look is reminiscent of an old video game played on a cheap television. *Those who have adverse reactions to such visuals may want to avoid this one.
See the Pen Moire pattern orange-blue [p5.js] by Marjel
Sun King
This psychedelic animation looks like it belongs on a huge screen at a rock concert. The JavaScript-powered effects are attractive and intricate. And due to its somewhat tame movement, you might even be tempted to use it in your own project.
See the Pen Promesse dorée by Bailh
The ‘G’ Stands for Generator
SVG is a great tool for creating background patterns and effects, as they’re sharp and flexible. This snippet offers a way to create your own pattern, either randomly or via a settings panel.
See the Pen SVG Background Pattern Generator by Brandon Brule
On Target
Few things get a user’s attention, like the combination of movement and color. Here, we have an example that employs this tandem quite effectively. The mesmerizing, ghost-like bullseyes are enhanced with bands of color as they fly past. The result is a pattern that holds your interest rather than scaring you away.
See the Pen Ripples in Time 2 by Liam Egan
It’s All Triangles
Some things are just better when they’re simple. Here’s an example of how a few shapes can be combined to create something that looks entirely more complex than it actually is. This set of variously-hued SVG triangles (check out the white outline on the upper left of the snippet) gives off a 3D vibe that encourages users to keep on staring.
See the Pen SVG triangle pattern by huibvg
Interlock Engaged
Keeping with the theme of simplicity, take a look at this CSS-only pattern. It’s essentially a set of interlocking shapes that repeat across the screen. And, once again, the result looks like something more than the sum of its parts. Especially so when you consider that this snippet is less than 70 lines of code. Repeating this with, say, Photoshop, would be multitudes more time-consuming.
See the Pen CSS Background Pattern by carpe numidium
Thrice the Fun
Multiple animated patterns on the same screen? “Heresy,” you say. In reality, it’s actually pretty cool. Three equal columns, each featuring a different coloring and animation style. They’re loud but also seem to fit together nicely. As a bonus, hover over a column, and it expands. In a way, it’s reminiscent of a TV show with a wall of monitors in the background.
See the Pen Background Pattern Animation by ichimonzi
In most cases, the snippets above are not practical for everyday use (unless you’re into that whole brutalist thing). But that’s part of what makes them fun. Heck, that’s what makes CodePen itself so great. It’s for experimentation and creating things that you might not otherwise attempt.
And sometimes, the knowledge you gain from building something like a colorful pattern might be used again for a more general purpose. Just the experience in itself can be rewarding.
So, while these patterns may stick out like a sore thumb, they do serve an important purpose. Perhaps they fit right in with a web designer’s quest for self-improvement.
Top