A Sass utility to generate optimized SVG background images from heropatterns.com
MIT License
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.
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
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;
}
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.
Code copyright 2018 Ed Mendoza. Code released under the MIT license.