@vx/gradient

Inspired by: https://dribbble.com/shots/3380672-Sketch-Gradients-Freebie

Example

``js
import { AreaClosed } from '@vx/shape';
import { GradientPinkBlue } from '@vx/gradient';

const GradientArea = () => {
return (




);
};
`

The Definition Caveat

Like patterns, gradients are "defined." When you render , it's rendering a

element inside a 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:

`js
import { LinearGradient, RadialGradient } from '@vx/gradient';

;
;
`

Installation

`
npm install --save @vx/gradient
``