JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<svg class="canvas" viewBox="0 0 10 10">
  <g transform="translate(5,5)">
    <g transform="rotate(-30) skewX(30) scale(1,0.866)" fill="red" opacity="0.5">
      <rect x="0" y="0" width="1" height="1"/>
    </g>
    <g transform="rotate(-30) skewX(30) scale(1,0.866) translate(1,-1)" fill="red" opacity="0.5">
      <rect x="0" y="0" width="1" height="1"/>
    </g>
    <g transform="rotate(-30) skewX(-30) scale(1,0.866)" fill="green" opacity="0.5">
      <rect x="0" y="0" width="1" height="1"/>
    </g>
    <g transform="rotate(-30) skewX(-30) scale(1,0.866) translate(0,0)" fill="green" opacity="0.5">
      <rect x="0" y="0" width="1" height="1"/>
    </g>
    <g transform="rotate(30) skewX(30) scale(1,0.866)" fill="blue" opacity="0.5">
      <rect x="0" y="0" width="1" height="1"/>
    </g>
  </g>
</svg>

CSS

html, body {
  margin: 0;
}
.canvas {
  width: 100%;
  height: 100%;
}

JavaScript

x' = (x-z)/ sqrt(2)

y' = (x + 2y + z) / sqrt(6)