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-patternsSet background-image to "Tic Tac Toe" pattern
import {ticTacToe} from 'hero-patterns'
let el = document.querySelector('header')
el.style.backgroundImage = ticTacToe('red', 0.9)Set multiple backgrounds
import * as hero from 'hero-patterns'
// set fill & opacity
document.querySelector('.tech').style.backgroundImage = hero.circuitBoard('#bada55', 0.5)
// set fill with full opacity
document.querySelector('.milkshake').style.backgroundImage = hero.iLikeFood('#c0ff33')
// use default fill (#000) & opacity (1)
document.querySelector('.dark-side').style.backgroundImage = hero.deathStar()For (slightly) more advanced usage, see the code I used to generate the previews on the demo page.