Create tilable patterns for website background image

Picture of Create tilable patterns for website background image
Here is a straight-forward and simple (I think) method for creating images that can be tiled without looking too "gridlike".

This tutorial makes use of Inkscape (, an open-source vector graphics editor. I imagine that this method can be applied to expensive vector graphics programs like Adobe Illustrator as well. Hey, it's your money.
Remove these adsRemove these ads by Signing Up

Step 1: Set up the document

Picture of Set up the document
03 grid.png
02 snap.png
After opening up Inkscape, you will want to set up the document properties. ([File -> Document properties])

First, change the width and height of the document to a number that is easier to work with. For this tutorial, I created a square image, but any proportion will do.

Next, you'll want to set up the grid. In older versions of Inkscape, there was only one grid possble. In newer versions, you'll need to create a new grid. Change the grid spacing so that these values divide evenly into the values of the document width & hegiht.

Generally, it's a good idea to work from a large image and then scale down as necessary. Because this is vector art, size techincally does not matter, but practically speaking, it will be easier conceptually with larger numbers. In this tutorial, I used a 500x500px image, and my grid is at 10px intervals.

Finally, make sure that the "Enable snapping" option is checked.

Step 2: Rectangle tool

Picture of Rectangle tool
Use the rectangle tool to draw a square/rectangle that takes up the full document size. A large grid spacing value (see previous step) will mke the rectangle tool snap easily to the document borders.
justgage5 years ago
 Really Awesome tutorial, using the clones was brilliant.