: 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

@Yeniel278

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

Vote Up Vote Down

@Samaraweera207

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.

Vote Up Vote Down