color4bg.js

Super easily generate dynamic, abstract, and visually stunning background images for your web pages based on WebGL and JavaScript. High performance.

Demo

Please visit: color4bg.com

🚀 Features

• Customizable Colors: You can specify an array of up to 6 colors that will be used to generate the background pattern.
• Dynamic Animation: The generated background can be set to loop, creating a mesmerizing, fluid animation.
• Consistent Patterns: By providing a seed value, you can ensure that the same pattern is generated every time, making it easy to integrate into your web design.
• Easy Integration: Simply import the **Bg class and create an instance with your desired settings.

📦 Installation

Install color4bg via npm:

npm install color4bg

Or via yarn:

yarn add color4bg

Or via pnpm:

pnpm add color4bg

📦 Usage

To use color4bg.js, follow these steps:

For example, if you want to add Aesthetic Fluid Bg:

1. Import the AestheticFluidBg class from the package:

import { AestheticFluidBg } from "color4bg"

2. Create an instance of AestheticFluidBg with your customized settings:

let colorbg = new AestheticFluidBg({
    dom: "box",
    colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"],
    seed: 1000,
    loop: true
})

// Don't forget to start the animation
colorbg.start()

Available Background Classes

You can import any of the following background classes:

import {
  AbstractShapeBg,
  AestheticFluidBg,
  AmbientLightBg,
  BigBlobBg,
  BlurDotBg,
  BlurGradientBg,
  ChaosWavesBg,
  CurveGradientBg,
  GridArrayBg,
  RandomCubesBg,
  StepGradientBg,
  SwirlingCurvesBg,
  TrianglesMosaicBg,
  WavyWavesBg,
  ColorBg  // Base class
} from "color4bg"

Configuration Options

| Key | Value | Describe | | :-------- | :------- | :-------------------------------- | | dom | string | Id of DOM element where to append colorbg, no need to add "#" | | colors | Array | An array of up to 6 hexadecimal color values | | seed | Number | A Pseudo-random numerical value used to generate a consistent pattern. | | loop | Bool | Determines whether the background should animated looply or not |

For more usage, see examples

All Background(Bg) Types

License

This project is licensed under the MIT License.