SVG Cube
Tags: graphics, html, xml
Published: 2020-05-12 04:20:27

---
title: SVG Cube
published: true
date: 2020-02-23 08:28:00 UTC
tags: Graphics,HTML,XML
canonical_url: https://drmsite.blogspot.com/2020/02/svg-cube.html
---

[![](https://1.bp.blogspot.com/-ZMoBjcMpfFU/XlI2-khh1EI/AAAAAAAAlGs/Z943gw4mE3g5nvvbBNMTnrgcdU3n-_xGwCLcBGAsYHQ/s320/2020-02-23_0824.png)](https://1.bp.blogspot.com/-ZMoBjcMpfFU/XlI2-khh1EI/AAAAAAAAlGs/Z943gw4mE3g5nvvbBNMTnrgcdU3n-_xGwCLcBGAsYHQ/s1600/2020-02-23_0824.png)

My Dad and I share a love of [op art](https://www.tate.org.uk/art/art-terms/o/op-art) and are forever sending across images we like. He recently sent me something from [Pinterest](https://www.pinterest.co.uk/pin/14636767527708910/), 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](https://inkscape.org/) so that it is made up of a `def` and a couple of `pattern`s. 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:

```svg
<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](https://annoyingmouse.js.org/WireFrameJS/000-MISCELLANEOUS/CUBE/), and with it being an SVG you can scale to your heart's content.