SVG Cube

My Dad and I share a love of op art and are forever sending across images we like. He recently sent me something from Pinterest, and I loved it, but what I loved more was a related image, and I got to thinking about how to replicate it using SVGs. Yesterday morning I took a stab at it and clocked it was quite a simple design made up of 3 skewed and rotated rectangles that were then arranged into a hexagon. The hexagons were then placed adjacent to each other and offset above and below.

What took some time this morning was figuring out how a hexagonal design could be placed within a rectangle - but after staring at the lino in our bathroom it came to me.

Anyway, I also took the time to refactor the image I created in Inkscape so that it is made up of a def and a couple of patterns. After all, the rectangular sides of the cubes have the same fill but are just rotated and skewed. So the fill could be a pattern, the cube could be a def, and then the arrangement of seven cubes (which are required to create a properly tessellating design, and all use the same cube, just arranged appropriately) could be another pattern. From many hundreds of lines of repeating XML I came up with this:

<pattern id="side-fill"
         x="0"
         y="0"
         width="36"
         height="36"
         patternUnits="userSpaceOnUse">
  <path style="fill:#000000;stroke:none;"
        d="M 0,30 2,30 1,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 2,30 4,30 3,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 4,30 6,30 5,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 6,30 8,30 7,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 8,30 10,30 9,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 10,30 12,30 11,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 12,30 14,30 13,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 14,30 16,30 15,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 16,30 18,30 17,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 18,30 20,30 19,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 20,30 22,30 21,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 22,30 24,30 23,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 24,30 26,30 25,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 26,30 28,30 27,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 28,30 30,30 29,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 30,30 32,30 31,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 32,30 34,30 33,0 z" />
  <path style="fill:#000000;stroke:none;"
        d="M 34,30 36,30 35,0 z" />
</pattern>
<defs>
  <g id="cube">
    <rect x="0"
          y="0"
          width="36"
          height="36"
          transform="matrix(0.87,-0.5,1,0.58,0,0)"
          fill="url(#side-fill)" />
    <rect x="0"
          y="0"
          width="36"
          height="36"
          transform="matrix(-0.87,-0.5,0,-1.15,30,51.9)"
          fill="url(#side-fill)" />
    <rect x="0"
          y="0"
          width="36"
          height="36"
          transform="matrix(0,1,-1,0.58,60,0)"
          fill="url(#side-fill)" />
  </g>
</defs>
<pattern id="tile"
         x="0"
         y="0"
         width="125.28"
         height="108"
         patternUnits="userSpaceOnUse">
  <g transform="translate(-30,54.6)">
    <g transform="translate(93.96,-54)">
      <use xlink:href="#cube" />
    </g>
    <g transform="translate(31.32,-54)">
      <use xlink:href="#cube" />
    </g>
    <g>
      <use xlink:href="#cube" />
    </g>
    <g transform="translate(62.64)">
      <use xlink:href="#cube" />
    </g>
    <g transform="translate(125.28)">
      <use xlink:href="#cube" />
    </g>
    <g transform="translate(93.96,54)">
      <use xlink:href="#cube" />
    </g>
    <g transform="translate(31.32,54)">
      <use xlink:href="#cube" />
    </g>
  </g>
</pattern>

Fun eh? You can see it in my playground here, and with it being an SVG you can scale to your heart's content.