Nocturnal Programmer's Machine

    hero-patterns

    2.1.0 • Public • Published

    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.

    Keywords

    none

    Install

    npm i hero-patterns

    DownloadsWeekly Downloads

    392

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    1.18 MB

    Total Files

    7

    Last publish

    Collaborators

    • lowmess