gradient-base.js
This module creates base gradient output for gradient.js modules.
Table of contents
gradient.js
Gradient creation library running in the browser 🖌 🌈
gradient.js is a javascript module that takes your source colors array and configuration object, and returns a gradient suitable for your needs.
Usage
Base.get function takes 2 parameters: the colors array and the configuration object.
const base = new Base()
const g = base.get(colors, options)
// [[0,222,31,0.4],[1.3265624999999999,199.890625,31.331640625,0.466328125], (...)]Parameters
Colors
Colors input should be an array of numbers in rgb or rgba format or array of css rgb(a) strings.
Options
Options object stands for the basic settings of the gradient creation, mandatory for the chroma-js library. Its interface looks like below:
{
interpolation: 'linear' | 'bezier'
mode: 'none' | 'lch' | 'lab' | 'rgb' | 'hsv' | 'hsl' | 'hsi' | 'hcl'
samples: number
lightnessCorrection: boolean
}The mode entry is ommited when the interpolation is set to bezier.
Usefullness of setting the lightness correction to true (combined with the bezier interpolation) is very well described by Gregor Aisch here.
The samples stand for the number of the output colors. The more you set, the nicer gradient you get (but with worse performance of course).
Opacity
Alpha values will be not preserved in the output if the interpolation will be set to the bezier value.