gradient

gradient

A module for creating linear and radial gradients

Classes

LinearGradient
RadialGradient

Methods

<static> advancedLinear(stops, direction, matrix, repeat, units) → {LinearGradient}

Creates a linear gradient
Parameters:
Name Type Argument Description
stops Array | Object Color stops in the form: `['red','yellow',...]` or `[['red', 0], ['green', 50], ['#FFF', 100]]` i.e. Sub-array [0] is color and [1] is percentage As an object: { 0: 'yellow', 50: 'red', 100: 'green' }
direction Number | String Direction in degrees or a string, one of: `top`, `left`, `right`, `bottom`, `top left`, `top right`, `bottom left`, `bottom right`
matrix Matrix <optional>
Matrix transform for gradient
repeat String <optional>
How many times to repeat the gradient
units String <optional>
Either 'userSpace' or 'boundingBox'.
Returns:
A LinearGradient instance
Type
LinearGradient

<static> advancedRadial(stops, r, cx, cy, matrix, repeat, units) → {RadialGradient}

Creates a radial gradient
Parameters:
Name Type Argument Description
stops Array Color stops in the form: `['red','yellow',...]` or `[['red', 0], ['green', 50], ['#FFF', 100]]` i.e. Sub-array [0] is color and [1] is percentage
r Number <optional>
Radius in percentage (default: 50)
cx Number <optional>
X coordinate of center of gradient in percentage (default: 50)
cy Number <optional>
Y coordinate of center of gradient in percentage (default: 50)
matrix Matrix <optional>
Matrix transform for gradient
repeat String <optional>
How many times to repeat the gradient
units String <optional>
Either 'userSpace' or 'boundingBox'.
Returns:
A RadialGradient instance
Type
RadialGradient

<static> linear(direction, stops, repeat) → {LinearGradient}

Creates a linear gradient
Parameters:
Name Type Description
direction Number | String Direction in degrees or a string, one of: `top`, `left`, `right`, `bottom`, `top left`, `top right`, `bottom left`, `bottom right`
stops Array | Object Color stops in the form: `['red','yellow',...]` or `[['red', 0], ['green', 50], ['#FFF', 100]]` i.e. Sub-array [0] is color and [1] is percentage As an object: { 0: 'yellow', 50: 'red', 100: 'green' }
repeat Number Number of times to repeat gradient stops
Returns:
A LinearGradient instance
Type
LinearGradient

<static> radial(stops, radius, cx, cy, repeat) → {RadialGradient}

Creates a radial gradient
Parameters:
Name Type Argument Description
stops Array Color stops in the form: `['red','yellow',...]` or `[['red', 0], ['green', 50], ['#FFF', 100]]` i.e. Sub-array [0] is color and [1] is percentage
radius Number <optional>
Radius in percentage
cx Number <optional>
X coordinate of center of gradient in percentage
cy Number <optional>
Y coordinate of center of gradient in percentage
repeat Number <optional>
Number of times to repeat gradient stops
Returns:
A RadialGradient instance
Type
RadialGradient