Beautiful dynamic background patterns.
npm install griptape
> Beautiful dynamic background patterns. Inspired by Toptal's Subtle Patterns.
``javascript
import griptape from 'griptape';
const pattern = griptape
.grid({ foreground: 'rgba(255, 0, 0, 0.5' }); // Draw a red grid
.noise(); // And some subtle noise below it
pattern.toDataURL(); // "data:image/png;base64..."
pattern.toCSSURL(); // "url('data:image/png;base64..."
pattern.canvas; // HTML5 canvas in browser, or an instance of node-canvas on the server.
`javascript
// You can also set a base config for all patterns.
const patterns = griptape({ foreground: 'rgba(255, 0, 0, 0.5)' });
// And use it the same way. All of the patterns will be colored red.
const pattern = patterns
.stripes()
.dots();
`
For usage server-side, this package requires node-canvas, which has has some OS-specific build requirements. Take a look at their documentation.
For the browser, however, node-canvas is not required, since we'll be using the browser's native canvas. For that reason, node-canvas is an optional dependency--if it bombs on install, you don't need to worry about if you only intend to use griptape in the browser.
All patterns support the following options, unless otherwise noted:
size
>default: varies
validation: [Number, Number] (horizontal size, vertical size) or Number (both dimensions)
The size of a single repeatable tile. Different patterns require different default values to make sense--for example, noise needs a lot more space to not obviously tile, whereas a grid pattern is supposed to obviously look tiled, so it can be much smaller.
scale
>default: 1 [Number, Number]
validation: (horizontal scale, vertical scale) or Number (both dimensions)
The scale of the pattern. Can be different along either dimension for a stretched look.
foreground
>default: 'rgba(0, 0, 0, 0.05)'
validation: a griptape pattern, a canvas, a CSS color string, or a function that returns one of those.
The fill style of the pattern.
background
>default: null (transparent)
validation: a griptape pattern, a canvas, a CSS color string, or a function that returns one of those.
The fill style of the background.
--------
A checkerboard pattern. Takes no additional options.
Grid lines.
shape
>default: 'square' 'square'
validation: , 'diamond'
The shape of the grid.
thickness
>default: 1 Number
validation:
The thickness of the grid lines in pixels.
Circles or squares repeated in various patterns.
dotSize
>default: 20 [Number, Number]
validation: (horizontal size, vertical size) or Number (both dimensions)
The size of the dots.
shape
>default: 'circle' 'circle'
validation: , 'square'
The shape of each individual dot.
pattern
>default: 'diamond' 'diamond'
validation: , 'square'
The pattern in which the dots are arranged.
A classic houndstooth pattern. Takes no additional options.
A random noise pattern. Works by setting the color of all pixels to the passed-in color value, then randomizing the opacity. Note that this defaults to a larger area than other patterns to avoid looking obviously tiled. It's also computationally expensive, so it's advised to generate and save this pattern rather than using it on the fly, especially if you increase the tile size.
density
>default: 1 Number
validation: between 0 and 1
The opacity threshold for pixels to be "turned off". For example, if this is set to 0.3, any pixels randomized to have opacity greater than 0.3 will be completely transparent.
randomizer
>default: a deterministic randomizer function seeded with the string 'griptape' Function
validation:
A function to determine the randomization. Should return a number between 0 and 1.
seed
>default: 'griptape'
validation: none
The seed to use for the default randomizer. Can take any value, but will always be coerced to a string. Not used if the default randomizer is overridden.
A simple stripe pattern.
orientation
>default: 'vertical' 'vertical'
validation: or 'horizontal'
The orientation of the stripes.
thickness
>default: 0.5 Number
validation: between 0 and 1
The thickness of each stripe as a ratio of stripe to background. For example, 0.5 will result in equal size alternating stripes, while 0.1` very narrow stripes followed by very thick background stripes.
MIT