vx gradient

Downloads in past


16,9191240.0.1993 years ago6 years agoMinified + gzip package size for @vx/gradient in KB



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


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

const GradientArea = () => {
  return (
      <GradientPinkBlue id="gradient" />
      <AreaClosed fill="url('#gradient')" />

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" />;


npm install --save @vx/gradient