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. 😎
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…
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.
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.
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.
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.
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.
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 an added 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.
Say It Loud
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.
Want to see even more examples? Take a look at our CodePen collection.
- 8 Snippets That Demonstrate the Repelling Effect in Web Design
- Bringing the Curtain Effect to Your Website with These Snippets
- Forge Your Own (Animation) Path with These Snippets