src/images/alchi.pallas-pattern.pallas-key-m1.svg

<svg title="pallas-key-m1" class="foldme"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 600 600"
  >
  <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 -->

    <!--

        M 458 458 L 342 342   # M1S - F2L
        M 458 342 L 342 458   # M4L - F3S
        M 0 0 L 58 58         # F1L -
        M 800 800 L 742 742   #

        M 0 800 L 58 742      #
        M 800 0 L 742 58      # M3L -
        M 400 0 L 342 58      # M2L -
        M 400 0 L 458 58      # F4L -

        M 400 800 L 342 742   #
        M 400 800 L 458 742   #
        M 0 400 L 58 342      # F2S -
        M 0 400 L 58 458      # F3L -
        M 800 400 L 742 342   # M4S -
        M 800 400 L 742 458   # M1L -

        M 160 100 H 240 # F1L - M2L
        M 160 300 H 240 # F2S - M1S
        M 100 160 V 240 # F1L - F2S
        M 300 160 V 240 # M2L - M1S

        M 560 100 H 640 # F4L - M3L
        M 560 300 H 640 # F3S - M4S
        M 500 160 V 240 # F4L - F3S
        M 700 160 V 240 # M3L - M4S

        M 560 500 H 640 # F2L - M1L
        M 560 700 H 640
        M 500 560 V 640
        M 700 560 V 640

        M 160 500 H 240 # F3L - M4L
        M 160 700 H 240
        M 100 560 V 640
        M 300 560 V 640

    -->


      <!-- 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

        M 400 800 L 342 742
        M 400 800 L 458 742
        M 0 400 L 58 342
        M 0 400
        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
        M 560 300 H 600
        M 500 200 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 200 500 H 240
        M 160 700 H 240
        M 100 560
        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>

          <!-- TODO remove?
          <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>

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

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

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

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

          <!-- TODO remove?
          <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>