• Stars
    star
    46
  • Rank 613,923 (Top 13 %)
  • Language
    Ruby
  • License
    MIT License
  • Created almost 5 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Dynamically generate beautiful triangle background patterns using delaunay triangulation

Ruby Gem Version

TrianglePattern Logo

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.

screen shot 2017-08-07 at 12 18 15 pm screen shot 2017-08-07 at 12 18 15 pm
screen shot 2017-08-07 at 12 18 15 pm screen shot 2017-08-07 at 12 18 15 pm

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:

require 'triangle_pattern'

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"])

image

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.

They are talking about it

License

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