Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iros/patternfills
A collection of svg patterns and build scripts that allow utilizing them in svg, css and d3.
https://github.com/iros/patternfills
Last synced: 12 days ago
JSON representation
A collection of svg patterns and build scripts that allow utilizing them in svg, css and d3.
- Host: GitHub
- URL: https://github.com/iros/patternfills
- Owner: iros
- License: mit
- Created: 2013-11-25T02:08:33.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2021-06-06T01:24:12.000Z (over 3 years ago)
- Last Synced: 2024-04-14T19:02:27.163Z (8 months ago)
- Language: HTML
- Homepage: http://iros.github.io/patternfills/
- Size: 516 KB
- Stars: 576
- Watchers: 11
- Forks: 72
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - iros/patternfills - A collection of svg patterns and build scripts that allow utilizing them in svg, css and d3. (others)
README
# PatternFills
See the live site here: http://iros.github.io/patternfills/
This is a collection of svg-based pattern fills that can be used both as SVG patterns defs and CSS background image urls. There is also an example of how one might use pattern fills with d3.js.
A lot of these pattens started from: http://philbit.com/svgpatterns/ which is an amazing project.
## Project structure:
All the patterns live under `src/patterns`. Each file is a single svg file containing the pattern itself and nothing else.
To view any of the patterns, one must build the sample files. There are three of them that are created:
* `public/sample_svg.html` - a raw sample of using the pattens within SVG.
* `public/sample_css.html` - a sample of using the patterns after they are converted to css image urls. See the accompanying `pattern.css`.
* `public/sample_d3.html` - a sample of d3 code that generates the same exact output that `sample_svg.html` does, but using d3.js.
## Using the patterns
### Website
You can use the patterns as indicated via the website:
* By downloading the `pattern.css` file
* Copying individual CSS / SVG snippets into your source
### NPM
You can install patternfills via npm like so:
`npm install -g patternfills`
It comes with an executable that 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.
To produce either the css, svg or a set of svg files you can run:
`patternfills --format=svg|css|files`
You can provide a destination like so
`patternfills --format=svg|css|files --dest=your/path`
Note that if you are outputing files you need to provide a folder.
Otherwise you need to provide a single file name.
And even point to a different pattern set like this:
`patternfills --format=svg|css|files --source=your/patterns`
## How do patterns work?
In this project, we are using patterns in two different ways:
1. Using actual patterns for svg
2. Using base64 encoded strings for css-based fills.
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)
### SVG patterns
To define a pattern that can then be used in svg, one must add it to the defs section of an svg container:
```
```
Important parts to note about this section are:
1. The pattern id string
To use the pattern to color in some svg element, like a rect, simply set the style attribute `fill` to the string: `url(#patternName) #fallbackcolor`. For example:
```
```
### CSS patterns
Css patterns utilize image fills. For exmple, the following is a definition of one of our patterns, converted to base64 string and turned into a css class definition:
```
.crosshatch {
background-image: url("data:image/svg+xml,");
background-repeat: repeat;
}
```
Then simply use the class name:
```
```
## Modifying/Adding patterns
First, set up your development environemnt, if you haven't already:
`yarn install`
Then open two terminal windows, both at the root of this repository. From one, run:
`grunt dev` - this will watch for any changes under the `src` directory and rebuild the sample files, while running a dev server.
From the other run:
`grunt connect` - this will fire up a server on localhost running on port 8000. Navigate to that url to one of the sample files you wish to see (http://localhost:8000/sample_svg.html, http://localhost:8000/sample_d3.html or http://localhost:8000/sample_css.html).
The project is setup with live reloading, so that any time you modify any of the pattern files you will see your page automatically reload.
You can build the website any time by just calling `grunt render` or simply `grunt`.
The files will be built and put into the `public` folder. If you don't intend to customize the patterns or add new ones, you can simply look at the generated code and use it for your own needs.
## Submitting patterns
Ideally, this pattern library will grow and contain many new patterns! Please submit yours in a pull request and I will be more than happy to merge them if they work appropriatly.
Currently some of our patterns are:
But you should check them all out at http://iros.github.io/patternfills/