Part of the SVG Backgrounds Reading List

It’s a little silly to talk about anything as being “of Africa” - the continent is larger and more diverse than any statement could possibly encompass - but for the purposes of classification we have to start somewhere.

These two patterns are primarily associated with the Bushoong, an ethnic ruling minority of the Kuba kingdom in the eastern Kasai region, straddling the border of south-east Congo and northern Zaire.

Raffia Cloth Design

Figure 1: Tile for the raffia pattern

This is a Bushoong geometric pattern typically dyed into raffia cloth.

Because SVG is “scaleless”, it’s often easiest to work at small, intimate sizes, knowing that your work will be preserved as it is zoomed up: in this case, I’ve constructed a 12 × 12 grid, starting with the layout in a 90° orientation for easy visualization. The <rect> elements, being 1 × 1, are rendered as squares; because they lack any other presentational attributes beside positioning information, they are automatically filled with black and lack any stroke.

Rather than create a solid shape of many points to fill the rest of the tile, I’ve created a single <polyline> element. This has the advantage of simplifying the syntax (the <polyline> needs half the points an equivalent <polygon> would to give the impression of the same shape) but not without cost:

  1. The <polyline> will automatically have a stroke thickness of 1. That means the line’s points must often be positioned half-way between points on the grid.
  2. The <polyline> can’t be given an extra stroke (at least not as SVG currently stands).

The completed tile looks like Figure 1. The rest of the pattern is made up from repeated applications of this tile in different positions and orientations via SVG transforms, which are related to (but not exactly the same as) CSS transforms. (I’ll cover SVG transforms in a future article). Like previous versions, this completed pattern is then used to fill an SVG rectangle that takes up the entire space of the page. 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
    <pattern id="tiles" patternUnits="userSpaceOnUse" width="12" height="12" patternTransform="scale(12) rotate(45)">
        <defs>
            <g id="tile">
                <rect x="-2" y="0" width="1" height="1" />
                <polyline points="3,.5 .5,.5 .5,4.5 4.5,4.5 4.5,2 "/>
                <rect x="2" y="2" width="1" height="1"/>
                <rect x="4" y="0" width="1" height="1"/>
                <rect x="4" y="6" width="1" height="1"/>
            </g>
        </defs>
        <use xlink:href="#tile" />
        <use xlink:href="#tile" transform="rotate(90 4 4) translate(2 -3)" />
        <use xlink:href="#tile" transform="rotate(-90 4 4) translate(-3 10)" />
        <use xlink:href="#tile" transform="rotate(-180 4 4) translate(-1 -5)" />
        <use xlink:href="#tile" transform="rotate(-180 4 4) translate(-1 7)" />
        <use xlink:href="#tile" transform="rotate(-90 4 4) translate(-3 -2)"/> 
    </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#tiles)" />
</svg>

Geometric Pottery Design

This Bushoong design, rendered as SVG, shows a how quick complex patterns can be built up from very simple structures by the application of <use />. Again, it’s built at very small scales for ease of construction: in this case, a 6 × 6 grid. 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
    <pattern id="tiles" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="scale(15) rotate(45)">
        <g id="blackboxwhitefill">
            <rect width="3" height="3" id="bigbox" />
            <use xlink:href="#smallbox" fill="#fff" transform="translate(-3)" />
        </g>
        <g id="whiteboxblackfill">
            <use xlink:href="#bigbox" fill="#fff" transform="translate(3)" />
            <rect width="1" height="1" x="4" y="1" id="smallbox" />
        </g>
    <use xlink:href="#whiteboxblackfill" transform="translate(-3,3)" />
    <use xlink:href="#blackboxwhitefill" transform="translate(3,3)" />
    </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#tiles)" />
</svg>

Starting automatically in the top left corner, a 3 × 3 square is constructed and given an id of bigbox. As before, it’s automatically filled with black.

For now, let’s ignore the element immediately underneath it and move to the next group. That group takes a copy of bigbox, moves it three units to the right, and fills it with white (made possible only because the original bigbox did not have an explicit fill). Beside that element is another smaller 1 × 1 rectangle, again auto-filled with black, and given an id of smallbox.

Just like HTML anchor links, SVG <use /> references can go both backwards and forwards through a document. In this case, moving back to the first group in the pattern, we can see that there’s a copy of smallbox within it, translated back and given a white fill.

Note that each of the groups has their own id. Filling in the rest of the <pattern /> is therefore just a case of copying and translating those elements down diagonally; the SVG <rect> element can then be filled in as before to tile the pattern across the screen.

The historical depth and complexity of human material culture makes for endless design possibilities in SVG; you can expect to see many more future variations of these concepts on this site.

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