npm

Need private packages and team management tools?Check out npm Orgs. »

gradient-all

1.1.0 • Public • Published

gradient.js [gradient-all]

Gradient creation library running in the browser 🖌🌈

License   Travis build

gradient.js is a javascript module that takes your source colors array and configuration object, and returns a gradient suitable for your needs.

gradient.js is built on top of chroma-js color manipulation library (Copyright (c) 2011-2017, Gregor Aisch).

You need to install chroma-js as a dependency to start working with gradient.js.

Contents

Installation

  1. Via npm
npm install --save-dev gradient-all
  1. Via browser as a umd module
<script src="https://unpkg.com/gradient-all@1.0.0/gradient.js">

Usage

Depending on your needs, you can use one of the three modules: Base, Css and Svg. The Css and Svg modules are using Base under the hood as an internal dependency.

So if you want to get a gradient as an array of arrays of rgb(a) numbers, type the following code:

import { Base } from 'gradient'
 
const base = new Base()
const rawGradient = base.get(yourColors, yourConfig) // number[][]

If you want to get a css gradient, you don't need to use the Base. Css does it for you.

import { Css } from 'gradient'
 
const css = new Css()
const cssGradient = css.get(yourColors, yourConfig) // css string

The same applies to the SVG module

import { Svg } from 'gradient'
 
const svg = new Svg()
const svgGradient = svg.get(yourColors, yourConfig) // svg gradient element

Parameters

Colors

Colors input should be an array of numbers in rgb or rgba format.

[
    [0, 222, 31, 0.4],
    [12, 22, 34]
]

Or an array of css rgb(a) strings.

[
    'rgba(10, 23, 34, 0.5)',
    'rgba(47, 3, 120, 0.5)'
]

Please note that the input colors are the source for further creation of probably bigger amount of outputs. Try to insert max. 5 colors as an input for better visual effect.

Options

The shape of the options object will change depending on the module you are going to use. So in case of getting raw numbers gradient you will need the Base options object.

If you want to get a css gradient, the options will have to consist of two entries with two configuration objects.

You must always pass the Base options to your configuration.

Example

import { Base, Css, Svg } from 'gradient'
 
const colors = [
    [10, 33, 22, 0.90],
    [120, 23, 44, 1]
]
const baseConfig = {
    interpolation: 'bezier',
    mode: 'none',
    samples: 10,
    lightnessCorrection: true
}
 
const base = new Base()
const css = new Css()
const svg = new Svg()
 
const rawGradient = base.get(colors, baseConfig)
const cssGradient = css.get({
    base: baseConfig,
    css: {
        type: 'radial',
        shape: 'ellipse',
        top: 44,
        left: 30,
        extent: 'farthest-side'
    }
})
const svgGradient = svg.get(colors, {
    base: baseConfig,
    svg: {
        type: 'radial',
        cx: 0.5,
        cy: 0.5,
        r: 0.4,
        spreadMethod: 'reflect'
    }
}) // returns svg gradient element
 
const rawSvgGradient = svg.get(colors, {
    base: baseConfig,
    svg: {
        type: 'radial',
        cx: 0.5,
        cy: 0.5,
        r: 0.4,
        spreadMethod: 'reflect'
    },
    true
}) // returns an object

Notes

  • The bezier interpolation ignores opacity values.

install

npm i gradient-all

Downloadsweekly downloads

17

version

1.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability