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. It might have been easier to draw this using Adobe Illustrator.
The size of the SVG+JavaScript file is only about 4700 bytes, but the size of the SVG shapes generated is about 470,000 bytes (100 times bigger).
The purpose of this artwork is to be a background pattern for a Scottish-themed project.