# Triangle Pattern Background in Freeware

I am a webpage creator and I´d like to give my webpage a nice graphical twist by using traingle-patterns in the background. I´ve seen this on many other webpages before (for example this one) and I know I could to this with software like Photoshop. But, as I´m not very engaged in the graphic design branch, I haven´t purchased any software for this and I´m not planning on doing so. So, does anybody know how to do these triangle patterns in a free software like Inkscape or Gimp?

REMARK: My operating system is Windows 8, so I can´t use that apple software out there.

• Wouldn't it be easier to jsut purchase a stock image for use? Commented Oct 1, 2017 at 17:11
• You may want to defer your acceptance a bit longer in future to see if you get more options. Commented Oct 1, 2017 at 19:14
• I'd probably use Trianglify or possibly maybe one of the static image generators for it out there: Grohlf's generator, Alssndro's generator and this codepen. Commented Oct 2, 2017 at 11:49

You do not actually need a fancy editor for this a text editor and a browser will do quite well. Just Delunlay triangulate a bunch of points and draw the triangles. So something like:

``````// you need SVG.js and delunlay.js

var points = [[0,0],[0,150],[400,150],[400,0]];

for (var i = 0;i <40;i++){
points.push([getRandomInt(0,400),getRandomInt(150,0)]);
}

var tris = Delunlay.triangulate(points);

var draw = SVG('drawing');
for(var i = 0; i < tris.length;i+=3 )
draw.polygon(points[tris[i]].join(',')+
" "+points[tris[i+1]].join(',')+
" "+points[tris[i+2]].join(',')).fill('#2'+getRandomHex(0,15)+getRandomHex(5,15));

function getRandomHex(min, max){
return getRandomInt(min, max).toString(16);
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
``````

Here is a live demo on this jsfiddle. You may want to stroke the paths to get rid of the nasty conflation errors most browsers have .

Image 1: Preview of what the page does, each time you run you get a different pattern

• Sounds good! Although I really like the creativity of this answer and the idea of generating random low-poly´s sounds good, I will stick to Inkscape for this webpage. Thanks for this cool answer anyways! Commented Oct 6, 2017 at 13:33
• @SearchingSolutions thats fine, this is more of a can i do it kind of answer. Note, that you can open the generated SVG in Inkscape if you wish so you get best of both worlds. Anyway im not sure if random is the best solution for point generation, you could try starting with a uniform grid and then randomizing the position by 2 grid widths for example. Or a perturbed grid with X truly random points added. etc Commented Oct 6, 2017 at 13:39

It would be easier to use Inkscape(dot)org which is free and Open Source. It's a vector image editor, so it's particularly suited to this kind of work, unlike GIMP which is a raster image editor.

In Inkscape, simply switch on the grid and enable snap to grid, then draw triangles using the Pen Tool, and select the fill colours you want.

Here's a very quick demonstration of what's possible.

Even better, you can use SVG's created in Inkscape directly in your web page - which means the image doesn't even need to be rasterized.

• Thanks! Is there any way of randomizing or programing a pattern out of these triangles in Inkscape? Commented Oct 1, 2017 at 17:43
• @SearchingSolutions There are methods to help partially automate low poly art in Inkscape, but not fully. More info here: goinkscape.com/low-poly-art-tutorial-using-inkscape Commented Oct 2, 2017 at 7:18