@vx/gradient
TypeScript icon, indicating that this package has built-in type declarations

0.0.199 • Public • Published

@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

Dependents (30)

Package Sidebar

Install

npm i @vx/gradient

Weekly Downloads

44,802

Version

0.0.199

License

MIT

Unpacked Size

55.8 kB

Total Files

55

Last publish

Collaborators

  • hshoff
  • christopher.card.williams
  • vx-hshoff