Overview

Notes on how to draw this:

<svg viewBox="0 0 720 720" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="circle-0" fill="#fff" color="#000">
        <circle cx="0" cy="0" r=360 fill="currentColor" />
        <circle cx="0" cy="0" r=324 />
        <circle cx="0" cy="0" r=288 fill="currentColor" />
        <circle cx="0" cy="0" r=252 />
        <circle cx="0" cy="0" r=216 fill="currentColor" />
        <circle cx="0" cy="0" r=180 />
        <circle cx="0" cy="0" r=144 fill="currentColor" />
        <circle cx="0" cy="0" r=108 />
        <circle cx="0" cy="0" r=72 fill="currentColor" />
        <circle cx="0" cy="0" r=36 />
    </g>
  </defs>
  <use href="#circle-0" x="0" y="0" />
  <use href="#circle-0" x="720" y="0" />
  <use href="#circle-0" x="360" y="180" />
  <use href="#circle-0" x="0" y="360" />
  <use href="#circle-0" x="720" y="360" />
  <use href="#circle-0" x="360" y="540" />
  <use href="#circle-0" x="0" y="720" />
  <use href="#circle-0" x="720" y="720" />
  <use href="#circle-0" x="360" y="900" />
</svg>

The Seigaiha「青海波」pattern

The pattern consist of overlapping "big" circles, each of such circle is actually a series of concentric circles.

Start from a square canvas of 720x720^[1] pixels.

Divide the square into 2 half vertically, and 4 quadrant horizontally.

The center point of each circle is at:

• 4 corners of the canvas
• 2 midpoints on each vertical vertex
• 2 intersections of the vertical bisection and the 2nd and 3rd quadrant line.
• 1 intersection of the vertical bisection and the 2nd quadrant of the square "directly below".

If for each of points, a circle with radius of half the canvas (or 360px) is drawn, the seigaiha effect is achieved. In a 720x720 squares, the coordinates (x, y) of the centers, in order of drawing, are:

1st: (0, 0)
2nd: (720, 0)
3rd: (360, 180)
4th: (0, 360)
5th: (720, 360)
6th: (360, 540)
7th: (0, 720)
8th: (720, 720)
9th: (360, 900)

Define a circle shape once with <defs> and draw with <use>; that way it is easy to customize the look and feel of the pattern.

For now, start with a simple white fill, black stroke circle:

<svg viewBox="0 0 720 720" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="circle">
      <circle cx="0" cy="0" r="360" fill="white" stroke="black"/> 
    </g>
  </defs>
    <use href="#circle" x="0" y="0" />
    <use href="#circle" x="720" y="0" />
    <use href="#circle" x="360" y="180" />
    <use href="#circle" x="0" y="360" />
    <use href="#circle" x="720" y="360" />
    <use href="#circle" x="360" y="540" />
    <use href="#circle" x="0" y="720" />
    <use href="#circle" x="720" y="720" />
    <use href="#circle" x="360" y="900" />
</svg>

The 3rd and 9th circle are draw to tie the pattern together vertically.

Trying the svg in a grid (hover over the image to see outline of each cell):

The seigaiha pattern typically uses a series of concentric circles, let's draw 5 black circles. In SVG, draw 10 alternating black and white circles, with radius size stepping up:

...
<defs>
  <g id="circle-1" fill="#fff" color="#000">
    <circle cx="0" cy="0" r="360" fill="currentColor" />
    <circle cx="0" cy="0" r="324" />
    <circle cx="0" cy="0" r="288" fill="currentColor" />
    <circle cx="0" cy="0" r="252" />
    <circle cx="0" cy="0" r="216" fill="currentColor" />
    <circle cx="0" cy="0" r="180" />
    <circle cx="0" cy="0" r="144" fill="currentColor" />
    <circle cx="0" cy="0" r="108" />
    <circle cx="0" cy="0" r="72" fill="currentColor" />
    <circle cx="0" cy="0" r="36" />
  </g>
</defs>
...

The pattern when changing to "circle-1":

This pattern in a grid:

To make an end to the pattern horizonatlly, draw only the last 3 circles (7th, 8th and 9th):

<svg width="300" height="300" viewBox="0 0 720 720">
  <use href="#circle-1" x="0" y="720" />
  <use href="#circle-1" x="720" y="720" />
  <use href="#circle-1" x="360" y="900" />
</svg>

Use this "ender" to have an end to the pattern: