Package Exports

@vx/pattern

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vx/pattern) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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