Pin Tweaks

A mate shared an article with me a little while back about Sci-Fi, one particular quote stood out:

Science fiction wasn’t about evading reality – it was a literary anthropology which made our own society into a foreign culture which we could stand back from, reflect on, and change.

I've always been a fan of this sort of thing, and you just need to take a squint at Star Trek to clock that the Klingons were thinly disguised Russians during the Cold War (a good read on this subject is here).

Along with the fun and critical thinking that is associated with the genre itself, the people who write about it are also clever wee buggers, not opposed to some critical thought on related subjects. This article on my RSS feed caught my eye this morning. If you've managed not to meet or love someone with Dementia or some other degenerative neurological condition which leaves the body there, but slowly erodes the brain, then count yourself blessed. Whether you have or not, this discussion of Twin Peaks is well worth a read.

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.