Quick start

Installation


npm install @mesh-gradient/core


pnpm add @mesh-gradient/core


yarn add @mesh-gradient/core


bun add @mesh-gradient/core

Usage

Place the canvas element in body of your HTML file.

index.html


<body>
  <canvas id="canvas" style="width: 10rem; height: 10rem;"></canvas>
</body>

Import the MeshGradient class and initialize the gradient by passing the canvas element.

index.ts


import { MeshGradient } from '@mesh-gradient/core';
 
const gradient = new MeshGradient();
 
gradient.init('#canvas');

That’s it! You should see the the result on the page:

Note: By default, colors and seed (initial pattern) of the gradient are generated randomly.

Configure gradient

The mesh gradient can be configured by passing an options object as the second argument to the init method.


import { type MeshGradientOptions } from '@mesh-gradient/core';
 
const options: MeshGradientOptions = {
  colors: ['#043D5D', '#032E46', '#23B684', '#0F595E'],
};
 
gradient.init('#canvas', options);

You can generate code for config by using Playground interface or explore all available options in the API section.