hero-patterns
Patterns from heropatterns.com
Last updated a year ago by lowmess .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install hero-patterns 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 2.0.2                                ...           latest (a year ago)

41 Versions

  • 2.0.2                                ...           a year ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.3.4                                ...           2 years ago
  • 1.3.3                                ...           2 years ago
  • 1.3.2                                ...           2 years ago
  • 1.3.1                                ...           2 years ago
  • 1.3.0                                ...           2 years ago
  • 1.2.1                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.6.5                                ...           3 years ago
  • 0.6.4                                ...           3 years ago
  • 0.6.3                                ...           3 years ago
  • 0.6.2                                ...           3 years ago
  • 0.6.1                                ...           3 years ago
  • 0.6.0                                ...           3 years ago
  • 0.5.7                                ...           3 years ago
  • 0.5.6                                ...           3 years ago
  • 0.5.5                                ...           3 years ago
  • 0.5.4                                ...           3 years ago
  • 0.5.3                                ...           3 years ago
  • 0.5.2                                ...           3 years ago
  • 0.5.1                                ...           3 years ago
  • 0.5.0                                ...           3 years ago
  • 0.4.0                                ...           3 years ago
  • 0.3.2                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.5                                ...           3 years ago
  • 0.2.4                                ...           3 years ago
  • 0.2.3                                ...           3 years ago
  • 0.2.2                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 0
Last Month 2
Dependencies (0)
None
Dev Dependencies (12)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |