Package Exports

@vx/gradient

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vx/gradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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/gradient