SVG Backgrounds: Escher Tiles

As my obsession with SVG backgrounds continues, I’ve become very interested in recreating tiles based on the work of M.C. Escher. Coincidentally, I discovered that one of the audience members at my “SVG Impossible Things with SVG” presentation in San Francisco, Jessica Parsons, has been doing work along similar lines.

The code uses the SVG <pattern> element that I’ve discussed previously; interestingly, it is to make directly in code, rather than trying to draw in Illustrator or Sketch.

Boxes on Boxes

The code for this example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">

<style type="text/css">

svg { background: #777; }

rect { stroke: none; }

#left { fill: #888; }

#right { fill: #666; }

</style>

<defs>

<pattern id="boxes" patternUnits="userSpaceOnUse" width="300" height="573" patternTransform="scale(.5)">

<rect width="150" height="200" transform="skewY(30)" id="left" />

<rect x="150" y="173" width="150" height="200"  transform="skewY(-30)" id="right" />

<use xlink:href="#right" transform="translate(-150, 285)" />

<use xlink:href="#left" transform="translate(150, 285)" />

</pattern>

</defs>

<rect width="100%" height="100%" fill="url(#boxes)" />

</svg>

Two things of note:

the background of the SVG forms the color of the “top” of each box, coloring the space between elements. (The top is not an element itself.)
the size of the final tiled result is controlled by adjusting the scale of the pattern.
the transform applied to the elements is very similar to CSS transforms; knowing one allows you to use the other.

I’ll be addressing the <use> element in a future article. See the code for this effect on CodePen