Recent portfolio work by one of my students used a very attractive “scaled” background image, encoded in base64. I decoded the texture to reverse-engineer the code, then improved the revealed SVG; at the same time, I created a simple hexagonal background pattern, which is also shared here.

Scales

The markup for the scales is fairly straightfoward:

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
    <pattern id="scales" width="30" height="30" 
    patternUnits="userSpaceOnUse"  patternTransform="scale(2)">
            <g id="curves">
                <path id="inner" d="M0 0c0,30, 30,30 30,0" />
                <path id="outer" d="M0 0c0,30, 30,30 30,0" />
            </g>
            <use x="15" y="15" xlink:href="#curves" />
            <use x="-15" y="15" xlink:href="#curves" />
            <use x="0" y="0" xlink:href="#curves" />  
            <use x="15" y="-15" xlink:href="#curves" />
            <use x="-15" y="-15" xlink:href="#curves" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#scales)" />
</svg>

The SVG uses the standard <pattern> technique I’ve demonstrated in previous articles; the one slightly unusual aspect is that the design used in the pattern is a group element.

The SVG background is associated with the following styles:

svg { 
  background: #0F7173;
}
#scales { 
  fill: #0F7173;
}
#inner { 
    stroke: #0c4c4d;
    stroke-width: 3.1;
}
#outer { 
  stroke: #098f92;
  stroke-width: 0.9;
}

Note that the SVG element and scales use the same color for their background and fill, respectively; this technique is repeated in the hexagon example below.

Hexagons

The code features minimal markup for a linked hexagon background:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%">
     <defs>
        <pattern id="hexagons" width="50" height="43.4" 
        patternUnits="userSpaceOnUse" 
        patternTransform="scale(5) translate(2) rotate(45)">
            <polygon 
            points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2" 
            id="hex" />
            <use xlink:href="#hex" x="25" />
            <use xlink:href="#hex" x="-25" />
            <use xlink:href="#hex" x="12.5" y="-21.7" />
            <use xlink:href="#hex" x="-12.5" y="-21.7" />
        </pattern>
     </defs>
<rect width="100%" height="100%" fill="url(#hexagons)" />
</svg>

The pattern uses the following CSS:

svg { 
  background: rgb(125,155,132); 
}
polygon { 
  fill: rgb(125,155,132); 
  stroke-width: 2;
  stroke: #000;
}

Again, the SVG uses the same technique of relying on the same background and fill for the svg element and its polygons to “fill in” any blank space. In this case I’ve used a series of transforms on the pattern to place it slightly “off” on the page.

Since SVG strokes are expand evenly either side of the “midline” of an SVG path, increading the stroke-width value will make all the hexagons equally small, relative to their outlines.

On CodePen

The examples on Codepen use the SVG code directly inside the HTML code for clarity; in production, the CSS would be inside the SVG, and the entire assemblage would be turned into base64 code, which would be used as a value for the background-image property. For further clarification, I’ve provided the hexagons and scales as separate pens.

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/xZyKVp