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

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.
justgage4 years ago
 Really Awesome tutorial, using the clones was brilliant.