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.