svg-patterns

Create SVG patterns programmatically to visualize data, to help color-blind people and because it looks nice.

This library is inspired by Textures.js but tries to do a few things differently:

• svg-patterns

  does not limit you in which frontend stack you use. It just returns virtual-dom nodes.
• Because Textures.js includes D3, it weighs

  216k + 8k

  .

  svg-patterns

  weighs

  19k

  .

Installing

npm install svg-patterns

Usage

svg-patterns

Getting Started

If you load a style via

require('svg-patterns/p/style')

require('svg-patterns').style

const lines = require('svg-patterns/p/lines')
const stringify = require('virtual-dom-stringify')

const pattern = lines({
    stroke: 'darkorange',
    background: '#343434',
    orientations: [45]
})
process.stdout.write(    <svg xmlns="http://www.w3.org/2000/svg">         <defs>${stringify(pattern)}</defs>         <rect width="200" height="200" style="fill: ${pattern.url()}"></rect>     </svg>)

caps

style

const defaults = {
    size: 9, // size of the pattern
    fill: 'none', // any SVG-compatible color
    strokeWidth: .9,
    stroke: '#343434', // any SVG-compatible color
    background: null // any SVG-compatible color
}

circles

style

const defaults = {
    size: 15, // size of the pattern
    radius: 3,
    complement: true,
    fill: '#545454', // any SVG-compatible color
    strokeWidth: 0,
    stroke: 'none', // any SVG-compatible color
    background: null // any SVG-compatible color
}

crosses

style

const defaults = {
    size: 10, // size of the pattern
    fill: 'none', // any SVG-compatible color
    strokeWidth: .8,
    stroke: '#343434', // any SVG-compatible color
    background: null // any SVG-compatible color
}

hexagons

style

const defaults = {
    size: 10, // size of the pattern
    fill: 'none', // any SVG-compatible color
    strokeWidth: 1,
    stroke: '#343434', // any SVG-compatible color
    background: null // any SVG-compatible color
}

lines

style

const defaults = {
    size: 8, // size of the pattern
    strokeWidth: .7,
    stroke: '#343434', // any SVG-compatible color
    background: null, // any SVG-compatible color
    orientations: [45] // can be any combination of 0, 45, -45, 90
}

nylon

style

const defaults = {
    size: 15, // size of the pattern
    fill: 'none', // any SVG-compatible color
    strokeWidth: 1,
    stroke: '#343434', // any SVG-compatible color
    background: null // any SVG-compatible color
}

rhombic

style

const defaults = {
    size: 12, // size of the pattern
    fill: 'none', // any SVG-compatible color
    strokeWidth: .9,
    stroke: '#343434', // any SVG-compatible color
    background: null // any SVG-compatible color
}

rhombic3d

style

const defaults = {
    size: 14, // size of the pattern
    fill: 'none', // any SVG-compatible color
    strokeWidth: .6,
    stroke: '#343434', // any SVG-compatible color
    background: null // any SVG-compatible color
}

squares

style

const defaults = {
    size: 10, // size of the pattern
    fill: 'none', // any SVG-compatible color
    strokeWidth: .9,
    stroke: '#343434', // any SVG-compatible color
    background: null // any SVG-compatible color
}

waves

style

const defaults = {
    size: 8, // size of the pattern
    fill: 'none', // any SVG-compatible color
    strokeWidth: .8,
    stroke: '#343434', // any SVG-compatible color
    background: null // any SVG-compatible color
}

woven

style

const defaults = {
    size: 9, // size of the pattern
    fill: 'none', // any SVG-compatible color
    strokeWidth: 1,
    stroke: '#343434', // any SVG-compatible color
    background: null // any SVG-compatible color
}

See also

• svg-world-map

  – Render a world map with a pin at a specific location.

• svg-radar-chart

  – A reusable radar chart in SVG.

Contributing

If you have a question or need support using

svg-patterns