@visx/gradient

What is @visx/gradient?

@visx/gradient is a part of the VisX library, which provides a collection of reusable low-level visualization components for React. The @visx/gradient package specifically focuses on creating gradient definitions that can be used in SVG elements to enhance visualizations with gradient effects.

What are @visx/gradient's main functionalities?

Linear Gradient

This feature allows you to create a linear gradient that transitions between two colors. The example demonstrates how to apply a linear gradient to a rectangle in an SVG element.

import { LinearGradient } from '@visx/gradient';

const LinearGradientExample = () => (
  <svg width={500} height={500}>
    <LinearGradient id="linear" from="#fbc2eb" to="#a6c1ee" />
    <rect x={0} y={0} width={500} height={500} fill="url(#linear)" />
  </svg>
);

Radial Gradient

This feature allows you to create a radial gradient that transitions between two colors from the center outwards. The example demonstrates how to apply a radial gradient to a rectangle in an SVG element.

import { RadialGradient } from '@visx/gradient';

const RadialGradientExample = () => (
  <svg width={500} height={500}>
    <RadialGradient id="radial" from="#fbc2eb" to="#a6c1ee" />
    <rect x={0} y={0} width={500} height={500} fill="url(#radial)" />
  </svg>
);

Custom Gradient Stops

This feature allows you to define custom gradient stops within a linear gradient. The example demonstrates how to create a gradient with multiple color stops and apply it to a rectangle in an SVG element.

import { LinearGradient } from '@visx/gradient';

const CustomGradientStopsExample = () => (
  <svg width={500} height={500}>
    <LinearGradient id="custom" from="#fbc2eb" to="#a6c1ee">
      <stop offset="0%" stopColor="#fbc2eb" />
      <stop offset="50%" stopColor="#a6c1ee" />
      <stop offset="100%" stopColor="#fbc2eb" />
    </LinearGradient>
    <rect x={0} y={0} width={500} height={500} fill="url(#custom)" />
  </svg>
);

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.

README

@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