Tartan Pattern

SVG

This pattern was not easy to draw! First, I had to examine the pattern of the weave. I saw that the tartan is composed of blocks where one color comes from the row and the other color from the column. After that, the work was all in figuring out the math and then determining the colors. Getting the stitches to line up took a bit of trial and error. This code could be used to draw other tartans, by assigning new colors and sizes. (This code relies on the pattern being symmetrical along a diagonal, so it might not be suitable for all tartans.)

I used the image in the Royal Stewart article on Wikipedia as my model. I could have drawn this as individual stitches and the code might have been no more lengthy or difficult.

My first version had embedded JavaScript and the file size was only 4700 bytes, but the size of the SVG shapes generated is about 470,000 bytes (100 times bigger). This version uses the use command instead of JavaScript for replication, and the file size is about 9200 bytes. The slightly larger file may be offset by the fact that this version doesn't use JavaScript, so performance may be better. Also, the JavaScript version had to be included as an object, which is always message. This latest version can be included as an image.

The purpose of this artwork is to be a background pattern for a Scottish-themed project.