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.

By in Playground on
Demo Code
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 😉

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you enjoy this set and find it useful!

References and Credits

Louis Hoebregts

Model Texture Transition and Procedural Radial Noise using WebGL

Shaders on Scroll by Faboolea

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll

Scroll-based SVG Filter Animations on Text

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 14

Comments are closed.

  1. Awesome, awesome job Louis. I’d very much like to know where did you learn Three.js to make such stunning visuals. I’m willing to spend month just so I could get near this.

    • Hey !
      Glad you liked it 🙂
      I started learning ThreeJs a few years ago with very basic shapes (cubes, spheres) and tweaking them a bit.
      First by playing with the lights, the colors, the textures.
      Then I checked how those shapes are made and played with their vertices to make them morph / move / …

      I often start with some basic idea in my mind (what if I took a cube that morphed into a sphere) then I crawl the web for examples, tutorials, help on Stackoverflow,…

      When you see nice WebGL ideas, check the source code ! It’s quite easy to access it compared to other programming language 🙂

      You can also join related Slack online (Animation At work’Slack for example)

      ++ Louis

  4. The problem with WebGl backgrounds, it requires too much ressources on low profiles computers. I’ve used this method to create a simple glitch background effect on a previous website and the time to render the scene it takes sometimes a lot of time to display in the same time as other html elements(whenever there’s shades or others elements like tweens). So i’m wondering if it is not better to integrate the html elements directly to the canvas scene instead of putting them outside the canvas. This way it the browser will have to render everything in the same time instead of the html elements plus the canvas (and even create at loader if elements are heavy).

  8. Hi, i have a problem using demo 2 offline, something does not work. no animation is showing up. anybody knowing what the problem is?

  10. Awesome, very awesome!
    I have question, you can make a triangle instead of a sphere?