Part of the SVG Backgrounds Reading List

Cet article est également disponible en français

Cultural appropriation of design happens constantly, usually with little appreciation or understanding: witness the recent popularity of “tribal” tattoos, for example. Used solely because they “look cool”, such cultural borrowings ignore the thinking, significance, and development of design across deep time, a phenomenon I very much want to avoid as I explore the design culture of my native land. So as I teach the SVG for this design, with your indulgence, I also hope to share a small cultural history lesson.

Kowhaiwhai

Photograph of a fresh unfurling silver fern frond, the inspiration for the koru design, symbolizing new life, growth, strength and peace.

When they beached on its shores during the last great surge of human migration into the Pacific, the Polynesians who discovered New Zealand / Aotearoa brought with them a design language that had developed over a thousand years. Centuries of cultural isolation further developed these designs into a distinctive form known as “kowhaiwhai”: a broad system that reflected the natural environment. These unique designs commonly used the shape of the koru, but also used the forms of hammerhead sharks, parrot beaks, the crescent moon and other natural elements.

Design forms became strongly associated with particular tribes; over time, the patterns moved from war canoe paddles to the rafters of meeting houses and beyond. Today there are many variations on the design pattern - from the tail of New Zealand’s national airline to one of the new proposed flags for the country - to the point at which “Kowhaiwhai” is used as a general term for the design.

Koru flag submission by Andrew Fyfe, one of four alternatives for the New Zealand flag

The SVG

