# @vx/pattern

    npm install --save @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`

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

### `PatternsHexagons`

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

### `PatternsLines`

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

### `PatternsWaves`

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

## Source For Components

- `<PatternCircles />`
- `<PatternHexagons />`
- `<PatternLines />`
- `<PatternPath />`
- `<PatternPattern />`
- `<PatternPath />`