Patterns with Inkscape
Right now there is a very popular trend on the web and in print media to use a pinsrtipe pattern for a background image. Today I’m going to go over how to create a pinstripe pattern in Inkscape and hopefully it will give you an idea of how to use and make patterns for Inkscape. Follow below to learn how to make this seemingly simple pinstrip pattern using Inkscape or skip to download the svg and png pattern.
Open Inkscape and create a document that is 40 x 40 pixels by pressing (Ctrl + shift + d) and editing the page dimensions. Now turn on your grid, and enable snapping, and increase the sensitivity to 5 pixels. The quickest way I’ve found is to draw the stripes by hand with the beizier tool. Start at the top left corner and draw points at pixels from zero in both directions. Then remove the stroke (ctrl + shift + f) and add a fill. Draw the other stripe starting at 0 40 and then 40 0 and make it 20 pixels in width.
At this point we have a basic pinstrip at a 45 degree angle that can be exported to a PNG and used as a repeated background for a website. Press Ctrl + shift + E then select page and export bitmap. Simple enough.
Unfortunately, due to a bug in Inkscape the pattern will display with spaces, so there are two work arounds that I’ve came up with. One is to resize the original pattern and make a clipping for what ever shape you want. The downside to this is that you can’t resize the stripes or the spaces will appear. The other work around is to make a tiled clone of 4 X 4 and then edit the original nodes by about .01 pixels until the spaces aren’t visible, then make the tiles however big you need them to be.
Download the .svg and the .png.
Leave a Reply