WebGL Decorative Backgrounds

Sample decorative backgrounds using WebGL

Demos

• Demo Homepage
• The Brain
• Cubes
• Network
• Sphere
• Waves

Based on the amazing work from the people at Codrops, this is a modern, lightweight extension of previously crafted WebGL Decorative Backgrounds.

Installation

To download and install the entire repo, including all examples, build scripts, etc., clone the repo and install the dependencies:

git clone https://github.com/nielse63/WebGL-Decorative-Backgrounds.git
cd WebGL-Decorative-Backgrounds
yarn

If you only want to use a single background in an existing project, you can install the individual module and import it like you would any other script:

yarn add @nielse63/cubes

To see all the scoped packages available for installation, visit the packages/ directory.

Usage

Assuming you've installed a single, scoped package (i.e. @nielse63/cubes), simply import the main script like you would any other ESModule:

import cubes from '@nielse63/cubes';

const canvas = document.querySelector('canvas');
cubes(canvas);

Credit

• Original Article on Codrops