Skip to content
Generate beautiful SVG patterns
Branch: master
Clone or download

Latest commit

btmills Merge pull request #33 from aviaryan/master
Add info about webpack bundling in README (closes #32)
Latest commit 7f7fd79 Jul 27, 2017


Type Name Latest commit message Commit time
Failed to load latest commit information.
js remove jQuery build, more direct main field Dec 10, 2016
lib Replace extend with object-assign Dec 10, 2016
.eslintignore Upgrade ESLint Dec 19, 2014
.eslintrc Upgrade ESLint Dec 19, 2014
.gitignore Add tests Dec 28, 2014
.travis.yml Disable Travis email notifications Apr 22, 2017
LICENSE add license and readme Feb 5, 2014 Add info about webpack bundling of geopattern Jul 26, 2017
package.json Merge pull request #23 from derhuerst/object-assign Dec 10, 2016


npm version build status downloads

This is a JavaScript port of jasonlong/geo_pattern with a live preview page and is derived from the background generator originally used for GitHub Guides.



Include the minified script from your server. jQuery is optional.

<script src="js/jquery.min.js"></script> <!-- optional -->
<script src="js/geopattern.min.js"></script>

Or reference it from a CDN.

<script src=""></script> <!-- optional -->
<script src=""></script>

Use either the GeoPattern browser global or the jQuery plugin:

// Use the global...
var pattern = GeoPattern.generate('GitHub');
$('#geopattern').css('background-image', pattern.toDataUrl());

// ...or the plugin

For backwards compatibility with the script on the Guides, the source hash for generation can be supplied with a data-title-sha attribute on the element. If the attribute exists, the generator will ignore the input string and use the supplied hash.

To run on Internet Explorer 9, the GeoPattern script requires polyfills for window.btoa() and Uint32Array.

View index.html on the gh-pages branch for a complete example.


npm install geopattern

After requiring geopattern, the API is identical to the browser version, minus the jQuery plugin.

var GeoPattern = require('geopattern');
var pattern = GeoPattern.generate('GitHub');
pattern.toDataUrl(); // url("data:image/svg+xml;...

PS - If you are going to use Webpack (or any other bundler) to bundle geopattern and it will be used in a browser, ignore buffer shim from the bundling to decrease its size. See #32 for more details.


GeoPattern.generate(string, options)

Returns a newly-generated, tiling SVG Pattern.

  • string Will be hashed using the SHA1 algorithm, and the resulting hash will be used as the seed for generation.

  • options.color Specify an exact background color. This is a CSS hexadecimal color value.

  • options.baseColor Controls the relative background color of the generated image. The color is not identical to that used in the pattern because the hue is rotated by the generator. This is a CSS hexadecimal color value, which defaults to #933c3c.

  • options.generator Determines the pattern. All of the original patterns are available in this port, and their names are camelCased.


Gets the pattern's background color as a hexadecimal string.

GeoPattern.generate('GitHub').color // => "#455e8a"

Pattern.toString() and Pattern.toSvg()

Gets the SVG string representing the pattern.


Gets the SVG as a Base64-encoded string.


Gets the pattern as a data URI, i.e. data:image/svg+xml;base64,PHN2ZyB....


Gets the pattern as a data URL suitable for use as a CSS background-image, i.e. url("data:image/svg+xml;base64,PHN2ZyB...").


Licensed under the terms of the MIT License, the full text of which can be read in LICENSE.

You can’t perform that action at this time.