Chart primitives
Layouts & specialized
Interactions
Data utilities
Umbrella package
@vx/gradient
Inspired by: https://dribbble.com/shots/3380672-Sketch-Gradients-Freebie
Example
import { AreaClosed } from '@vx/shape';
import { GradientPinkBlue } from '@vx/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 '@vx/gradient';
<LinearGradient from="#a18cd1" to="#fbc2eb" />;
<RadialGradient from="#a18cd1" to="#fbc2eb" />;Installation
npm install --save @vx/gradientExamples
<Gradient.LinearGradient /> <Gradient.RadialGradient />
<Shape.Pie />
<Chord.Chord /> & <Chord.Ribbon />
<Shape.AreaClosed />
<Shape.Bar />
<Drag.Drag />
Components
<LinearGradient /><RadialGradient /><GradientDarkgreenGreen /><GradientLightgreenGreen /><GradientOrangeRed /><GradientPinkBlue /><GradientPinkRed /><GradientPurpleOrange /><GradientPurpleRed /><GradientPurpleTeal /><GradientSteelPurple /><GradientTealBlue />
APIs
#<LinearGradient />
Unique id for the gradient. Should be unique across all page elements.
Override of linearGradient children.
Start color of gradient.
Number or percent defining the where the 'from' starting color is placed along the gradient.
Default 0%
Opacity of the 'from' starting color.
Default 1
Rotation to apply to gradient.
End color of gradient.
Number or percent defining the where the 'to' ending color is placed along the gradient.
Default 100%
Opacity of the 'to' ending color.
Default 1
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
Default true
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
The y coordinate of the ending point along which the linear gradient is drawn.
#<RadialGradient />
Override of linearGradient children.
Start color of gradient.
Number or percent defining the where the 'from' starting color is placed along the gradient.
Default 0%
Opacity of the 'from' starting color.
Default 1
Unique id for the gradient. Should be unique across all page elements.
Rotation to apply to gradient.
End color of gradient.
Number or percent defining the where the 'to' ending color is placed along the gradient.
Default 100%
Opacity of the 'to' ending color.
Default 1
Transform to apply to linearGradient, overrides rotate.
#<GradientDarkgreenGreen />
Unique id for the gradient. Should be unique across all page elements.
Override of linearGradient children.
Start color of gradient.
Default #184E86
Number or percent defining the where the 'from' starting color is placed along the gradient.
Opacity of the 'from' starting color.
Rotation to apply to gradient.
End color of gradient.
Default #57CA85
Number or percent defining the where the 'to' ending color is placed along the gradient.
Opacity of the 'to' ending color.
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
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.
Override of linearGradient children.
Start color of gradient.
Default #42E695
Number or percent defining the where the 'from' starting color is placed along the gradient.
Opacity of the 'from' starting color.
Rotation to apply to gradient.
End color of gradient.
Default #3BB2B8
Number or percent defining the where the 'to' ending color is placed along the gradient.
Opacity of the 'to' ending color.
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
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.
Override of linearGradient children.
Start color of gradient.
Default #FCE38A
Number or percent defining the where the 'from' starting color is placed along the gradient.
Opacity of the 'from' starting color.
Rotation to apply to gradient.
End color of gradient.
Default #F38181
Number or percent defining the where the 'to' ending color is placed along the gradient.
Opacity of the 'to' ending color.
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
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.
Override of linearGradient children.
Start color of gradient.
Default #F02FC2
Number or percent defining the where the 'from' starting color is placed along the gradient.
Opacity of the 'from' starting color.
Rotation to apply to gradient.
End color of gradient.
Default #6094EA
Number or percent defining the where the 'to' ending color is placed along the gradient.
Opacity of the 'to' ending color.
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
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.
Override of linearGradient children.
Start color of gradient.
Default #F54EA2
Number or percent defining the where the 'from' starting color is placed along the gradient.
Opacity of the 'from' starting color.
Rotation to apply to gradient.
End color of gradient.
Default #FF7676
Number or percent defining the where the 'to' ending color is placed along the gradient.
Opacity of the 'to' ending color.
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
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.
Override of linearGradient children.
Start color of gradient.
Default #7117EA
Number or percent defining the where the 'from' starting color is placed along the gradient.
Opacity of the 'from' starting color.
Rotation to apply to gradient.
End color of gradient.
Default #EA6060
Number or percent defining the where the 'to' ending color is placed along the gradient.
Opacity of the 'to' ending color.
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
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.
Override of linearGradient children.
Start color of gradient.
Default #622774
Number or percent defining the where the 'from' starting color is placed along the gradient.
Opacity of the 'from' starting color.
Rotation to apply to gradient.
End color of gradient.
Default #C53364
Number or percent defining the where the 'to' ending color is placed along the gradient.
Opacity of the 'to' ending color.
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
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.
Override of linearGradient children.
Start color of gradient.
Default #5B247A
Number or percent defining the where the 'from' starting color is placed along the gradient.
Opacity of the 'from' starting color.
Rotation to apply to gradient.
End color of gradient.
Default #1BCEDF
Number or percent defining the where the 'to' ending color is placed along the gradient.
Opacity of the 'to' ending color.
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
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.
Override of linearGradient children.
Start color of gradient.
Default #65799B
Number or percent defining the where the 'from' starting color is placed along the gradient.
Opacity of the 'from' starting color.
Rotation to apply to gradient.
End color of gradient.
Default #5E2563
Number or percent defining the where the 'to' ending color is placed along the gradient.
Opacity of the 'to' ending color.
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
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.
Override of linearGradient children.
Start color of gradient.
Default #17EAD9
Number or percent defining the where the 'from' starting color is placed along the gradient.
Opacity of the 'from' starting color.
Rotation to apply to gradient.
End color of gradient.
Default #6078EA
Number or percent defining the where the 'to' ending color is placed along the gradient.
Opacity of the 'to' ending color.
Transform to apply to linearGradient, overrides rotate.
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
The x coordinate of the starting point along which the linear gradient is drawn.
The x coordinate of the ending point along which the linear gradient is drawn.
The y coordinate of the starting point along which the linear gradient is drawn.
The y coordinate of the ending point along which the linear gradient is drawn.