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.
 |
 |
 |
 |
Add this line to your application's Gemfile:
gem 'triangle_pattern'And then execute:
$ bundle
Or install it yourself as:
$ gem install triangle_pattern
To create a pattern use:
require 'triangle_pattern'
pattern = TrianglePattern.generatewith 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...You can pass several options to TrianglePattern.generate
Integer, defaults to 900. Width in pixels of the pattern to generate.
Integer, defaults to 500. Height in pixels of the pattern to generate.
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.
Decimal value between 0 and 1, defaults to 0.75. Amount of randomness used when generating triangles.
Integer, defaults to 135. Is used to seed the random generator which generates the points for the mesh
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.
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 },
}
)
endAfter 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.
Bug reports and pull requests are welcome on GitHub at https://github.com/hendrixfan/triangle.
The gem is available as open source under the terms of the MIT License.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent