svg-patterns

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

!ISC-licensed
!minimum Node.js version

!a simple pattern

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

``shell
npm install svg-patterns
`

Usage

svg-patterns exposes several styles, which you can customize by passing an object. The following list shows all styles, including their default options. You can fiddle with them on the website.

$3

If you load a style via require('svg-patterns/p/style'), the bundle will be smaller. But you can also load it via require('svg-patterns').style.

`js
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(

${stringify(pattern)}


)
`

!a simple pattern

$3

`js
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
}
`

$3

`js
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
}
`

$3

`js
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
}
`

$3

`js
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
}
`

$3

`js
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
}
`

$3

`js
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
}
`

$3

`js
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
}
`

$3

`js
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
}
`

$3

`js
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
}
`

$3

`js
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
}
`

$3

`js
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`, please double-check your code and setup first. If you think you have found a bug or want to propose a feature, use the issues page.