src/images/alchi.pallas-pattern.square-F1L-F2S-F3L-F4S.svg

<svg title="alchi.pallas-pattern.square-F1L-F2S-F3L-F4S"
  viewBox="0 0 400 400"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  >
  <!-- based on alchi.pallas-pattern.svg -->
  <defs>
    <style type="text/css">
      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>
  </defs>

  <g class="fig1">


    <g title="Pattern lines" stroke-width="2" fill="none" stroke="black" class="stroke nofill">


      <g title="simple pattern">
        <g title="single lines orthogonal: single lines outside squares">
          <g>
            <title>top left</title>
            <!--
            <path title="right" d="M 300 160 L 300 240"/>
            <path title="left" d="M 100 160 L 100 240"/>
            -->
            <path title="right" d="M 342 142 L 400 200 L 342 258"/>
            <path title="left" d="M 58 142 L 0 200 L 58 258"/>
            <path title="bottom" d="M 160 300 L 240 300"/>
            <path title="top" d="M 160 100 L 240 100"/>
          </g>
        </g>
      </g>


    </g>

    <g title="circles and text">
      <g title="circles" stroke-width="2" fill="none" stroke="black" class="stroke nofill">
        <title>Circles</title>
        <circle cx="100" cy="100" r="60"/>
        <circle cx="300" cy="100" r="60"/>
        <circle cx="100" cy="300" r="60"/>
        <circle cx="300" cy="300" r="60"/>
      </g>
      <g title="text" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40" class="fillfg">
        <text fill="black" x="100" y="100">F1L</text>
        <text fill="black" x="300" y="100">F2S</text>
        <text fill="black" x="300" y="300">F3L</text>
        <text fill="black" x="100" y="300">F4S</text>
      </g>
    </g>

  </g>
</svg>