I am currently working on this repository. It will be restructed and the patterns will be prerendered in CSS and in cases be converted to JS factories. It will include http://iros.github.io/patternfills/sample_svg.html as well with diffrent approaches for SVG and CSS patterns. These then can be used through the CDN or by downloading them. Then, I am planning to add my pencil ports as well… So, to not limit this repository to patterns… it is now called Pattern and Pencils.
- Only CSS. No JavaScript!
- < 1KB minified and gzipped!
- Supports all modern browsers
- Built Using SCSS.
- Full color control.
| small | medium | large | extra large |
|---|---|---|---|
| pattern-checks-sm | pattern-checks-md | pattern-checks-lg | pattern-checks-xl |
| pattern-grid-sm | pattern-grid-md | pattern-grid-lg | pattern-grid-xl |
| pattern-dots-sm | pattern-dots-md | pattern-dots-lg | pattern-dots-xl |
| pattern-cross-dots-sm | pattern-cross-dots-md | pattern-cross-dots-lg | pattern-cross-dots-xl |
| pattern-diagonal-lines-sm | pattern-diagonal-lines-md | pattern-diagonal-lines-lg | pattern-diagonal-lines-xl |
| pattern-horizontal-lines-sm | pattern-horizontal-lines-md | pattern-horizontal-lines-lg | pattern-horizontal-lines-xl |
| pattern-vertical-lines-sm | pattern-vertical-lines-md | pattern-vertical-lines-lg | pattern-vertical-lines-xl |
| pattern-diagonal-stripes-sm | pattern-diagonal-stripes-md | pattern-diagonal-stripes-lg | pattern-diagonal-stripes-xl |
| pattern-horizontal-stripes-sm | pattern-horizontal-stripes-md | pattern-horizontal-stripes-lg | pattern-horizontal-stripes-xl |
| pattern-vertical-stripes-sm | pattern-vertical-stripes-md | pattern-vertical-stripes-lg | pattern-vertical-stripes-xl |
| pattern-triangles-sm | pattern-triangles-md | pattern-triangles-lg | pattern-triangles-xl |
| pattern-zigzag-sm | pattern-zigzag-md | pattern-zigzag-lg | pattern-zigzag-xl |
Version-History:
1.0 Initial release under MIT
See the full documentation Hype specific restriction might apply
Latest version can be linked into your project using the following in the head section of your project:
<link href="https://cdn.jsdelivr.net/gh/worldoptimizer/HypePatternFactory/pattern.min.css" rel="stylesheet">Optionally you can also link a SRI version or specific releases. Read more about that on the JsDelivr (CDN) page for this extension at https://www.jsdelivr.com/package/gh/worldoptimizer/HypePatternCSS
Learn how to use the latest extension version and how to combine extensions into one file at https://github.com/worldoptimizer/HypeCookBook/wiki/Including-external-files-and-Hype-extensions
Footnotes:
1. This is a fork off the great work from the people at https://bansal.io/