Triangle Pattern Background in Freeware

Question

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.

Answer 1

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

Answer 2

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.