The SVG for each design echoes the approach I had for the ancient Greek geometric friezes of the previous article: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.6 29.4">
<style type="text/css">
   svg { background: #000; }
</style>
    <path fill="#EF3633" d="M0,4.7v1.6c0,0,11.3-0.7,15.8,9.8c9.3,5.7,10.6,6.8,15.8,6.8s12.1-4.2,21.5-13.6c5.7-2.6,12.4-3.1,12.4-3.1 V4.7L0,4.7z"/>
    <path fill="#FFF" d="M67.6,4.7,65,4.7c-13.8,0-26,14.8-26,14.8c-2.5-3.1-3.2-9.9,3-11.7
c-3.9,2.9-0.1,5.5,1.3,5.3c4.9,0.1,5.3-7.9-2.2-7.9H41c-5.2,0-7.2,5.6-7.2,9c0,1.4,0.6,4.6,2.2,7c-1.3,0.4-2.9,0.6-4.9,0.5
c-9.1-0.3-17.6-10-21.3-13.9c9.6-0.6,10.1,2.2,11.7,3.9c-1.6,0.2-2.2,1.1-2.2,2.5c0,1.6,1,2.6,3.2,2.6c3,0,3-3.1,3-3.1
c0-0.1,0-0.2,0-0.3C25.3,5,13.4,4.7,13.4,4.7c-4.1,0-7.7,0.8-7.7,0.8C4.6,5,2.6,4.7,0,4.7c-13.8,0-26,14.8-26,14.8
c-2.5-3.1-3.2-9.9,3-11.7c-3.9,2.9-0.1,5.5,1.3,5.3c4.9,0.1,5.3-7.9-2.2-7.9H-24c-5.2,0-7.2,5.6-7.2,9c0,1.7,1,6.6,3.9,8.7
c4.3,3.1,19.8,3.9,19.8-8l0-0.3c0,0-0.5-2.6-2.9-2.6c-2.4,0-3.2,1.3-3.2,2.8c0,1.5,1.8,2.8,2.6,2.8c0.8,0-4.3,5.9-12,3.9
C-17.6,16-8.1,5.4,2.9,8c-5.1,9,0.9,15.9,5.7,15.9s6.1-1.9,6.1-3.9s-2.2-4-3.7-4s-2.9,1.1-2.9,2.3s0.1,2,1.3,2.8
c-3.4-0.3-4.9-3.9-4.9-5.6s-0.4-4,1.9-6.4c2.6,3.2,12.3,11.5,17.1,13.6c4.7,2.1,11.6,2,14.9,0.5c5,2.8,19.2,3,19.2-8.4l0-0.3
c0,0-0.5-2.6-2.9-2.6c-2.4,0-3.2,1.3-3.2,2.8c0,1.5,1.8,2.8,2.6,2.8c0.8,0-4.3,5.9-12,3.9C47.4,16,56.9,5.4,67.9,8"/>
    <line stroke="#FFF" stroke-width="2" x1="0" y1="3.7" x2="65.8" y2="3.7"/>
    <line stroke="#FFF" stroke-width="2" x1="0" y1="25.5" x2="65.8" y2="25.5"/>
</svg>

The lines at the top and bottom are the white border; the black fill on the SVG element (an easy and quick way to set a background color on a SVG) fills in the remainder.

The “swirl” design is slightly more complex: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.7 46.3" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="bottom-swirl">
        <path fill="#9D553C" d="M-6.9,46.9C-2.6,42.4,5,30.7,10.8,18.7S28,0,35.8,0s18.8,5.7,18.8,17.5s-5.3,17.2-11.7,17.2
S31.1,32,31.1,24.3c0,0,0.6-3.2,1.8-5c1.2-1.8,2.2-1.6,3.1-1c0.9,0.6,1,2.1,0,3.2s-2.4,6.2,3.2,8.8c4.2,2,7.9-0.3,9.2-2.2
c2.1-2.9,5.7-12.5-3.5-20.3S25.8,7.5,23.3,9.3s-9.5,12.9-11.8,18S4,40.8,0.8,44.8s-8,1.8-8,1.8"/>
        <path d="M6.5,46.3c3.8-4.5,8.8-12.3,10.6-16.7c1.2,5,5.7,12.4,9.3,16.7c-2.9,0-6.2,0-6.2,0s-3.8-4.4-4.8-6.1 c-0.8,1.7-3.2,5.5-3.5,5.9C11.6,46.6,6.5,46.3,6.5,46.3z"/>
    </g>
    <g id="upper-swirl">
        <path d="M42.1,23.2c2-0.6,1.6-7.3-3-9s-9.9,1.2-11.4,3.5c-2.1,3.2-3,10,0,15.2c1.8,3.2,7.2,7.4,13.1,7.3s11.1-2.9,13.8-6
s4.6-10,4.6-12.9S56.3,8.1,47.2,0c2.5,0,2.8,0,5.8,0c6,5.6,9,13.2,10.8,17.1c1.8-4,7.8-11.9,13-17.1c2.2,0,5.9,0,6.9,0
c-6.1,5.6-10.6,11.9-12.9,15.8S65.9,26,62.1,32.2c-3.9,6.3-8.2,12.9-19.2,12.9S28.6,41.9,25.2,37s-5.2-11.9-2.4-18.4
s10.1-8.5,14.1-8.5s8.9,4.4,9.5,7.8s1,4.4-0.6,6.6s-2,2.8-4.5,2S38.9,24.1,42.1,23.2z"/>
        <path d="M57.1,0c2.6,2.4,5.5,6.4,6.9,8.8c2.2-2.9,5.4-7.2,7-8.8c-2.4,0-4.6,0-4.6,0s-1.1,2-1.6,2.9C63.4,1.5,62.3,0,62.3,0H57.1z" />
    </g>
    <use xlink:href="#upper-swirl" transform="translate(-64.8)" />
    <use xlink:href="#bottom-swirl" transform="translate(64.8)" />
</svg>

To give the “swirls” a certain hand-drawn roughness, they are not made as single-line paths, but as doubled-back shapes. The groups are duplicated and transformed with <use> to complete the tiling of the design. (Giving translate a single value means “translate along the X axis”).

The CSS

Both are saved as SVG files. To apply them to an element (a <div>, for this example) I used CSS: 

div { 
    background-repeat: repeat-x;
    background-size: contain;
    background-image: url(koru.svg);
}

Ethnomathematics

Both of these designs are good examples of ethnomathematics - fully-fledged expressions of mathematics in cultures without a traditional written language. Other examples can be found in Ron Eglash’s study of fractals in African designs.

In the next article I’ll be moving back to the other side of the world, exploring Islamic geometric designs in SVG.

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