@visx/pattern

@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

Changelog

v3.0.0 (2023-01-06)

:boom: Breaking Changes

• security: Revert "Revert breaking "deps(scale): bump d3-interpolate and d3-scale"" #1621
• breaking(annotation): remove deprecated/LinePathAnnotation #1620
• breaking(responsive, xychart): require ResizeObserver or polyfill #1622

:house: Internal

• internal(github/workflows): add tsconfig + demo site build checks #1626
• deps(demo): upgrade to next@11 #1627

:trophy: Contributors

• jreyes33
• williaster