@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!
You can make any linear gradient like so:
import { LinearGradient } from '@vx/gradient';
<LinearGradient from="#a18cd1" to="#fbc2eb" />;
Installation
npm install --save @vx/gradient
Components
- GradientDarkgreenGreen
- GradientLightgreenGreen
- GradientOrangeRed
- GradientPinkBlue
- GradientPinkRed
- GradientPurpleOrange
- GradientPurpleRed
- GradientPurpleTeal
- GradientSteelPurple
- GradientTealBlue
- LinearGradient
- RadialGradient
API
<GradientDarkgreenGreen />
All props pass through to <LinearGradient {...props} />
# GradientDarkgreenGreen.from
Default | '#184E86' |
# GradientDarkgreenGreen.to
Default | '#57CA85' |
<GradientLightgreenGreen />
All props pass through to <LinearGradient {...props} />
# GradientLightgreenGreen.from
Default | '#42E695' |
# GradientLightgreenGreen.to
Default | '#3BB2B8' |
<GradientOrangeRed />
All props pass through to <LinearGradient {...props} />
# GradientOrangeRed.from
Default | '#FCE38A' |
# GradientOrangeRed.to
Default | '#F38181' |
<GradientPinkBlue />
All props pass through to <LinearGradient {...props} />
# GradientPinkBlue.from
Default | '#F02FC2' |
# GradientPinkBlue.to
Default | '#6094EA' |
<GradientPinkRed />
All props pass through to <LinearGradient {...props} />
# GradientPinkRed.from
Default | '#F54EA2' |
# GradientPinkRed.to
Default | '#FF7676' |
<GradientPurpleOrange />
All props pass through to <LinearGradient {...props} />
# GradientPurpleOrange.from
Default | '#7117EA' |
# GradientPurpleOrange.to
Default | '#EA6060' |
<GradientPurpleRed />
All props pass through to <LinearGradient {...props} />
# GradientPurpleRed.from
Default | '#622774' |
# GradientPurpleRed.to
Default | '#C53364' |
<GradientPurpleTeal />
All props pass through to <LinearGradient {...props} />
# GradientPurpleTeal.from
Default | '#5B247A' |
# GradientPurpleTeal.to
Default | '#1BCEDF' |
<GradientSteelPurple />
All props pass through to <LinearGradient {...props} />
# GradientSteelPurple.from
Default | '#65799B' |
# GradientSteelPurple.to
Default | '#5E2563' |
<GradientTealBlue />
All props pass through to <LinearGradient {...props} />
# GradientTealBlue.from
Default | '#17EAD9' |
# GradientTealBlue.to
Default | '#6078EA' |
<LinearGradient />
# LinearGradient.from<string>
# LinearGradient.fromOffset<string>
Default | '0%' |
# LinearGradient.fromOpacity<number>
Default | 1 |
# LinearGradient.id<string> required
# LinearGradient.rotate<union(string|number)>
# LinearGradient.to<string>
# LinearGradient.toOffset<string>
Default | '100%' |
# LinearGradient.toOpacity<number>
Default | 1 |
# LinearGradient.transform<string>
# LinearGradient.vertical
Default | true |
# LinearGradient.x1<string>
# LinearGradient.y1<string>
# LinearGradient.y2<string>
<RadialGradient />
# RadialGradient.from<string>
# RadialGradient.fromOffset<string>
Default | '0%' |
# RadialGradient.fromOpacity<number>
Default | 1 |
# RadialGradient.id<string> required
# RadialGradient.rotate<union(string|number)>
# RadialGradient.to<string>
# RadialGradient.toOffset<string>
Default | '100%' |
# RadialGradient.toOpacity<number>
Default | 1 |
# RadialGradient.transform<string>