Making yet another ‘Chinese’-style pattern in Inkscape (Part 2)

[Note: This was first published as a Facebook Note on Dec 31, 2015. I'm making it available here to add to the Inkscape pattern tutorials.] On Feb 20, 2014, I posted an Inkscape tutorial on how to recreate a repeating Chinese pattern (used in the film ‘The Last Emperor’) over at Blogger. (̶I̶ ̶c̶a̶n̶’̶t̶ ̶f̶i̶n̶d̶ ̶t̶h̶e̶ ̶n̶o̶t̶e̶ ̶o̶n̶ ̶F̶a̶c̶e̶b̶o̶o̶k̶ ̶s̶o̶ ̶m̶a̶y̶b̶e̶ ̶I̶ ̶d̶i̶d̶n̶’̶t̶ ̶m̶a̶k̶e̶ ̶a̶ ̶F̶a̶c̶e̶b̶o̶o̶k̶ ̶N̶o̶t̶e̶ ̶v̶e̶r̶s̶i̶o̶n̶)̶ I just made a Facebook version yesterday. Recently, I created a Chinese-inspired #Baybayin ‘Unggoy’ greeting panel for the 2016 Year of the Monkey and this one also has a repeating pattern:

I really like the maze-like pattern on the circle background behind the Baybayin, conveying a Chinese-like feel (turns out this might not actually be Chinese, but more on that later — click here for the better-looking, Google+ version). The pattern is from Subtle Patterns:

However, they only come in two colors (white and black) and only in PNG so I can only use them limitedly through Inkscape’s layer blend modes (Multiply, in my case). Here in the earlier version, I used the PNG pattern as tiled clones in their own layer, with Multiply blend mode:

Here it is used as background for 2015 Year of the Sheep (also using the original PNGs in their own layer, Multiply blend mode): Since the pattern is not in vector format, there’s not much I can do with it, so I decided to recreate it as a vector path, for use as tiled clones/pattern later. First, I Googled for “Chinese Maze pattern”, hoping to find a larger, clearer version to work with so I’d have an easier time tracing it. There were many that came close, but no dice.

It turns out the pattern only looks Chinese but it is a different design, resembling lightning – something, I believe, web designer Peax (who contributed it to Subtle Patterns) did on his own. And so I had to make do with what’s available, this small PNG tile:

The markings are faint (they don’t call the site “Subtle Patterns” for nothing). I wondered whether the darker portion is of the same width as the lighter portion (it looks that way in the black version). I decided they should be equidistant but, once I come up with a vector version, the intervals between portions can be freely adjusted. I first rotated the tile 45° so I could trace over the lines more clearly:

Tracing like this is not a very accurate way of reproducing patterns. I wanted more precision so I looked for the basic whole unit of the pattern. There are two:

Basically, it’s just 5×5 squares per unit – a double ‘H’ monogram connected diagonally top to bottom by sharing one square; the other is just mirrored and rotated 90° to it:

Here’s how they look connected (rotated 45° for placing convenience in Inkscape) – assuming the distances between the elements and the widths of the ‘strokes’ are identical (red squares):

Then, referring to the rotated tile, I established the boundaries where my trace should be – it’s a 2 unit-wide, 1 unit-high rectangle. I used ‘snap to’ midpoints (of line segments), centers, corners and nodes feature in Inkscape for tracing around the shapes bound by my rectangle.

The dots are just there for you to see the start and end of each traced line. You can also trace in the middle of the green squares, like this:

But that takes more effort because, for it to work well as a tile, you should leave out tracing some parts, as you can see above. Here’s the resulting vector trace, stroke widths adjusted (and the whole thing rotated back to normal), compared with the original tile:

Original tile vs stroke-based vector tile

Notice the width of the strokes makes portions go outside the rectangle boundaries (below, left). This is just normal. The points of the vector tile are still inside the rectangle though, and the overlapping eliminates unsightly gaps between tiles. If I convert the strokes to paths or create a bitmap tile (for use in other applications), I’d have to clip the resulting shape (below, right):

Stroke tile with overlaps vs clipped/shape tile

But then I’d have to set no strokes – if I do, the resulting strokes will cut through the seams:

Shaped/clipped tile, unstroked vs stroked

To use the tile as a pattern, resize it proportionally to the appropriate size and adjust the stroke color and width some more to your liking (I just wanted the strokes to be same width as their negative space here).

You can now create tiling vector patterns with Inkscape using Tiled Clones. With the tile selected, do Edit > Clone > Create Tiled Clones:

I forgot to include this info when I first published this post, but you need to tweak the Shift settings in making tiled clones. You may have to experiment with it, depending on your chosen stroke thickness, but here's mine:

You can then group the resulting tiled clones and put a suitable background behind them.

[There is actually an ‘Objects-to-Pattern’ command (Alt+I) in Inkscape but that feature is still buggy, showing unsightly gaps between tiles.] You can also clip them in Inkscape (group the tiles, lay a path over the group, select both group and clipping path then right click and select “Set clip”):

Have fun with Inkscape. ;)

###