@vx/pattern

@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

<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 @vx/pattern

Changelog

v0.0.197

:rocket: Enhancements

• feat(tooltip): add unstyled prop to TooltipWithBounds #721
• perf(tooltip): use useCallback in useTooltip #668

:bug: Bug Fix

• fix(zoom): fix zoom.dragMove on touchmove event y-coord #725

:memo: Documentation

• feat(demo): new documentation, codesandbox examples #732 #731 #730 #729 #727 #720#720 #719 #718 #717 #716 #715 #714 #713 #712 #711 #710 #709 #708 #707 #706 #705 #704 #703 #702 #701 #700 #699 #698 #697 #696 #695 #694 #693 #692 #691 #690 #689 #688 #687 #686 #685 #684 #683 #682 #681 #680 #679 #678 #677 #676 #675 #674 #673 #672 #671 #670 #679

:house: Internal

• deps(root): bump yarn.lock, add @types/webpack #740
• fix(demo/package.json): lock next.js version #740
• fix(demo): prettier config updated so lots of minor style updates #740
• fix(demo/next.config.js): fix invalid webpack config error #740
• fix(demo/pages): routes are case sensitive (/Docs => /docs) #740
• feat(demo/gallery): gallery filter persists on query param ?pkg instead of local state #740

:trophy: Contributors

• dennisja
• vodoleev-vladislav
• williaster
• hshoff

Changes: 
 - @vx/annotation: 0.0.196 => 0.0.197
 - @vx/axis: 0.0.196 => 0.0.197
 - @vx/bounds: 0.0.196 => 0.0.197
 - @vx/brush: 0.0.196 => 0.0.197
 - @vx/chord: 0.0.196 => 0.0.197
 - @vx/clip-path: 0.0.196 => 0.0.197
 - @vx/curve: 0.0.196 => 0.0.197
 - @vx/demo: 0.0.196 => 0.0.197
 - @vx/drag: 0.0.196 => 0.0.197
 - @vx/event: 0.0.196 => 0.0.197
 - @vx/geo: 0.0.196 => 0.0.197
 - @vx/glyph: 0.0.196 => 0.0.197
 - @vx/gradient: 0.0.196 => 0.0.197
 - @vx/grid: 0.0.196 => 0.0.197
 - @vx/group: 0.0.196 => 0.0.197
 - @vx/heatmap: 0.0.196 => 0.0.197
 - @vx/hierarchy: 0.0.196 => 0.0.197
 - @vx/legend: 0.0.196 => 0.0.197
 - @vx/marker: 0.0.196 => 0.0.197
 - @vx/mock-data: 0.0.196 => 0.0.197
 - @vx/network: 0.0.196 => 0.0.197
 - @vx/pattern: 0.0.196 => 0.0.197
 - @vx/point: 0.0.196 => 0.0.197
 - @vx/responsive: 0.0.196 => 0.0.197
 - @vx/scale: 0.0.196 => 0.0.197
 - @vx/shape: 0.0.196 => 0.0.197
 - @vx/stats: 0.0.196 => 0.0.197
 - @vx/text: 0.0.196 => 0.0.197
 - @vx/threshold: 0.0.196 => 0.0.197
 - @vx/tooltip: 0.0.196 => 0.0.197
 - @vx/voronoi: 0.0.196 => 0.0.197
 - @vx/vx: 0.0.196 => 0.0.197
 - @vx/zoom: 0.0.16 =>  0.0.19