Data utilities
Umbrella package
@visx/gradient
Inspired by: https://dribbble.com/shots/3380672-Sketch-Gradients-Freebie
Example
import { AreaClosed } from '@visx/shape';
import { GradientPinkBlue } from '@visx/gradient';
const GradientArea = () => {
return (
<svg>
<GradientPinkBlue id="gradient" />
<AreaClosed fill="url('#gradient')" />
</svg>
);
};
The Definition Caveat
Like patterns, gradients are "defined." When you render <GradientPinkBlue />
, it's rendering a
<linearGradient/>
element inside a <def>
in the SVG.
It's often better to think of these as variable definitions rather than true DOM elements. When you
use fill="url('#gradient')"
you're referencing the gradient's id: gradient
.
Make your own!
In addition to the preset linear gradients, you can make any linear or radial gradient like so:
import { LinearGradient, RadialGradient } from '@visx/gradient';
<LinearGradient from="#a18cd1" to="#fbc2eb" />;
<RadialGradient from="#a18cd1" to="#fbc2eb" />;
Installation
npm install --save @visx/gradient
Examples
<Gradient.LinearGradient /> <Gradient.RadialGradient />
<Shape.Pie />
<Chord.Chord /> & <Chord.Ribbon />
<Shape.AreaClosed />
<Shape.Bar />
<Drag.Drag />
APIs
#<LinearGradient />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
Default 0%
ReactText
Opacity of the 'from' starting color.
Default 1
ReactText
Rotation to apply to gradient.
string
End color of gradient.
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
Default 100%
ReactText
Opacity of the 'to' ending color.
Default 1
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
Default true
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.
#<RadialGradient />
ReactNode
Override of linearGradient children.
ReactText
Start color of gradient.
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
Default 0%
ReactText
Opacity of the 'from' starting color.
Default 1
string
Unique id for the gradient. Should be unique across all page elements.
ReactText
Rotation to apply to gradient.
ReactText
End color of gradient.
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
Default 100%
ReactText
Opacity of the 'to' ending color.
Default 1
string
Transform to apply to linearGradient, overrides rotate.
#<GradientDarkgreenGreen />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
Default #184E86
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
ReactText
Opacity of the 'from' starting color.
ReactText
Rotation to apply to gradient.
string
End color of gradient.
Default #57CA85
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
ReactText
Opacity of the 'to' ending color.
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.
#<GradientLightgreenGreen />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
Default #42E695
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
ReactText
Opacity of the 'from' starting color.
ReactText
Rotation to apply to gradient.
string
End color of gradient.
Default #3BB2B8
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
ReactText
Opacity of the 'to' ending color.
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.
#<GradientOrangeRed />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
Default #FCE38A
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
ReactText
Opacity of the 'from' starting color.
ReactText
Rotation to apply to gradient.
string
End color of gradient.
Default #F38181
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
ReactText
Opacity of the 'to' ending color.
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.
#<GradientPinkBlue />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
Default #F02FC2
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
ReactText
Opacity of the 'from' starting color.
ReactText
Rotation to apply to gradient.
string
End color of gradient.
Default #6094EA
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
ReactText
Opacity of the 'to' ending color.
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.
#<GradientPinkRed />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
Default #F54EA2
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
ReactText
Opacity of the 'from' starting color.
ReactText
Rotation to apply to gradient.
string
End color of gradient.
Default #FF7676
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
ReactText
Opacity of the 'to' ending color.
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.
#<GradientPurpleOrange />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
Default #7117EA
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
ReactText
Opacity of the 'from' starting color.
ReactText
Rotation to apply to gradient.
string
End color of gradient.
Default #EA6060
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
ReactText
Opacity of the 'to' ending color.
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.
#<GradientPurpleRed />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
Default #622774
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
ReactText
Opacity of the 'from' starting color.
ReactText
Rotation to apply to gradient.
string
End color of gradient.
Default #C53364
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
ReactText
Opacity of the 'to' ending color.
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.
#<GradientPurpleTeal />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
Default #5B247A
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
ReactText
Opacity of the 'from' starting color.
ReactText
Rotation to apply to gradient.
string
End color of gradient.
Default #1BCEDF
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
ReactText
Opacity of the 'to' ending color.
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.
#<GradientSteelPurple />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
Default #65799B
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
ReactText
Opacity of the 'from' starting color.
ReactText
Rotation to apply to gradient.
string
End color of gradient.
Default #5E2563
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
ReactText
Opacity of the 'to' ending color.
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.
#<GradientTealBlue />
Unique id for the gradient. Should be unique across all page elements.
ReactNode
Override of linearGradient children.
string
Start color of gradient.
Default #17EAD9
ReactText
Number or percent defining the where the 'from' starting color is placed along the gradient.
ReactText
Opacity of the 'from' starting color.
ReactText
Rotation to apply to gradient.
string
End color of gradient.
Default #6078EA
ReactText
Number or percent defining the where the 'to' ending color is placed along the gradient.
ReactText
Opacity of the 'to' ending color.
string
Transform to apply to linearGradient, overrides rotate.
boolean
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
ReactText
The x coordinate of the starting point along which the linear gradient is drawn.
ReactText
The x coordinate of the ending point along which the linear gradient is drawn.
ReactText
The y coordinate of the starting point along which the linear gradient is drawn.
ReactText
The y coordinate of the ending point along which the linear gradient is drawn.