@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

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 | undefined

Background color applied behind cirlces.

# classNamestring | undefined

className applied to circles.

# complementboolean | undefined

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

Default false

# fillstring | undefined

Fill applied to circles.

# radiusnumber | undefined

Radius of the pattern circles.

Default 2

# strokestring | undefined

stroke applied to circles.

# strokeDasharraystring | number | undefined

strokeDasharray applied to circles.

# strokeWidthstring | number | undefined

strokeWidth applied to circles.

#<Hexagons />

# heightnumberrequired

Height of the pattern element.

# idstringrequired

Unique id for the pattern.

# backgroundstring | undefined

Background color applied behind hexagons.

# classNamestring | undefined

className applied to hexagon path element.

# fillstring | undefined

Fill applied to hexagons.

# shapeRenderingstring | number | undefined

shapeRendering applied to hexagon paths.

# sizenumber | undefined

Size of the hexagon shape.

Default 3

# strokestring | undefined

Stroke color applied to hexagon paths.

# strokeDasharraystring | number | undefined

strokeDasharray applied to hexagon paths.

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

strokeLinecap applied to hexagon paths.

# strokeWidthstring | number | undefined

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 | undefined

Background color applied behind lines.

# classNamestring | undefined

className applied to line path element.

# orientationPatternOrientationType[] | undefined

Array of orientations to render (can mix multiple).

Default ['vertical']

# shapeRenderingstring | number | undefined

shapeRendering applied to path elements.

Default auto

# strokestring | undefined

Stroke color applied to path elements.

# strokeDasharraystring | number | undefined

strokeDasharray applied to path elements.

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

strokeLinecap applied to path elements.

Default square

# strokeWidthstring | number | undefined

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 | undefined

Background color applied behind path.

# classNamestring | undefined

className applied to the path element.

# fillstring | undefined

fill color applied to path.

Default transparent

# pathstring | undefined

d attribute of the path element

# shapeRenderingstring | number | undefined

shapeRendering applied to path.

Default auto

# strokestring | undefined

Stroke color applied to path.

# strokeDasharraystring | number | undefined

strokeDasharray applied to path.

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

strokeLinecap applied to path.

Default square

# strokeWidthstring | number | undefined

strokeWidth applied to path.

#<Waves />

# heightnumberrequired

Height of the pattern element.

# idstringrequired

Unique id for the pattern.

# widthnumberrequired

Width of the pattern element.

# backgroundstring | undefined

Background color applied behind path.

# classNamestring | undefined

className applied to the path element.

# fillstring | undefined

fill color applied to path.

# shapeRenderingstring | number | undefined

shapeRendering applied to path.

# strokestring | undefined

Stroke color applied to path.

# strokeDasharraystring | number | undefined

strokeDasharray applied to path.

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

strokeLinecap applied to path.

# strokeWidthstring | number | undefined

strokeWidth applied to path.