# webgl-decorative-backgrounds

> > Sample decorative backgrounds using WebGL

Latest version **1.0.6** (published 2018-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install webgl-decorative-backgrounds
pnpm add webgl-decorative-backgrounds
yarn add webgl-decorative-backgrounds
bun add webgl-decorative-backgrounds
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2018-06-06 |
| First published | 2018-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 9.x |
| Dependencies | 10 |
| Unpacked size | 90.6 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | yes |
| GitHub stars | 3 |
| Author | Erik Nielsen |
| Maintainers | nielse63 |

## Links

- npm: https://www.npmjs.com/package/webgl-decorative-backgrounds
- Repository: https://github.com/nielse63/WebGL-Decorative-Backgrounds
- Homepage: https://github.com/nielse63/WebGL-Decorative-Backgrounds#readme
- Issues: https://github.com/nielse63/WebGL-Decorative-Backgrounds/issues
- npm.io page: https://npm.io/package/webgl-decorative-backgrounds

## Dependencies (10)

- [pm2](https://npm.io/package/pm2.md) ^2.10.4
- [chalk](https://npm.io/package/chalk.md) ^2.4.1
- [puppeteer](https://npm.io/package/puppeteer.md) ^1.4.0
- [release-it](https://npm.io/package/release-it.md) ^7.4.7
- [imagemin-cli](https://npm.io/package/imagemin-cli.md) ^3.0.0
- [@nielse63/webgl-brain](https://npm.io/package/@nielse63/webgl-brain.md) ^1.0.5
- [@nielse63/webgl-cubes](https://npm.io/package/@nielse63/webgl-cubes.md) ^1.0.5
- [@nielse63/webgl-waves](https://npm.io/package/@nielse63/webgl-waves.md) ^1.0.5
- [@nielse63/webgl-sphere](https://npm.io/package/@nielse63/webgl-sphere.md) ^1.0.5
- [@nielse63/webgl-network](https://npm.io/package/@nielse63/webgl-network.md) ^1.0.5

## Recent versions

- 1.0.6 (latest) — 2018-06-06
- 1.0.5 — 2018-06-05

## README

# WebGL Decorative Backgrounds

> Sample decorative backgrounds using WebGL

[![Build Status](https://travis-ci.org/nielse63/WebGL-Decorative-Backgrounds.svg?branch=master)](https://travis-ci.org/nielse63/WebGL-Decorative-Backgrounds)
[![npm](https://img.shields.io/npm/v/webgl-decorative-backgrounds.svg)](https://www.npmjs.com/package/webgl-decorative-backgrounds)
![node](https://img.shields.io/node/v/webgl-decorative-backgrounds.svg)

[![Maintainability](https://api.codeclimate.com/v1/badges/22cea98ae5b00bbccf64/maintainability)](https://codeclimate.com/github/nielse63/WebGL-Decorative-Backgrounds/maintainability)
![David](https://img.shields.io/david/nielse63/webgl-decorative-backgrounds.svg)
![David](https://img.shields.io/david/dev/nielse63/webgl-decorative-backgrounds.svg)

## Demos

* [Demo Homepage](https://nielse63.github.io/WebGL-Decorative-Backgrounds/)
* [The Brain](https://nielse63.github.io/WebGL-Decorative-Backgrounds/brain.html)
* [Cubes](https://nielse63.github.io/WebGL-Decorative-Backgrounds/cubes.html)
* [Network](https://nielse63.github.io/WebGL-Decorative-Backgrounds/network.html)
* [Sphere](https://nielse63.github.io/WebGL-Decorative-Backgrounds/sphere.html)
* [Waves](https://nielse63.github.io/WebGL-Decorative-Backgrounds/waves.html)

![WebGL Decorative Backgrounds](src/images/screenshots/cubes.min.gif "WebGL Decorative Backgrounds")

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:

```bash
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:

```bash
yarn add @nielse63/cubes
```

To see all the scoped packages available for installation, visit the [`packages/`](https://github.com/nielse63/WebGL-Decorative-Backgrounds/tree/master/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:

```js
import cubes from '@nielse63/cubes';

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

## Credit

* [Original Article on Codrops](https://tympanus.net/codrops/2017/11/28/decorative-webgl-backgrounds/)

---
_Source: https://npm.io/package/webgl-decorative-backgrounds · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._