3.3.0 • Published 10 months ago
@visx/pattern v3.3.0
@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
<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} />
Installation
npm install --save @visx/pattern
3.3.0
10 months ago
2.17.0
1 year ago
3.0.0
1 year ago
2.17.0-alpha.0
1 year ago
2.10.0-alpha.0
2 years ago
2.10.0
2 years ago
2.1.2
3 years ago
2.1.0
3 years ago
2.0.1-alpha.0
3 years ago
3.0.0-alpha.0
3 years ago
1.17.1
3 years ago
1.7.0
3 years ago
1.6.1
3 years ago
1.1.0
4 years ago
1.0.0
4 years ago
0.0.200-alpha.0
4 years ago