In the previous SVG patterns article, I demonstrated how to build an illustration recursively, using a single element. This next version is more complex, demonstrating how to build patterns from nested, referenced groups.

The entire pattern is built from a single polygon:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
        viewBox="0 0 562.6" 325">
    <polygon id="base" points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" />
</svg>

The design has some basic CSS applied:

polygon { 
    fill: none; 
    stroke: rgba(0,0,0,0.3); 
    stroke-width: 3; 
}

Due to the fact that strokes scale in thickness in their associated elements, the rgba color will help create lighter copies.

The “base” polygon element is at the root of an extended group of elements:

<g id="group">
    <polygon points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" 
    id="base" />

Each variant of the original polygon is referenced via an xlink, and provided with its own id, becoming the template for further variants, inside its own group:

<g id="group">
    <polygon points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" id="base" />
        <g id="basetwist" >
            <use xlink:href="#base" transform="rotate(90 280 162.5) translate(116, 67) scale(.58)" id="base_level1" />

The full pattern:

<g id="group">
    <polygon points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" id="base" />
        <g id="basetwist" >
            <use xlink:href="#base" transform="rotate(90 280 162.5) translate(116, 67) scale(.58)" id="base_level1" />
            <g id="diamond"> 
                <use xlink:href="#base" transform="translate(188.85, 108) scale(.33)" id="base_level2" />
                <g id="sidediamond">
                    <use xlink:href="#base_level1" transform="translate(188.85, 108) scale(.33)" id="base_level3" />
                    <use xlink:href="#base_level2" transform="translate(188.85, 108) scale(.33)" id="base_level4" />
                    <use xlink:href="#base_level3" transform="translate(188.85, 108) scale(.33)" /> 
                    <use xlink:href="#base_level4" transform="translate(188.85, 108) scale(.33)" />
                </g>
            </g>
        <use xlink:href="#sidediamond" transform="translate(62,0)" />
        <use xlink:href="#sidediamond" transform="translate(-62,0)" />
        <use xlink:href="#diamond" transform="translate(0,-107)" />
        <use xlink:href="#diamond" transform="translate(0, 107)" />
    </g>
</g>

Note the the #base_level elements are true recursions: each element uses the previous version, and uses the same transform and translate values to create smaller copies.

Creating the full design means referencing what has been built up so far as a single group, still working inside the <pattern>. First, we create multiple copies of the pattern, rotated from the top and bottom points of the original shape:

<g id="tesselation">
    <use xlink:href="#group" />
    <use xlink:href="#group" transform="rotate(60 281 0)" />
    <use xlink:href="#group" transform="rotate(-60 281 0)" />
    <use xlink:href="#group" transform="rotate(-60 281 325)" />
    <use xlink:href="#group" transform="rotate(60 281 325)" />
    …
</g>

Still inside this group, further translated copies are made:

	<g id="vert">
        <use xlink:href="#group" transform="translate(-282, -162)" />
        <use xlink:href="#group" transform="translate(-282, 162)" />
    </g>
    <use xlink:href="#vert" transform="translate(564, 0)" />

Using the pattern

Using the pattern in a page involves creating a rectangle and filling it with the final, complete pattern:

<rect width="100%" height="100%" fill="url(#tesselation)" />

You can also find the complete pattern and code on CodePen.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/pEWdmG