react-svg-textures

Textures.js ported to React. Fully isomorphic.

Example

import React from 'react'
import { render } from 'react-dom';
import { Lines } from 'react-svg-textures';

render((
  <svg width={200} height={200}>
    <Lines
      id='pattern'
      strokeWidth={10}
      stroke='purple'
      size={10}
      orientation='diagonal'
      background='blue'
    />
    <circle cx={100} cy={100} r={5} fill='url(#pattern)' />
  </svg>
), container);

Components

Lines

import { Lines } from 'react-svg-textures`;

| Prop | Type | | --- | ---- | | size | number | | strokeWidth | number | | orientation | string | | shapeRendering | string | | stroke | string | | background | string | | id | string |

Circles

import { Circles } from 'react-svg-textures`;

| Prop | Type | | ----- | --- | | size | number | | strokeWidth | number | | stroke | string | | background | string | | id | string | | complement | bool | | radius | number |

Paths

import { Paths } from 'react-svg-textures`;

| Prop | Type| | ----- | ------| | size: number | | d | enum( 'squares', 'nylon', 'waves', 'woven', 'caps', 'crosses', 'hexagons') OR function(size) => string | | strokeWidth | number | | shapeRendering | string | | stroke | string | | background | string | | id | string |