2

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? – Scott Oct 1 '17 at 17:11
  • You may want to defer your acceptance a bit longer in future to see if you get more options. – joojaa Oct 1 '17 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. – Joonas Oct 2 '17 at 11:49
1

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.

enter image description here

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.

4

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 .

enter image description here

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! – SearchingSolutions Oct 6 '17 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 – joojaa Oct 6 '17 at 13:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.