src/images/alchi.pallas-pattern.line-of-four.f2-m1-f3-m4.svg

<svg title="alchi.pallas-pattern.line-of-four.f2-m1-f3-m4" class="foldme" 
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 200 800 200"
  >
  <style>
    svg { --fg: black; --bg: white; } /* light mode */

    .fig1 .stroke {
      stroke-width: 2;
      stroke: black; /* fallback when css variables are not supported */
      stroke: var(--fg);
    }

    .nofill {
      fill: none;
    }

    .fillbg {
      fill: white;
      fill: var(--bg);
    }

    .fillfg {
      fill: black;
      fill: var(--fg);
    }

  </style>

  <g class="fig1">

    <!-- start generated svg -->

      <!-- variant: four squares, one cross -->
      <path class="stroke nofill" d="
        M 458 458 L 342 342
        M 458 342 L 342 458
        M 0 0 L 58 58
        M 800 800 L 742 742
        M 0 800 L 58 742
        M 800 0 L 742 58
        M 400 0 L 342 58
        M 400 0 L 458 58
        M 400 800 L 342 742
        M 400 800 L 458 742
        M 0 400 L 58 342
        M 0 400 L 58 458
        M 800 400 L 742 342
        M 800 400 L 742 458

        M 160 100 H 240
        M 160 300 H 240
        M 100 160 V 240
        M 300 160 V 240

        M 560 100 H 640
        M 560 300 H 640
        M 500 160 V 240
        M 700 160 V 240

        M 560 500 H 640
        M 560 700 H 640
        M 500 560 V 640
        M 700 560 V 640

        M 160 500 H 240
        M 160 700 H 240
        M 100 560 V 640
        M 300 560 V 640
      "/>

      <g dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40">

          <circle cx="100" cy="100" r="60" stroke-width="2" class="stroke nofill" />
          <text x="100" y="100" class="fillfg">F1L</text>

          <circle cx="300" cy="100" r="60" stroke-width="2" class="stroke nofill" />
          <text x="300" y="100" class="fillfg">M2L</text>

          <circle cx="500" cy="100" r="60" stroke-width="2" class="stroke nofill" />
          <text x="500" y="100" class="fillfg">F4L</text>

          <circle cx="700" cy="100" r="60" stroke-width="2" class="stroke nofill" />
          <text x="700" y="100" class="fillfg">M3L</text>

          <!-- NOTE no age -->

          <circle cx="100" cy="300" r="60" stroke-width="2" class="stroke nofill" />
          <text x="100" y="300" class="fillfg">F2</text>

          <circle cx="300" cy="300" r="60" stroke-width="2" class="stroke nofill" />
          <text x="300" y="300" class="fillfg">M1</text>

          <circle cx="500" cy="300" r="60" stroke-width="2" class="stroke nofill" />
          <text x="500" y="300" class="fillfg">F3</text>

          <circle cx="700" cy="300" r="60" stroke-width="2" class="stroke nofill" />
          <text x="700" y="300" class="fillfg">M4</text>

          <circle cx="100" cy="500" r="60" stroke-width="2" class="stroke nofill" />
          <text x="100" y="500" class="fillfg">F3L</text>

          <circle cx="300" cy="500" r="60" stroke-width="2" class="stroke nofill" />
          <text x="300" y="500" class="fillfg">M4L</text>

          <circle cx="500" cy="500" r="60" stroke-width="2" class="stroke nofill" />
          <text x="500" y="500" class="fillfg">F2L</text>

          <circle cx="700" cy="500" r="60" stroke-width="2" class="stroke nofill" />
          <text x="700" y="500" class="fillfg">M1L</text>

          <circle cx="100" cy="700" r="60" stroke-width="2" class="stroke nofill" />
          <text x="100" y="700" class="fillfg">F4S</text>

          <circle cx="300" cy="700" r="60" stroke-width="2" class="stroke nofill" />
          <text x="300" y="700" class="fillfg">M3S</text>

          <circle cx="500" cy="700" r="60" stroke-width="2" class="stroke nofill" />
          <text x="500" y="700" class="fillfg">F1S</text>

          <circle cx="700" cy="700" r="60" stroke-width="2" class="stroke nofill" />
          <text x="700" y="700" class="fillfg">M2S</text>
      </g>

    <!-- end generated svg -->

  </g>

</svg>