Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
Data utilities
Umbrella package

@visx/pattern

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

Example

import { AreaClosed } from '@visx/shape';
import { PatternLines } from '@visx/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 @visx/pattern

Examples

Patterns
<Pattern />
Streamgraph
<Shape.Stack />
Stats Plots
<BoxPlot /> & <ViolinPlot />

APIs

#<Pattern />

# childrenReactNoderequired

Children of pattern element to render.

# heightnumberrequired

Height of the pattern.

# idstringrequired

Unique id of the pattern element.

# widthnumberrequired

Width of the pattern.

#<Circles />

# heightnumberrequired

Height of the pattern element.

# idstringrequired

Unique id for the pattern.

# widthnumberrequired

Width of the pattern element.

# backgroundstring

Background color applied behind cirlces.

# classNamestring

className applied to circles.

# complementboolean

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

Default false

# fillstring

Fill applied to circles.

# radiusnumber

Radius of the pattern circles.

Default 2

# strokestring

stroke applied to circles.

# strokeDasharrayReactText

strokeDasharray applied to circles.

# strokeWidthReactText

strokeWidth applied to circles.

#<Hexagons />

# heightnumberrequired

Height of the pattern element.

# idstringrequired

Unique id for the pattern.

# backgroundstring

Background color applied behind hexagons.

# classNamestring

className applied to hexagon path element.

# fillstring

Fill applied to hexagons.

# shapeRenderingReactText

shapeRendering applied to hexagon paths.

# sizenumber

Size of the hexagon shape.

Default 3

# strokestring

Stroke color applied to hexagon paths.

# strokeDasharrayReactText

strokeDasharray applied to hexagon paths.

# strokeLinecap"inherit" | "butt" | "round" | "square"

strokeLinecap applied to hexagon paths.

# strokeWidthReactText

strokeWidth applied to hexagon paths.

#<Lines />

# heightnumberrequired

Height of the pattern element.

# idstringrequired

Unique id for the pattern.

# widthnumberrequired

Width of the pattern element.

# backgroundstring

Background color applied behind lines.

# classNamestring

className applied to line path element.

# orientationPatternOrientationType[]

Array of orientations to render (can mix multiple).

Default ['vertical']

# shapeRenderingReactText

shapeRendering applied to path elements.

Default auto

# strokestring

Stroke color applied to path elements.

# strokeDasharrayReactText

strokeDasharray applied to path elements.

# strokeLinecap"inherit" | "butt" | "round" | "square"

strokeLinecap applied to path elements.

Default square

# strokeWidthReactText

strokeWidth applied to path elements.

#<Path />

# heightnumberrequired

Height of the pattern element.

# idstringrequired

Unique id for the pattern.

# widthnumberrequired

Width of the pattern element.

# backgroundstring

Background color applied behind path.

# classNamestring

className applied to the path element.

# fillstring

fill color applied to path.

Default transparent

# pathstring

d attribute of the path element

# shapeRenderingReactText

shapeRendering applied to path.

Default auto

# strokestring

Stroke color applied to path.

# strokeDasharrayReactText

strokeDasharray applied to path.

# strokeLinecap"inherit" | "butt" | "round" | "square"

strokeLinecap applied to path.

Default square

# strokeWidthReactText

strokeWidth applied to path.

#<Waves />

# heightnumberrequired

Height of the pattern element.

# idstringrequired

Unique id for the pattern.

# widthnumberrequired

Width of the pattern element.

# backgroundstring

Background color applied behind path.

# classNamestring

className applied to the path element.

# fillstring

fill color applied to path.

# shapeRenderingReactText

shapeRendering applied to path.

# strokestring

Stroke color applied to path.

# strokeDasharrayReactText

strokeDasharray applied to path.

# strokeLinecap"inherit" | "butt" | "round" | "square"

strokeLinecap applied to path.

# strokeWidthReactText

strokeWidth applied to path.

Exports