JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<svg class="hidden">
  <defs>
    <g id="cube" class="cube-unit">
      <rect width="21" height="24" fill="var(--lightColor)" stroke="var(--strokeColor)" transform="skewY(30)" />
      <rect width="21" height="24" fill="var(--darkColor)" stroke="var(--strokeColor)" transform="skewY(-30) translate(21 24.3)" />
      <rect width="21" height="21" fill="var(--mainColor)" stroke="var(--strokeColor)" transform="scale(1.41,.81) rotate(45) translate(0 -21)" />
    </g>
  </defs>
</svg>
[[0,2], [0, 1], [1, 2], [0,0], [1,1], [2,2], [1,0], [2,1], [2,0]]
<svg class="blue-cube" viewBox="0 -64 300 230">
  y=0, x=2 (alt dep 0)
  == x = 79 + 42 = 121
  == y = 72 - 24?
  <use xlink:href="#cube" x="121" y="48"></use> x-21 y+12
  y=0, x=1 depth 1 (alt dep 0)
  == x = 79 + 21 + (depth - x * 21) = 100
  == y = 72 - 12
  <use xlink:href="#cube" x="100" y="60"></use> x+42 y+0
  y=1, x=2 depth 1 (alt dep 1)
  == x = 79 + 42 + 21 = 142
  == y = 72 - 12? = 60
  <use xlink:href="#cube" x="142" y="60"></use>
  y=0, x=0 depth 2 (alt dep 0)
  == x = 79 = 79
  == y = 72 = 72
  <use xlink:href="#cube" x="79" y="72"></use>
  y=1, x=1 depth 2 (alt dep 1)
  == x = 79 + 21 + 21 = 121
  == y = 72 - 12 + 12 = 72
  <use xlink:href="#cube" x="121" y="72"></use>
  y=2, x=2 depth 2 (alt dep 2)
  == x = 79 + 42 + 42
  == y = 72 + 24 - 24
  <use xlink:href="#cube" x="163" y="72"></use>
  y=1, x=0 depth 3 (alt dep 1)
  == x = 79 + 21?
  == y = 72 + 12
  <use xlink:href="#cube" x="100" y="84"></use>
  y=2, x=1 depth 3 (alt dep 2)
  == x = 79 + 42
  == y =
  <use xlink:href="#cube" x="142" y="84"></use>
  y=2, x=0 depth 4 (alt dep 2)
  == x = 79 + 42
  == y = 48 + 24 + 24 // (48 + y * 12 + (depth - y) * 12)
  <use xlink:href="#cube" x="121" y="96"></use>
</svg>

CSS

body {
  font-family: "Roboto", sans-serif;
  margin: 0 auto;
  text-align: center;
}

.hidden {
  display: none;
}

.cube-unit {
  fill-opacity: 0.9;
  stroke-miterlimit: 0;
}

.blue-cube {
  --mainColor: #009cde;
  --strokeColor: #0079ad;
  --lightColor: #00affa;
  --darkColor: #008bc7;
}