Part of the SVG Backgrounds Reading List

As my obsession with 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’s easier to make the design directly in code, rather than trying to draw it 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>

Three 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

twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/LVBQoR