Using Geopattern

Monday, April 10th, 2017

Introduction

While building the front page for this site, I found myself stuck on the title graphic.

I had the following requirements:

  • It needed to be eye-catching
  • It couldn’t be over-done – nothing animate, or too wild
  • It needed to work with my avatar picture somehow
  • It needed to not interfere with the site-description bullet

Initially, I looked at trianglify – but I was already using that for the site backdrop.  After some further searching, I settled on geopattern. There is a demo page here.

Usage

Usage is simple – just include the script and either use the GeoPattern global, or the jQuery plugin.


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

// ...or the plugin
$('#geopattern').geopattern('GitHub');

There are options for the pattern seed, color, basecolor, and pattern generator:


//Generate yellow octagons
GeoPattern.generate("seed string",{color: '#997700',baseColor:'#997722', generator: "ocatagons"});
//Generate green chevrons
GeoPattern.generate("seed string2",{color: '#22FF44',baseColor:'#000000', generator: "chevrons"});

Applying the resulting image to an object in your DOM is simple with jQuery:


 $('#objectid').css('background-image', pattern.toDataUrl());

Gotchas

This was one of the simplest pieces I’ve worked with yet – it’s really just plug and play. As long as you don’t MUNG the script somehow, you’re good. I didn’t bother with using npm or bower to include it – I just dropped it in my page and started working.

Example

This canvas is patterned with a random seed. Refresh to see a new pattern.