@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

Components

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.backgroundstringoptional

Background color applied behind cirlces.

# Circles.classNamestringoptional

className applied to circles.

# Circles.complementbooleanoptional

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

Default false

# Circles.fillstringoptional

Fill applied to circles.

# Circles.radiusnumberoptional

Radius of the pattern circles.

Default 2

# Circles.strokestringoptional

stroke applied to circles.

# Circles.strokeDasharrayReactTextoptional

strokeDasharray applied to circles.

# Circles.strokeWidthReactTextoptional

strokeWidth applied to circles.

#<Hexagons />

# Hexagons.heightnumberrequired

Height of the pattern element.

# Hexagons.idstringrequired

Unique id for the pattern.

# Hexagons.backgroundstringoptional

Background color applied behind hexagons.

# Hexagons.classNamestringoptional

className applied to hexagon path element.

# Hexagons.fillstringoptional

Fill applied to hexagons.

# Hexagons.shapeRenderingReactTextoptional

shapeRendering applied to hexagon paths.

# Hexagons.sizenumberoptional

Size of the hexagon shape.

Default 3

# Hexagons.strokestringoptional

Stroke color applied to hexagon paths.

# Hexagons.strokeDasharrayReactTextoptional

strokeDasharray applied to hexagon paths.

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

strokeLinecap applied to hexagon paths.

# Hexagons.strokeWidthReactTextoptional

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.backgroundstringoptional

Background color applied behind lines.

# Lines.classNamestringoptional

className applied to line path element.

# Lines.orientationPatternOrientationType[]optional

Array of orientations to render (can mix multiple).

Default ['vertical']

# Lines.shapeRenderingReactTextoptional

shapeRendering applied to path elements.

Default auto

# Lines.strokestringoptional

Stroke color applied to path elements.

# Lines.strokeDasharrayReactTextoptional

strokeDasharray applied to path elements.

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

strokeLinecap applied to path elements.

Default square

# Lines.strokeWidthReactTextoptional

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.backgroundstringoptional

Background color applied behind path.

# Path.classNamestringoptional

className applied to the path element.

# Path.fillstringoptional

fill color applied to path.

Default transparent

# Path.pathstringoptional

d attribute of the path element

# Path.shapeRenderingReactTextoptional

shapeRendering applied to path.

Default auto

# Path.strokestringoptional

Stroke color applied to path.

# Path.strokeDasharrayReactTextoptional

strokeDasharray applied to path.

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

strokeLinecap applied to path.

Default square

# Path.strokeWidthReactTextoptional

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.backgroundstringoptional

Background color applied behind path.

# Waves.classNamestringoptional

className applied to the path element.

# Waves.fillstringoptional

fill color applied to path.

# Waves.shapeRenderingReactTextoptional

shapeRendering applied to path.

# Waves.strokestringoptional

Stroke color applied to path.

# Waves.strokeDasharrayReactTextoptional

strokeDasharray applied to path.

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

strokeLinecap applied to path.

# Waves.strokeWidthReactTextoptional

strokeWidth applied to path.