Decorative WebGL Backgrounds

A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library.
DecorativeWebGLBackgrounds_Featured

Today we are going to explore some original and experimental backgrounds generated using WebGL. The main idea is to show interesting animated shapes as decorative page backgrounds, some having subtle interactivity. All the demos are made with the Three.js WebGL library to create the various shapes, and the animations are controlled by the performant GSAP animation library.

The demos are kindly sponsored by we.design: Snag the hottest new domain name for designers. If you would like to become a demo sponsor, you can find out more here.

Since those demos are created and animated in real time, you can easily add some user interaction.

Attention: Please be aware that this is very experimental and some demos require a fast machine. You may want to create lighter versions for mobile devices. Note that it’s always wise to add a fallback image in your project.

Let’s have a look at the individual demos:

DecorativeWebGLBackgrounds01

The dots in this demo react to the moving mouse with some bounce animations. Those dots are randomly connected through lines and some of them are slowly moving to create an illusion of a real time data set.

DecorativeWebGLBackgrounds02

This demo is only made with dots slowly morphing from a sphere to a line. The animation is the same for all the dots but with a small delay to create the effect of elasticity.

DecorativeWebGLBackgrounds03

The morphing of this demo is controlled using a Perlin noise algorithm to generate a wobble effect. You can control the power of that effect by moving your mouse from the top to the bottom of the screen.

DecorativeWebGLBackgrounds04

This demo is based on the previous one but instead of a solid shape, it is made with lines along its surface. Those lines are slowly moving from the bottom of the shape to its top.

DecorativeWebGLBackgrounds05

There is a retro game aspect on this demo created with only lines along a cube. The cube is slowly distorted like time and space in some science fiction movies.

DecorativeWebGLBackgrounds06

Some may see a mythical octopus, for others it could be an alien bacteria. In any case we don’t really know what this thing is but we can’t take our eyes off its tentacles 😉

We hope you enjoy this set and find it useful!

References and Credits

Previous:
Next:

Tagged with:

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.