With this gem you can generate SVG background-images for your project. It uses the Delaunay Triangulation to generate a mesh of triangles. The triangles are also colored in a gradient given any set of colors.

Installation

Add this line to your application's Gemfile:

gem 'triangle_pattern'

And then execute:

$ bundle

Or install it yourself as:

$ gem install triangle_pattern

Usage

To create a pattern use:

pattern = TrianglePattern.generate

with specific width and height:

pattern = TrianglePattern.generate(width: 900, height: 500)

with a specific set of colors:

pattern = TrianglePattern.generate(colors: ["#edf8fb", "#b2e2e2", "#66c2a4", "#2ca25f", "#006d2c"])

get the pattern in svg:

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

get the Base64 encoded string:

puts pattern.to_base64
# => PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC...

Options

You can pass several options to TrianglePattern.generate

width

Integer, defaults to 900. Width in pixels of the pattern to generate.

height

Integer, defaults to 500. Height in pixels of the pattern to generate.

cell_size

Integer, defaults to 75. Size of the mesh used to generate triangles. Larger values will result in coarser patterns, smaller values will result in finer patterns.

variance

Decimal value between 0 and 1, defaults to 0.75. Amount of randomness used when generating triangles.

seed

Integer, defaults to 135. Is used to seed the random generator which generates the points for the mesh

colors

Array, defaults to ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"]. Defines the colors used in the pattern. TrianglePattern interpolates between the given colors to generate a smooth gradient. You can get colors by using the Chroma.js Color Palette Helper for example.

Rake

require 'triangle_pattern/triangle_task'

TrianglePattern::TriangleTask.new(
      name: 'generate',
      description: '', data: {
        'fixtures/BuGn.svg' => { colors: ["#edf8fb", "#b2e2e2", "#66c2a4", "#2ca25f", "#006d2c"], width: 400, height: 400, seed: 80 },
        'fixtures/GnBu.svg' => { colors: ["#edf8fb", "#b3cde3", "#8c96c6", "#8856a7", "#810f7c"], width: 400, height: 400, seed: 90 },
        'fixtures/OrRd.svg' => { colors: ["#fef0d9", "#fdcc8a", "#fc8d59", "#e34a33", "#b30000"], width: 400, height: 400, seed: 100 },
        'fixtures/BrBG.svg' => { colors: ["#a6611a", "#dfc27d", "#f5f5f5", "#80cdc1", "#018571"], width: 400, height: 400, seed: 110 },
      }
    )
  end

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/hendrixfan/triangle.

License

The gem is available as open source under the terms of the MIT License.