Class Gradient

constructor

• new Gradient(colors: Color[]): Gradient

  Define a new linear color gradient using an array of color stops. Gradients can include any number of color stops, which are all equally spaced from one another.

  Parameters

  • colors: Color[]

    An array of colors to define this color gradient

  Returns Gradient

  Example

  const redBlue = new Gradient([
      new Color(255, 0, 0),
      new Color(0, 0, 255),
  ]);
  Copy

Readonlycolors

getColor

• getColor(x: number, min?: number, max?: number): Color

  Linearly interpolate between color stops to get a color along this gradient.

  Parameters

  • x: number

    A value between min, max to use for selecting a color along this gradient. An x value of min will select the first color stop, and an x value of max will select the last color stop. If min and max are not present, x should be a normalized value.
  • min: number = 0

    The minimum range of the color scale
  • max: number = 1

    The maximum range of the color scale

  Returns Color

  The interpolated color

  Example

  const myColor = redBlue.getColor(0.5);
  // Returns interpolated color (127.5, 0, 127.5)
  Copy

toString

• toString(deg?: number): string

  Return a string representation of this gradient.

  Parameters

  • deg: number = 90

    The direction of this color gradient, in degrees

  Returns string

  A valid CSS color gradient

  Example

  const str = redBlue.toString(180);
  // linear-gradient(180deg,rgba(255,0,0,100%),rgba(0,0,255,100%))
  Copy

toSVG

• toSVG(id: string, deg?: number): SVGLinearGradientElement

  Generate an SVG linear gradient element.

  Parameters

  • id: string

    The ID of this linear gradient, to be obtained with url(#id)
  • deg: number = 90

    The angle of this color gradient, in degrees clockwise from the vertical

  Returns SVGLinearGradientElement

  A valid SVG color gradient

  Example

  const linearGrad = grad.toSVG('myGrad');
  // Returns a <linearGradient> element to be appended onto <defs>
  Copy