hero-patterns.js
Easily set background images from Hero Patterns with JavaScript.
Each pattern from Hero Patterns has its own function. Each function returns the SVG data as a string wrapped in a url()
function. The functions take two parameters: one for setting the fill color, the other for setting the fill opacity.
Usage
Install
yarn add hero-patterns
background-image
to "Tic Tac Toe" pattern
Set let el = documentelstylebackgroundImage =
Set multiple backgrounds
// set fill & opacitydocumentstylebackgroundImage = hero // set fill with full opacitydocumentstylebackgroundImage = hero // use default fill (#000) & opacity (1)documentstylebackgroundImage = hero
For (slightly) more advanced usage, see the code I used to generate the previews on the demo page.