Have you ever heard about the geo_pattern-gem? With this gem you can create beautiful images based on a string:

GeoPattern.generate('Mastering Markdown', patterns: :xes)

The code given above will create something like this:

I use middleman for my private website and for some internal sites at work. For those of you who’ve never heard about middleman: It’s a static website generator like Github’s jekyll. You can find some more information about middleman at their site.

To make my life easier, I created an extension for middleman to integrate the geo_pattern-gem into a middleman-website. It has a very thin API around geo_pattern’s own one:

<%= geo_pattern 'Mastering Markdown', patterns: :xes %>


To install it, add the following line to your project’s Gemfile and run bundle install:

gem 'middleman-geo_pattern'

After that, add the following line to your config.rb:

activate :geo_pattern


There are some defaults which can be overridden. All options can be set per invocation of the helper as well. There are some more options available. All unknown options are passed on to the underlying html tag helper (tag or content_tag). To get a full list of middleman-geo_pattern-options, please visit the project website at github.

  • Set the color:

    Set a default value

    activate :geo_pattern do |g|
      g.color = '#123455'

    Override the default value

    geo_pattern 'Mastering Markdown', color: '#765432'
  • Set the base color:

    Set a default value

    # default: nil
    activate :geo_pattern do |g|
      g.base_color = '#123455'

    Override the default value

    geo_pattern 'Mastering Markdown', base_color: '#765432'


Using middleman-geo_pattern is quite simple ☺. Look at the following code which demonstrates a more advanced usage of middleman-geo_pattern.

<%= geo_pattern 'Mastering Markdown', style: 'width: 100%; height: 100px; border-radius: 15px', patterns: :xes %>

This will result in the image shown at the beginning of this document:

The End

Thanks for reading!


If you found a mistake in this article or would like to contribute some content to this article, please file an issue in this Git Repository


The contents of this article are put together to the best of the authors' knowledge, but it cannot be guaranteed that it's always accurate in any environment. It is up to the reader to make sure, that all information found in this article, does not do any damage to the readers's working environment or whereever this information is applied to. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, arising from, out of or in connection with this article. Please also note the information given on the Licenses' page.

Related Articles