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 | undefined
Start color of gradient.
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
Default 0%
string | number | undefined
Opacity of the 'from' starting color.
Default 1
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
Default 100%
string | number | undefined
Opacity of the 'to' ending color.
Default 1
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
Default true
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the ending point along which the linear gradient is drawn.
#<RadialGradient />
ReactNode
Override of linearGradient children.
string | number | undefined
Start color of gradient.
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
Default 0%
string | number | undefined
Opacity of the 'from' starting color.
Default 1
string | undefined
Unique id for the gradient. Should be unique across all page elements.
string | number | undefined
Rotation to apply to gradient.
string | number | undefined
End color of gradient.
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
Default 100%
string | number | undefined
Opacity of the 'to' ending color.
Default 1
string | undefined
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 | undefined
Start color of gradient.
Default #184E86
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
string | number | undefined
Opacity of the 'from' starting color.
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
Default #57CA85
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
string | number | undefined
Opacity of the 'to' ending color.
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
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 | undefined
Start color of gradient.
Default #42E695
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
string | number | undefined
Opacity of the 'from' starting color.
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
Default #3BB2B8
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
string | number | undefined
Opacity of the 'to' ending color.
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
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 | undefined
Start color of gradient.
Default #FCE38A
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
string | number | undefined
Opacity of the 'from' starting color.
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
Default #F38181
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
string | number | undefined
Opacity of the 'to' ending color.
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
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 | undefined
Start color of gradient.
Default #F02FC2
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
string | number | undefined
Opacity of the 'from' starting color.
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
Default #6094EA
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
string | number | undefined
Opacity of the 'to' ending color.
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
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 | undefined
Start color of gradient.
Default #F54EA2
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
string | number | undefined
Opacity of the 'from' starting color.
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
Default #FF7676
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
string | number | undefined
Opacity of the 'to' ending color.
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
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 | undefined
Start color of gradient.
Default #7117EA
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
string | number | undefined
Opacity of the 'from' starting color.
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
Default #EA6060
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
string | number | undefined
Opacity of the 'to' ending color.
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
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 | undefined
Start color of gradient.
Default #622774
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
string | number | undefined
Opacity of the 'from' starting color.
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
Default #C53364
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
string | number | undefined
Opacity of the 'to' ending color.
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
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 | undefined
Start color of gradient.
Default #5B247A
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
string | number | undefined
Opacity of the 'from' starting color.
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
Default #1BCEDF
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
string | number | undefined
Opacity of the 'to' ending color.
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
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 | undefined
Start color of gradient.
Default #65799B
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
string | number | undefined
Opacity of the 'from' starting color.
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
Default #5E2563
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
string | number | undefined
Opacity of the 'to' ending color.
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
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 | undefined
Start color of gradient.
Default #17EAD9
string | number | undefined
Number or percent defining the where the 'from' starting color is placed along the gradient.
string | number | undefined
Opacity of the 'from' starting color.
string | number | undefined
Rotation to apply to gradient.
string | undefined
End color of gradient.
Default #6078EA
string | number | undefined
Number or percent defining the where the 'to' ending color is placed along the gradient.
string | number | undefined
Opacity of the 'to' ending color.
string | undefined
Transform to apply to linearGradient, overrides rotate.
boolean | undefined
(When no x or y values are passed), will orient the gradient vertically instead of horizontally.
string | number | undefined
The x coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The x coordinate of the ending point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the starting point along which the linear gradient is drawn.
string | number | undefined
The y coordinate of the ending point along which the linear gradient is drawn.