@visx/gradient

@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

Changelog

v3.12.0 (2024-11-07)

:rocket: Enhancements

• feat(sankey): add @visx/sankey #1880

:memo: Documentation

• Fix small error in the code example in the "Theming" section #1863

:trophy: Contributors

• jacksonhardaker
• maurer2

Similar packages

Other packages similar to @visx/gradient

d3-scale-chromatic

d3-scale-chromatic is a part of the D3.js library that provides color scales and color schemes, including gradients. It is more focused on providing a wide range of color schemes for data visualization, whereas @visx/gradient is specifically designed for creating gradient definitions in SVG elements.

react-svg-gradient

react-svg-gradient is a React component library for creating SVG gradients. It offers similar functionality to @visx/gradient but is more focused on providing a simple API for creating and managing gradients in React applications.

svg-gradient

svg-gradient is a lightweight library for creating SVG gradients. It provides a straightforward API for defining linear and radial gradients, similar to @visx/gradient, but without the additional visualization components provided by the VisX library.