Skip to content
Use patterns from heropatterns.com in your JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
www
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
.nvmrc
.prettierignore
.prettierrc
LICENSE
README.md
package.json
rollup.config.js
yarn.lock

README.md

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

Set 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.

You can’t perform that action at this time.