Skip to content

Create beautiful generative background images from a string.

License

Notifications You must be signed in to change notification settings

btmills/geo_pattern

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GeoPattern

Generate beautiful tilng 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.

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:

pattern = GeoPattern.generate("Mastering Markdown", {:base_color => "#fc0"})

To use a specific pattern generator:

pattern = GeoPattern.generate("Mastering Markdown", {:generator => "sine_waves"})

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

octogons

overlapping_circles

plus_signs

xes

sine_waves

hexagons

overlapping_rings

plaid

triangles

triangles_rotated

squares

nested_squares

mosaic_squares

concentric_circles

diamonds

tessellation

Contributing

  1. Fork it ( http://github.com/jasonlong/geo_pattern/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Ports

Brandon Mills is working on completing my original Javascript version: https://github.com/btmills/geopatterns-js

Bryan Veloso is porting the library to Python: https://github.com/bryanveloso/geopatterns

About

Create beautiful generative background images from a string.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Ruby 100.0%