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.
Top comments (0)