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. jQuery is optional.

<script src="js/jquery.min.js"></script> <!-- optional -->
<script src="js/geopattern.min.js"></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.

View geopattern.html 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;...


GeoPattern.generate(string, options)

Returns a newly-generated, tiling SVG Pattern.


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.