読者です 読者をやめる 読者になる 読者になる

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

f:id:syonx:20151207011823p:plain

GeoPatternとは

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

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

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

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

f:id:syonx:20151207011830p:plain

デモ

f:id:syonx:20151207011838p:plain

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

どんな感じで使うの

Ruby

$ 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>

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

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

JS or jQuery plugin

<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

CocoaMiddleman がある!

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

SVG Advent Calendar 2015

この記事は SVG Advent Calendar 2015 の 8日目 の記事として書かれました。

www.adventar.org