Node Packaged Masterfully
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

@vx/gradient

0.0.183 • 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!

You can make any linear gradient like so:

import { LinearGradient } from '@vx/gradient';
 
<LinearGradient from="#a18cd1" to="#fbc2eb" />;

Installation

npm install --save @vx/gradient

Components

API

<GradientDarkgreenGreen />

All props pass through to <LinearGradient {...props} />

# GradientDarkgreenGreen.from

Default'#184E86'

# GradientDarkgreenGreen.to

Default'#57CA85'

<GradientLightgreenGreen />

All props pass through to <LinearGradient {...props} />

# GradientLightgreenGreen.from

Default'#42E695'

# GradientLightgreenGreen.to

Default'#3BB2B8'

<GradientOrangeRed />

All props pass through to <LinearGradient {...props} />

# GradientOrangeRed.from

Default'#FCE38A'

# GradientOrangeRed.to

Default'#F38181'

<GradientPinkBlue />

All props pass through to <LinearGradient {...props} />

# GradientPinkBlue.from

Default'#F02FC2'

# GradientPinkBlue.to

Default'#6094EA'

<GradientPinkRed />

All props pass through to <LinearGradient {...props} />

# GradientPinkRed.from

Default'#F54EA2'

# GradientPinkRed.to

Default'#FF7676'

<GradientPurpleOrange />

All props pass through to <LinearGradient {...props} />

# GradientPurpleOrange.from

Default'#7117EA'

# GradientPurpleOrange.to

Default'#EA6060'

<GradientPurpleRed />

All props pass through to <LinearGradient {...props} />

# GradientPurpleRed.from

Default'#622774'

# GradientPurpleRed.to

Default'#C53364'

<GradientPurpleTeal />

All props pass through to <LinearGradient {...props} />

# GradientPurpleTeal.from

Default'#5B247A'

# GradientPurpleTeal.to

Default'#1BCEDF'

<GradientSteelPurple />

All props pass through to <LinearGradient {...props} />

# GradientSteelPurple.from

Default'#65799B'

# GradientSteelPurple.to

Default'#5E2563'

<GradientTealBlue />

All props pass through to <LinearGradient {...props} />

# GradientTealBlue.from

Default'#17EAD9'

# GradientTealBlue.to

Default'#6078EA'

<LinearGradient />

# LinearGradient.from<string>

# LinearGradient.fromOffset<string>

Default'0%'

# LinearGradient.fromOpacity<number>

Default1

# LinearGradient.id<string> required

# LinearGradient.rotate<union(string|number)>

# LinearGradient.to<string>

# LinearGradient.toOffset<string>

Default'100%'

# LinearGradient.toOpacity<number>

Default1

# LinearGradient.transform<string>

# LinearGradient.vertical

Defaulttrue

# LinearGradient.x1<string>

# LinearGradient.y1<string>

# LinearGradient.y2<string>

<RadialGradient />

# RadialGradient.from<string>

# RadialGradient.fromOffset<string>

Default'0%'

# RadialGradient.fromOpacity<number>

Default1

# RadialGradient.id<string> required

# RadialGradient.rotate<union(string|number)>

# RadialGradient.to<string>

# RadialGradient.toOffset<string>

Default'100%'

# RadialGradient.toOpacity<number>

Default1

# RadialGradient.transform<string>

install

npm i @vx/gradient

Downloadsweekly downloads

13,460

version

0.0.183

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability