React-svg-textures NPM

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