https://github.com/prodbyeagle/grainient

Transform Your Canvas with Stunning Gradients
https://github.com/prodbyeagle/grainient

Last synced: about 2 months ago
JSON representation

Transform Your Canvas with Stunning Gradients

• Host: GitHub
• URL: https://github.com/prodbyeagle/grainient
• Owner: prodbyeagle
• Created: 2024-07-27T06:38:29.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-09-15T07:43:45.000Z (4 months ago)
• Last Synced: 2024-10-28T15:00:36.675Z (3 months ago)
• Language: HTML
• Homepage: https://prodbyeagle.github.io/grainient/
• Size: 4.68 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Grainient

**Grainient** is a handy library for adding cool gradient and grain effects to your HTML5 canvas.

## Installation

Get started by installing Grainient with npm:

```bash

npm install @prodbyeagle/grainient

```

## Usage

### Basic Usage

To use Grainient, import the functions and call the `Gradient` function with your desired options:

```javascript

import { Gradient } from '@prodbyeagle/grainient';

// Get your canvas element

const canvas = document.getElementById('myCanvas');

// Set up your gradient options

const options = {

  colors: ['#ff0000', '#00ff00', '#0000ff'], // Minimum 2, maximum 8 colors

  grain: 20,  // Optional: Add grain effect with intensity between 0 and 50

  type: 'linear',  // Optional: 'linear' or 'radial'

  angle: 45  // Optional: Angle in degrees (default is 45 for linear gradients)

};

// Apply the gradient

Gradient(canvas, options);

```

### Gradient Types

- **Linear Gradient**: Smooth transition along a straight line.

- **Radial Gradient**: Transitions from a central point outward.

### Examples

#### Linear Gradient Example

```html

  Linear Gradient Example

  

  

    import { Gradient } from '@prodbyeagle/grainient';

    const canvas = document.getElementById('myCanvas');

    const options = {

      colors: ['#ff0000', '#00ff00', '#0000ff'],

      type: 'linear',  // Linear gradient

      angle: 90  // Horizontal gradient

    };

    Gradient(canvas, options);

  

```

#### Radial Gradient Example

```html

  Radial Gradient Example

  

  

    import { Gradient } from '@prodbyeagle/grainient';

    const canvas = document.getElementById('myCanvas');

    const options = {

      colors: ['#ff0000', '#00ff00', '#0000ff'],

      type: 'radial'  // Radial gradient

    };

    Gradient(canvas, options);

  

```

### Adding Grain Effect

You can add a grainy texture to your gradient using the `applyGrain` function:

```javascript

import { applyGrain } from '@prodbyeagle/grainient';

const canvas = document.getElementById('myCanvas');

const ctx = canvas.getContext('2d');

if (ctx) {

  applyGrain(ctx, canvas.width, canvas.height, 20); // Intensity from 0 to 50

}

```

## Options

- **`colors`**: An array of color strings (e.g., `['#ff0000', '#00ff00']`). Must have between 2 and 8 colors.

- **`grain`** (optional): Intensity of the grain effect (integer from 0 to 50). Default is `0` (no grain).

- **`type`** (optional): Gradient type. Can be `'linear'` or `'radial'`. Default is `'linear'`.

- **`angle`** (optional): Angle for linear gradients in degrees (default is `45`).

## Demo

Check out a live demo of Grainient in action here: [Grainient Demo](https://prodbyeagle.github.io/grainient/). Play around with the settings and see how Grainient works!

## License

This project is licensed under the MIT License.

## Author

Created by @prodbyeagle 🦅

---