Fork me on GitHub

Pattern Fills

Github: http://github.com/iros/patternfills
Website: http://iros.github.io/patternfills

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:

How do SVG Patterns Work?

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:

1. SVG Pattern Definition:

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:

2. CSS Background Image Url

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:

What does this library do:

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.

Can I customize the colors?

Yes! Now you can. For example, all of these patterns were created with this library:

Can I use these programatically?

Yep! If you'd like to use Pattern Fills in your application. You can install patternfills via npm like so:

npm install --save patternfills

Can I use these from the command line?

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.

How do I add patterns?

You can see the development instructions in the readme here: https://github.com/iros/patternfills/blob/master/README.md#modifyingadding-patterns

Questions?

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.