@visx/pattern
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published

    @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

    circles example

    <PatternCircles id="circles" height={6} width={6} stroke={'black'} strokeWidth={1} />

    PatternsHexagons

    hexagon example

    <PatternHexagons id="hexagons" height={3} size={8} stroke={'red'} strokeWidth={1} />

    PatternsLines

    lines example

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

    PatternsWaves

    waves example

    <PatternWaves id="waves" height={4} width={4} stroke={'blue'} strokeWidth={1} />

    Installation

    npm install --save @visx/pattern
    

    Install

    npm i @visx/pattern

    DownloadsWeekly Downloads

    20,460

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    44.1 kB

    Total Files

    35

    Last publish

    Collaborators

    • vx-hshoff
    • hshoff
    • christopher.card.williams
    • lencioni