Data utilities
Umbrella package
@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
Examples
<Pattern />
<Shape.Stack />
<BoxPlot /> & <ViolinPlot />
APIs
#<Pattern />
Children of pattern element to render.
Height of the pattern.
Unique id of the pattern element.
Width of the pattern.
#<Circles />
Height of the pattern element.
Unique id for the pattern.
Width of the pattern element.
string
Background color applied behind cirlces.
string
className applied to circles.
boolean
Whether to fill in circles within the pattern gaps to increase pattern density.
Default false
string
Fill applied to circles.
number
Radius of the pattern circles.
Default 2
string
stroke applied to circles.
ReactText
strokeDasharray applied to circles.
ReactText
strokeWidth applied to circles.
#<Hexagons />
Height of the pattern element.
Unique id for the pattern.
string
Background color applied behind hexagons.
string
className applied to hexagon path element.
string
Fill applied to hexagons.
ReactText
shapeRendering applied to hexagon paths.
number
Size of the hexagon shape.
Default 3
string
Stroke color applied to hexagon paths.
ReactText
strokeDasharray applied to hexagon paths.
"inherit" | "butt" | "round" | "square"
strokeLinecap applied to hexagon paths.
ReactText
strokeWidth applied to hexagon paths.
#<Lines />
Height of the pattern element.
Unique id for the pattern.
Width of the pattern element.
string
Background color applied behind lines.
string
className applied to line path element.
PatternOrientationType[]
Array of orientations to render (can mix multiple).
Default ['vertical']
ReactText
shapeRendering applied to path elements.
Default auto
string
Stroke color applied to path elements.
ReactText
strokeDasharray applied to path elements.
"inherit" | "butt" | "round" | "square"
strokeLinecap applied to path elements.
Default square
ReactText
strokeWidth applied to path elements.
#<Path />
Height of the pattern element.
Unique id for the pattern.
Width of the pattern element.
string
Background color applied behind path.
string
className applied to the path element.
string
fill color applied to path.
Default transparent
string
d attribute of the path element
ReactText
shapeRendering applied to path.
Default auto
string
Stroke color applied to path.
ReactText
strokeDasharray applied to path.
"inherit" | "butt" | "round" | "square"
strokeLinecap applied to path.
Default square
ReactText
strokeWidth applied to path.
#<Waves />
Height of the pattern element.
Unique id for the pattern.
Width of the pattern element.
string
Background color applied behind path.
string
className applied to the path element.
string
fill color applied to path.
ReactText
shapeRendering applied to path.
string
Stroke color applied to path.
ReactText
strokeDasharray applied to path.
"inherit" | "butt" | "round" | "square"
strokeLinecap applied to path.
ReactText
strokeWidth applied to path.