Introduction

Hero Patterns SCSS makes it easy to add SVG background patterns to your stylesheets with one simple Sass function. SVG patterns are from Hero Patterns.

Features

• Exports only the patterns that you use
• Provides parameters to easily customize SVG fill and opacity
• SVG output is optimized using mini-svg-data-uri

Installation

Install package with NPM

npm install hero-patterns-scss --save

OR

Clone the repository and add the dist/ directory to your project.

git clone [email protected]:Polyneue/hero-patterns-scss.git

Getting Started

After installing the package, import hero-patterns-scss into your project and use the hero-pattern() function to generate the svg output.

@import './node_modules/hero-patterns-scss/dist/entry.scss';

body {
    background-color: #dfdbe5;
    background-image: hero-pattern('jupiter', #9c92ac, 0.4);
    background-size: 30px;
}

Usage

Hero Patterns SCSS has one main function used to generate the SVG output.

hero-pattern($pattern, $fill, $opacity)

| Parameter | Type | Description | | ---------- | -------- | ---------------------------------------------- | | $pattern | String | The pattern name to be generated. | | $fill | String | Hex, RGB, or HSL values. Default is #000000. | | $opacity | Number | 0.0 through 1.0. Default is 1.0. |

Notes:
For examples of all patterns, see Hero Patterns. You can find a full list of names and matching variables here.

Copyright and License

Code copyright 2018 Ed Mendoza. Code released under the MIT license.