Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

@vx/vx

@vx/pattern

Inspired by: http://riccardoscalco.github.io/textures/

Example

import { AreaClosed } from '@vx/shape';
import { PatternLines } from '@vx/pattern';

const PatternArea = () => {
  return (
    <svg>
      <PatternLines
        id="lines"
        height={5}
        width={5}
        stroke={'black'}
        strokeWidth={1}
        orientation={['diagonal']}
      />
      <AreaClosed fill="url('#lines')" />
    </svg>
  );
};

The Definition Caveat

Like gradients, patterns are "defined." When you put down a <PatternXYZ />, it's putting a <pattern/> attribute in the SVG.

It's often better to think of these as variable definitions rather than true DOM elements. When you use fill="url('#pattern')" you're referencing the pattern's id: pattern.

Pre-Made Patterns

`PatternsCircles`

circles example

<PatternCircles id="circles" height={6} width={6} stroke={'black'} strokeWidth={1} />

`PatternsHexagons`

hexagon example

<PatternHexagons id="hexagons" height={3} size={8} stroke={'red'} strokeWidth={1} />

`PatternsLines`

lines example

<PatternLines
  id="lines"
  height={5}
  width={5}
  stroke={'black'}
  strokeWidth={1}
  orientation={['diagonal']}
/>

`PatternsWaves`

waves example

<PatternWaves id="waves" height={4} width={4} stroke={'blue'} strokeWidth={1} />

Installation

npm install --save @vx/pattern

Examples

Patterns

<Pattern />

Streamgraph

<Shape.Stack />

Stats Plots

<BoxPlot /> & <ViolinPlot />

APIs

#<Pattern />

# Pattern.childrenReactNoderequired

Children of pattern element to render.

# Pattern.heightnumberrequired

Height of the pattern.

# Pattern.idstringrequired

Unique id of the pattern element.

# Pattern.widthnumberrequired

Width of the pattern.

#<Circles />

# Circles.heightnumberrequired

Height of the pattern element.

# Circles.idstringrequired

Unique id for the pattern.

# Circles.widthnumberrequired

Width of the pattern element.

# Circles.backgroundstring | undefinedoptional

Background color applied behind cirlces.

# Circles.classNamestring | undefinedoptional

className applied to circles.

# Circles.complementboolean | undefinedoptional

Whether to fill in circles within the pattern gaps to increase pattern density.

Default false

# Circles.fillstring | undefinedoptional

Fill applied to circles.

# Circles.radiusnumber | undefinedoptional

Radius of the pattern circles.

Default 2

# Circles.strokestring | undefinedoptional

stroke applied to circles.

# Circles.strokeDasharraystring | number | undefinedoptional

strokeDasharray applied to circles.

# Circles.strokeWidthstring | number | undefinedoptional

strokeWidth applied to circles.

#<Hexagons />

# Hexagons.heightnumberrequired

Height of the pattern element.

# Hexagons.idstringrequired

Unique id for the pattern.

# Hexagons.backgroundstring | undefinedoptional

Background color applied behind hexagons.

# Hexagons.classNamestring | undefinedoptional

className applied to hexagon path element.

# Hexagons.fillstring | undefinedoptional

Fill applied to hexagons.

# Hexagons.shapeRenderingstring | number | undefinedoptional

shapeRendering applied to hexagon paths.

# Hexagons.sizenumber | undefinedoptional

Size of the hexagon shape.

Default 3

# Hexagons.strokestring | undefinedoptional

Stroke color applied to hexagon paths.

# Hexagons.strokeDasharraystring | number | undefinedoptional

strokeDasharray applied to hexagon paths.

# Hexagons.strokeLinecap"inherit" | "round" | "butt" | "square" | undefinedoptional

strokeLinecap applied to hexagon paths.

# Hexagons.strokeWidthstring | number | undefinedoptional

strokeWidth applied to hexagon paths.

#<Lines />

# Lines.heightnumberrequired

Height of the pattern element.

# Lines.idstringrequired

Unique id for the pattern.

# Lines.widthnumberrequired

Width of the pattern element.

# Lines.backgroundstring | undefinedoptional

Background color applied behind lines.

# Lines.classNamestring | undefinedoptional

className applied to line path element.

# Lines.orientationPatternOrientationType[] | undefinedoptional

Array of orientations to render (can mix multiple).

Default ['vertical']

# Lines.shapeRenderingstring | number | undefinedoptional

shapeRendering applied to path elements.

Default auto

# Lines.strokestring | undefinedoptional

Stroke color applied to path elements.

# Lines.strokeDasharraystring | number | undefinedoptional

strokeDasharray applied to path elements.

# Lines.strokeLinecap"inherit" | "round" | "butt" | "square" | undefinedoptional

strokeLinecap applied to path elements.

Default square

# Lines.strokeWidthstring | number | undefinedoptional

strokeWidth applied to path elements.

#<Path />

# Path.heightnumberrequired

Height of the pattern element.

# Path.idstringrequired

Unique id for the pattern.

# Path.widthnumberrequired

Width of the pattern element.

# Path.backgroundstring | undefinedoptional

Background color applied behind path.

# Path.classNamestring | undefinedoptional

className applied to the path element.

# Path.fillstring | undefinedoptional

fill color applied to path.

Default transparent

# Path.pathstring | undefinedoptional

d attribute of the path element

# Path.shapeRenderingstring | number | undefinedoptional

shapeRendering applied to path.

Default auto

# Path.strokestring | undefinedoptional

Stroke color applied to path.

# Path.strokeDasharraystring | number | undefinedoptional

strokeDasharray applied to path.

# Path.strokeLinecap"inherit" | "round" | "butt" | "square" | undefinedoptional

strokeLinecap applied to path.

Default square

# Path.strokeWidthstring | number | undefinedoptional

strokeWidth applied to path.

#<Waves />

# Waves.heightnumberrequired

Height of the pattern element.

# Waves.idstringrequired

Unique id for the pattern.

# Waves.widthnumberrequired

Width of the pattern element.

# Waves.backgroundstring | undefinedoptional

Background color applied behind path.

# Waves.classNamestring | undefinedoptional

className applied to the path element.

# Waves.fillstring | undefinedoptional

fill color applied to path.

# Waves.shapeRenderingstring | number | undefinedoptional

shapeRendering applied to path.

# Waves.strokestring | undefinedoptional

Stroke color applied to path.

# Waves.strokeDasharraystring | number | undefinedoptional

strokeDasharray applied to path.

# Waves.strokeLinecap"inherit" | "round" | "butt" | "square" | undefinedoptional

strokeLinecap applied to path.

# Waves.strokeWidthstring | number | undefinedoptional

strokeWidth applied to path.