@vx/pattern

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

Example

``js
import { AreaClosed } from '@vx/shape';
import { PatternLines } from '@vx/pattern';

const PatternArea = () => {
return (

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


);
};
`

The Definition Caveat

Like gradients, patterns are "defined." When you put down a , it's putting a
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

$3

!circles example

`js

`

$3

!hexagon example

`js

`

$3

!lines example

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

$3

!waves example

`js

`

Installation

`
npm install --save @vx/pattern
``