幾何学的で美しいSVGパターン画像を生成する『GeoPattern』の紹介

f:id:syonx:20151207011823p:plain

GeoPatternとは

GeoPatternとは、文字列を与えてSVG画像を生成するライブラリです。与えた文字列はハッシュに変換され、それをもとに幾何学パターン（全16種）や色相、彩度が決定されます。事前に指定することも可能です。本家RubyGem版の他に、有志による各言語での実装が揃っています（後述）。

生成した画像はCSSのbackground-imageでの利用が想定されています。タイル型の画像を出力するので、それを縦方向・横方向にリピートして表示します。base64 に変換することもできるので便利ですよ。

GeoPattern が使われているWebサイト

GeoPatternの制作者はGitHubのスタッフの方です。それもそのはず、GeoPatternはGitHubのWebサイトで利用されているのです。カッコいいですね〜。

f:id:syonx:20151207011830p:plain

デモ

f:id:syonx:20151207011838p:plain

http://btmills.github.io/geopattern/

Webページ上で動作イメージが確認できます。日本語でも大丈夫ですよ！
画面下の「Save Pattern...」からPNGファイルをダウンロードできます。

どんな感じで使うの

Ruby

GeoPattern by jasonlong

$ gem install geo_pattern

require 'geo_pattern'
pattern = GeoPattern.generate('Mastering Markdown')
# pattern = GeoPattern.generate('Mastering Markdown', color: '#fc0', patterns: :sine_waves)

puts pattern.to_svg
# => <svg xmlns="http://www.w3.org/2000/svg" ...

puts pattern.to_base64
# => PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC...

puts pattern.to_data_uri
# => url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...);

<div style="background-image: <%= pattern.to_data_uri %>"></div>

文字列リストからまとめて生成するやつ

作ったので参考にどうぞ。

https://github.com/syon/utils/tree/master/geopattern

JS or jQuery plugin

btmills/geopattern

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

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

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

Ports & related projects

Cocoa や Middleman がある！

Port	Repository
JavaScript	https://github.com/btmills/geopattern
Python	https://github.com/bryanveloso/geopatterns
PHP	https://github.com/redeyeventures/geopattern-php
Go	https://github.com/pravj/geopattern
CoffeeScript	https://github.com/muchweb/geo-pattern-coffee
Cocoa	https://github.com/mattfxyz/GeoPattern-Cocoa
Middleman	https://github.com/fedux-org/middleman-geo_pattern