Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
tinygradient
Advanced tools
Fast and small gradients manipulation, built on top of TinyColor
Weekly downloads
Readme
Easily generate color gradients with an unlimited number of color stops and steps.
$ npm install tinygradient
The gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors.
The tinygradient
constructor takes a list or an array of colors stops.
// using varargs
var gradient = tinygradient('red', 'green', 'blue');
// using array
var gradient = tinygradient([
'#ff0000',
'#00ff00',
'#0000ff'
]);
The colors are parsed with TinyColor, multiple formats are accepted.
var gradient = tinygradient([
tinycolor('#ff0000'), // tinycolor object
{r: 0, g: 255, b: 0}, // RGB object
{h: 240, s: 1, v: 1, a: 1}, // HSVa object
'rgb(120, 120, 0)', // RGB CSS string
'gold' // named color
]);
You can also specify the position of each color stop (between 0
and 1
). If no position is specified, stops are distributed equidistantly.
var gradient = tinygradient([
{color: '#d8e0de', pos: 0},
{color: '#255B53', pos: 0.8},
{color: '#000000', pos: 1}
]);
Each method takes at least the number of desired steps.
The generated gradients might have one more step in certain conditions.
// RGB interpolation
var colorsRgb = gradient.rgb(9);
// HSV clockwise interpolation
var colorsHsv = gradient.hsv(9);
// HSV counter-clockwise interpolation
var colorsHsv = gradient.hsv(9, true);
There are also two methods which will automatically choose between clockwise and counter-clockwise.
// HSV interpolation using shortest arc between colors
var colorsHsv = gradient.hsv(9, 'short');
// HSV interpolation using longest arc between colors
var colorsHsv = gradient.hsv(9, 'long');
Each method returns an array of TinyColor objects, see available methods.
The css
method will output a valid W3C string (without vendors prefix) to use with background-image
CSS property.
// linear gradient to right (default)
var gradientStr = gradient.css();
// radial gradient ellipse at top left
var gradientStr = gradient.css('radial', 'farthest-corner ellipse at top left');
Returns a single TinyColor object from a defined position in the gradient (from 0 to 1).
// with RGB interpolation
colorAt55Percent = gradient.rgbAt(0.55);
// with HSV interpolation
colorAt55Percent = gradient.hsvAt(0.55);
Returns a new instance of TinyGradient with reversed colors.
var reversedGradient = gradient.reverse();
Returns a new instance of TinyGradient with looped colors.
var loopedGradient = gradient.loop();
I is possible to define stops with the pos
property only and no color
. This allows to define the position of the mid-point between the previous and the next stop.
var gradient = tinygradient([
{color: 'black', pos: 0},
{pos: 0.8}, // #808080 will be at 80% instead of 50%
{color: 'white', pos: 1}
]);
This library is available under the MIT license.
FAQs
Fast and small gradients manipulation, built on top of TinyColor
The npm package tinygradient receives a total of 299,700 weekly downloads. As such, tinygradient popularity was classified as popular.
We found that tinygradient demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.