triangulrtriangle map generator

Who doesn't like triangles? Nobody. Especially hipsters ;-)

triangulr is a little JavaScript class to build triangles maps. Completely random. In SVG: ready for HTML or Illustrator use. It give you a bit of flexibility to generate what you need: dimension, triangle size, ratio of mess and color

After many evening trying to build nice map of trandom triangles, I realised JavaScript could help me. Nowadays, this pattern is a kind of classic, very popular and used everywhere, but long to make. So I built this little class to make things easier.

How to use it?

This is pure JavaScript, no jQuery required or other libraries. Only the simple triangulr.js in your page and you're ready to go.Here is an example:

area to place random pointsthis value is quite tricky to explain, it's the level of structure randomness (the value is relative to the triangle height)

color function (optional)

function to generate a color for each trianglean object will be passed as parameter with information about the current triangle

counter triangle numberx column indexy line indexlines number of lines in the SVGcols number of columns in the SVGpoints array of triangle points

How it works?

The engine is quite simple to understand, even if at the start, it looks confusing to build this random triangles.To begin, we use the value given to the constructor to create a regular pattern with proper equilateral triangles. To do that, the script start by generate lines of dots. Then a second pass use these points to generate triangles, and also the color function to generate the color code.Then the last pass use the data to render it in a SVG DOM object.