https://github.com/derhuerst/svg-patterns
SVG patterns for Data Visualization.
https://github.com/derhuerst/svg-patterns
dataviz svg virtual-dom
Last synced: 3 months ago
JSON representation
SVG patterns for Data Visualization.
- Host: GitHub
- URL: https://github.com/derhuerst/svg-patterns
- Owner: derhuerst
- License: isc
- Created: 2016-09-03T20:03:10.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-05-22T10:56:43.000Z (about 3 years ago)
- Last Synced: 2025-03-31T04:06:52.475Z (3 months ago)
- Topics: dataviz, svg, virtual-dom
- Language: JavaScript
- Homepage: https://derhuerst.github.io/svg-patterns/
- Size: 213 KB
- Stars: 219
- Watchers: 8
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: license.md
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
- awesome-starred - derhuerst/svg-patterns - SVG patterns for Data Visualization. (others)
README
# [svg-patterns](https://derhuerst.github.io/svg-patterns/)
**Create SVG patterns programmatically to visualize data,** to [help color-blind people](https://web.archive.org/web/20171016120330/http://betweentwobrackets.com/data-graphics-and-colour-vision/) and because it looks nice.
[](https://www.npmjs.com/package/svg-patterns)
[](https://travis-ci.org/derhuerst/svg-patterns)
[](https://github.com/sponsors/derhuerst)
[](https://twitter.com/derhuerst)
This library is inspired by [Textures.js](http://riccardoscalco.github.io/textures/) 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](https://github.com/Matt-Esch/virtual-dom#dom-model).
- Because [Textures.js](http://riccardoscalco.github.io/textures/) includes [D3](https://d3js.org/), 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](https://derhuerst.github.io/svg-patterns/).
### Getting Started
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)}
`)
```
### `caps` style
```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
}
```
### `circles` style
```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
}
```
### `crosses` style
```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
}
```
### `hexagons` style
```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
}
```
### `lines` style
```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
}
```
### `nylon` style
```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
}
```
### `rhombic` style
```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
}
```
### `rhombic3d` style
```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
}
```
### `squares` style
```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
}
```
### `waves` style
```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
}
```
### `woven` style
```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`](https://github.com/derhuerst/svg-world-map) – Render a world map with a pin at a specific location.
- [`svg-radar-chart`](https://github.com/derhuerst/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](https://github.com/derhuerst/svg-patterns/issues).