SVG Patterns of Japan

Just for fun (and, coincidentally, for the #retroTilesWeekend at CodePen) I’ve made two more SVG backgrounds, derived from traditional geometric Japanese motifs.

Seigaiha

Literally translated, “blue sea and waves”. Originally a motif used on Chinese maps to indicate the ocean; imported to Japan sometime before the 6th century CE, when it appears on buried haniwa figures. There are many variations on the pattern, which are used everywhere: as a geometrical print, inlay design, and drawn with a rake on sand in Japanese gardens.

The SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="100%" height="100%">
    <defs>
        <pattern id="waves" patternUnits="userSpaceOnUse" width="230.4" height="221.7" patternTransform="scale(.5)">
            <defs>
                <g id="wave" stroke="#000080" fill="none">
                    <circle fill="#FFF" stroke-width="8" r="106.7" />
                    <circle stroke-width="9" r="81" />
                    <circle stroke-width="8" r="55.3" />
                    <circle stroke-width="7" r="32.5" />
                    <circle stroke-width="7" r="13.2" />
                </g>
        </defs>
            <use x="229.9" y="0.7" xlink:href="#wave" />
            <use x="114.9" y="55.3" xlink:href="#wave" />
            <use x="-114.9" y="55.3" xlink:href="#wave" />
            <use x="0" y="111.3" xlink:href="#wave" />
            <use x="229.9" y="111.3" xlink:href="#wave" />
            <use x="114.9" y="166.4" xlink:href="#wave" />
            <use x="-114.9" y="166.4" xlink:href="#wave" />
            <use x="0" y="222.2" xlink:href="#wave" />
            <use x="345.1" y="166.4" xlink:href="#wave" />
            <use x="229.9" y="222.2" xlink:href="#wave" />
            <use x="114.9" y="277.2" xlink:href="#wave" />
            <use x="-114.9" y="277.2" xlink:href="#wave" />
            <use x="345.1" y="277.2" xlink:href="#wave" />
    </pattern>
    </defs>
<rect width="100%" height="100%" fill="url(#waves)" />
</svg>

The markup uses very much the same idea as my earlier simple SVG diagonal lines design, but takes it a little further: in this case, I am using <defs> inside <defs> to create the initial pattern. There are a few things to note:

the fill and default stroke for the circles has been moved into a group element for the sake of efficiency.
The cx and cy of the circles does not need to be defined, as the pattern itself is never rendered directly; the circles are assumed to have their centers on 0, 0.
The largest outer circle in the pattern has a background of white, which serves to cover and create the overlap effect.
The use of the circle pattern is layered from front to back inside the area of the width and height of the <pattern>
The scale of the pattern - and therefore the number of times it repeats on the page - is controlled by the scale value of patternTransform.

Asanoha

A regular geometric design drawn from the pattern of overlapping hemp leaves; popular as a year-round pattern on kimono, and (traditionally) for infant’s swaddling clothes. Seen easiest as a pattern of six-pointed stars, with every vertex connected to the center as well as its adjacent point.

The SVG

The pattern for this example consists of a single polygon coupled with lines and polylines:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<pattern id="ashano" patternUnits="userSpaceOnUse" width="119" height="103" patternTransform="scale(1)">
<g stroke="#231F20" fill="none">
        <polygon points="89.3,0 89.3,34.4 119,51.6 89.3,68.7 89.3,103.1 59.5,85.9 29.8,103.1 29.8,68.7 0,51.5 29.8,34.4 29.8,0 59.5,17.2"/>
        <line x1="59.5" y1="17.2" x2="59.5" y2="85.9"/>
        <line x1="29.8" y1="103.1" x2="89.3" y2="0"/>
        <line x1="29.8" y1="0" x2="89.3" y2="103.1"/>
        <line x1="0" y1="51.5" x2="119" y2="51.5"/>
        <line x1="29.8" y1="68.7" x2="89.3" y2="34.4"/>
        <line x1="89.3" y1="68.7" x2="29.8" y2="34.4"/>
        <line x1="29.8" y1="0" x2="89.3" y2="0"/>
        <line x1="89.3" y1="0" x2="119" y2="51.6"/>
        <line x1="119" y1="51.6" x2="89.3" y2="103.1"/>
        <line x1="89.3" y1="103.1" x2="29.8" y2="103.1"/>
        <polyline points="89.3,103.1 119,85.9 119,51.5"/>
        <line x1="89.3" y1="103.1" x2="119" y2="103.1"/>
        <polyline points="119,51.5 119,17.2 89.3,0"/>
        <line x1="89.3" y1="0" x2="119" y2="0"/>
        <line x1="119" y1="51.5" x2="89.3" y2="0"/>
        <polyline points="29.8,0.1 0,17.2 0,51.6"/>
        <line x1="0" y1="0" x2="29.8" y2="0.1"/>
        <line x1="29.8" y1="0.1" x2="0" y2="51.6"/>
        <polyline points="0.1,51.5 0.1,85.9 29.8,103.1" />
        <line x1="0" y1="103" x2="29.8" y2="103.1"/>
        <line x1="0.1" y1="51.5" x2="29.8" y2="103.1"/>
</g>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#ashano)" />
</svg>

In future articles I hope to spend more time recreating both Japanese and Arabic geometrical 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/QbzgpO