DEV Community

Dominic Myers
Dominic Myers

Posted on • Originally published at drmsite.blogspot.com on

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>
Enter fullscreen mode Exit fullscreen mode

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay