3.3.0 • Published 10 months ago
@visx/gradient v3.3.0
@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
3.3.0
10 months ago
2.17.0
1 year ago
3.0.0
1 year ago
2.17.0-alpha.0
1 year ago
2.10.0-alpha.0
2 years ago
2.10.0
2 years ago
2.1.0
3 years ago
2.0.1-alpha.0
3 years ago
3.0.0-alpha.0
3 years ago
1.7.0
3 years ago
1.6.1
3 years ago
1.0.0
4 years ago
0.0.200-alpha.0
4 years ago