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
Note: as of version 1.4.0, Ruby version 2 or greater is required.
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', patterns: :sine_waves)
To use a subset of the available patterns:
pattern = GeoPattern.generate('Mastering Markdown', patterns: [:sine_waves, :xes])
Get the SVG string:
puts pattern.to_svg
# => <svg xmlns="http://www.w3.org/2000/svg" ...
Get the Base64 encoded string:
puts pattern.to_base64
# => PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC...
You can then use this string to set the background:
<div style="background-image: <%= pattern.to_data_uri %>"></div>
Available patterns
Note: As of version 1.3.0, string references (e.g. overlapping_circles)
are deprecated in favor of symbol references (e.g. :overlapping_circles).
:chevrons
:octagons
:overlapping_circles
:plus_signs
:xes
:sine_waves
:hexagons
:overlapping_rings
:plaid
:triangles
:squares
:nested_squares
:mosaic_squares
:concentric_circles
:diamonds
:tessellation
Inspection of pattern
If you want to get some more information about a pattern, please use the
following methods.
pattern = GeoPattern.generate('Mastering Markdown', patterns: [:sine_waves, :xes])
# The color of the background in html notation
pattern.background.color.to_html
# The color of the background in svg notation
pattern.background.color.to_svg
# The input colors
pattern.background.preset.color
pattern.background.preset.base_color
# The generator
pattern.background.generator
To get more information about the structure of the pattern, please use the following methods:
pattern = GeoPattern.generate('Mastering Markdown', patterns: [:sine_waves, :xes])
# The name of the structure
pattern.structure.name
# The generator of the structure
pattern.structure.generator
Rake Support
string = 'Mastering markdown'
require 'geo_pattern/geo_pattern_task'
GeoPattern::GeoPatternTask.new(
name: 'generate',
description: 'Generate patterns to make them available as fixtures',
data: {
'fixtures/generated_patterns/diamonds_with_color.svg' => { input: string, patterns: [:diamonds], color: '#00ff00' },
'fixtures/generated_patterns/diamonds_with_base_color.svg' => { input: string, patterns: [:diamonds], base_color: '#00ff00' }
}
)
Developing
Generate Fixtures
rake fixtures:generate
Run tests
rake test
Contributing
- Fork it ( https://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
Development
Prefix rspec-commandline with RSPEC_PROFILE=1 to output the ten slowest
examples of the test suite.
RSPEC_PROFILE=1 bundle exec rspec
Ports & related projects
JavaScript port by Brandon Mills:
https://github.com/btmills/geopattern
Python port by Bryan Veloso:
https://github.com/bryanveloso/geopatterns
Elixir port by Anne Johnson:
https://github.com/annejohnson/geo_pattern
PHP port by Anand Capur:
https://github.com/redeyeventures/geopattern-php
Go port by Pravendra Singh:
https://github.com/pravj/geopattern
CoffeeScript port by Aleks (muchweb):
https://github.com/muchweb/geo-pattern-coffee
Cocoa port by Matt Faluotico:
https://github.com/mattfxyz/GeoPattern-Cocoa
Middleman extension by @maxmeyer:
https://github.com/fedux-org/middleman-geo_pattern
Rust port with a WASM demo by @suyash:
https://github.com/suyash/geopattern
Dart(Flutter) port by @suyash:
https://pub.dev/packages/geopattern_flutter