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

    2.1.0 • Public • Published

    @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
    

    Install

    npm i @visx/gradient

    DownloadsWeekly Downloads

    39,364

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    55.8 kB

    Total Files

    55

    Last publish

    Collaborators

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