GeoPattern
Generate beautiful tiling SVG patterns from a string. The string is converted into a SHA and a color and pattern are determined based on the values in the hash. The color is determined by shifting the hue and saturation from a default (or passed in) base color. One of 16 patterns is used (or you can specify one) and the sizing of the pattern elements is also determined by the hash values.
You can use the generated pattern as the background-image
for a container. Using the base64
representation of the pattern still results in SVG rendering, so it looks great on retina displays.
See the GitHub Guides site and the Explore section of GitHub are examples of this library in action. Brandon Mills has put together an awesome live preview page that's built on his Javascript port.
Installation
Add this line to your application's Gemfile:
gem 'geo_pattern'
And then execute:
$ bundle
Or install it yourself as:
$ gem install geo_pattern
Usage
Make a new pattern:
pattern = GeoPattern.generate("Mastering Markdown")
To specify a base background color (with a hue and saturation that adjusts depending on the string):
pattern = GeoPattern.generate("Mastering Markdown", {:base_color => "#fc0"})
To use a specific background color (w/o any hue or saturation adjustments):
pattern = GeoPattern.generate("Mastering Markdown", {:color => "#fc0"})
To use a specific pattern generator:
pattern = GeoPattern.generate("Mastering Markdown", {:generator => GeoPattern::SineWavePattern})
Get the SVG string:
puts pattern.svg_string
# => <svg xmlns="http://www.w3.org/2000/svg" ...
Get the Base64 encoded string:
puts pattern.base64_string
# => PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC...
You can then use this string to set the background:
<div style="background-image: <%= pattern.uri_image %>"></div>
Available patterns
Note: As of version 1.3.0
, string references (e.g. overlapping_circles
) are deprecated in favor of class references (e.g. GeoPattern::OverlappingCirclesPattern
).
GeoPattern::OctagonPattern
GeoPattern::OverlappingCirclesPattern
GeoPattern::PlusSignPattern
GeoPattern::XesPattern
GeoPattern::SineWavePattern
GeoPattern::HexagonPattern
GeoPattern::OverlappingCirclesPattern
GeoPattern::PlaidPattern
GeoPattern::TrianglePattern
GeoPattern::SquarePattern
GeoPattern::NestedSquaresPattern
GeoPattern::MosaicSquaresPattern
GeoPattern::ConcentricCirclesPattern
GeoPattern::DiamondPattern
GeoPattern::TessellationPattern
Contributing
- Fork it ( http://github.com/jasonlong/geo_pattern/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
Ports
JavaScript port by Brandon Mills: https://github.com/btmills/geopatterns-js
Python port by Bryan Veloso: https://github.com/bryanveloso/geopatterns
PHP port by Anand Capur: https://github.com/redeyeventures/geopattern-php
Go port by Pravendra Singh: https://github.com/pravj/geo_pattern
CoffeeScript port by Aleks (muchweb): https://github.com/muchweb/geo-pattern-coffee