To help you get started, we've collected the most common ways that tinygradient is being used within popular public projects.

rekit / rekit / packages / rekit-studio / src / features / rekit-tools / TestCoverageSummary.js View on Github

renderReport() {
    // const color = d3
    //   .scaleLinear()
    //   .domain([0, 90])
    //   .range(['#ef5350', '#81C784']);
    // let arr = [];
    // for (let i = 5; i < 100; i += 20)arr.push(i);
    // arr = _.shuffle(arr);
    const gradient = tinygradient(['#ef5350', '#81C784']);
    const { features, featureById } = this.props.home;

    // const trs = /.+<\/tr>/mig.exec(this.state.reportData.replace(/\r|\n/g, ''));

    // statements coverage
    const coverage = features.reduce((c, fid) => {
      c[fid] = { tested: 0, total: 0 };
      return c;
    }, {});
    const html = this.state.reportData.replace(/[\r\n]/g, '');
    /<span class="strong">([\d.]+)% &lt;\/span&gt;/.test(html);
    const overallCoverage = parseFloat(RegExp.$1);
    const res = /.+&lt;\/table&gt;/gi.exec(html);
    const node = document.createElement('div');
    node.innerHTML = res[0];
    const table = node.firstChild;<table class="coverage-summary"></table></span>

View more ways to use tinygradient

tinygradient

Easily generate color gradients with an unlimited number of color stops and steps.

Live demo

Installation

$ npm install tinygradient

Dependencies

• TinyColor

Usage

The gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors.

Initialize gradient

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}
]);

Generate gradient

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.

Get CSS gradient string

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');

Get color at a specific position

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);

Reversing gradient

Returns a new instance of TinyGradient with reversed colors.

var reversedGradient = gradient.reverse();

Loop the gradient

Returns a new instance of TinyGradient with looped colors.

var loopedGradient = gradient.loop();

Position-only stops

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}
]);

License

This library is available under the MIT license.