There are many ways to fill the background of a DOM or SVG element, including using solid colors or gradients. If you want to use a repeating pattern of some kind, the easiest way to do so is to create an SVG document that defines it and use it as a pattern fill. SVG images are typically smaller than bitmap images and remain sharp on high-dpi screens. Unlike CSS3 gradients, SVG images are supported on IE9. (source: http://philbit.com/svgpatterns/#whysvg)
We are going to be using svg patterns in three ways. Click the following links to see the patterns available and how to use them:
See an example using pattern fills:First an svg pattern needs to be defined. For example
this pattern generates small circles, each of radius 1px and
positions them at coordinates 1,1
like so:
This pattern then needs to be compiled. There are two ways generate a compiled version:
To define a pattern that can then be used in svg, one must add it to the defs section of an svg container. Note that the SVG pattern we defined above gets translated into a string.
This allows us to use the pattern like so:
To define a pattern that can be used with a classname, one must define a classname where the pattern string is used as the `background-image` url. For example:
This allows us to use the pattern like so:
Patternfills offers several premade patterns that can be used already.
You can see them in class name form in public/patterns.css
.
For the SVG form of the patterns, you should look at public/sample_svg.html
to view the actual compiled pattern svg definitions.
Yes! Now you can. For example, all of these patterns were created with this library:
Yep! If you'd like to use Pattern Fills in your application. You can install patternfills via npm like so:
npm install --save patternfills
You betcha! If you'd like to use Pattern Fills from the command line, you can install the library globally via npm like so:
npm install -g patternfills
The executable will allow you to produce the CSS classes or the SVG classes and save them to an appropriate file. This might come in handy when you want to integrate patternfills into your build process.
patternfills --format=svg|css
patternfills --format=svg|css --source=your/patterns
src/patterns
.
stdout
.
patternfills --format=svg|css --dest=your/path
You can see the development instructions in the readme here: https://github.com/iros/patternfills/blob/master/README.md#modifyingadding-patterns
Please get in touch via github issues if you have any questions/requests of this project or contact me (@ireneros) via email at irene at bocoup.com.