src/images/alchi-compatibility-chart-gender-element.svg

<?xml version="1.0" standalone="no"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 300 300"
>

<!--
viewBox="0 0 800 800" -> 4x4
viewBox="0 0 1200 1200" -> 6x6

viewBox="0 0 300 300" -> 4x4, manually scaled to 300x300 for penpot document

width="900px" height="900px" -> dont "scale to fit" browser window

-->

<style>

:root {
  --fg: #000000;
  --bg: #ffffff;
}

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

.nofill {
  fill: none;
}

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

</style>

<!-- 300/800 = 0.375 -->
<!--
5.3333333333 * 0.375 = 2
8 * 0.375 = 3
10.6666666666 * 0.375 = 4
-->
<!-- TODO remove -->
<g transform="scale(0.375)">

<!-- debug darkmode: black background -->
<!--
<rect x="0" y="0" width="800" height="800" fill="#000"/>
-->

<!-- micro bug: pattern lines are not clipped at boundary box -->
<!-- bug: pattern lines stroke-width does NOT scale -->
<!-- but in penpot: stroke-width does not scale outsie of svg pattern https://github.com/penpot/penpot/issues/1480 -->

<g class="stroke nofill">

<!-- workaround for bug in penpot.
  stroke-width="2"
  should be:
  stroke-width="8"
  stroke-width="5.33333333333"
-->

<!-- darkmode: white shadow of black lines -->
<path stroke="#fff" stroke-width="8" d="
  M 500 500 L 300 300
  M 500 300 L 300 500

  M 0 0 L 100 100
  M 800 800 L 700 700
  M 0 800 L 100 700
  M 800 0 L 700 100

  M 400 0 L 300 100
  M 400 0 L 500 100
  M 400 800 L 300 700
  M 400 800 L 500 700

  M 0 400 L 100 300
  M 0 400 L 100 500
  M 800 400 L 700 300
  M 800 400 L 700 500
" />

<path stroke-width="5.3333333333" d="
  M 500 500 L 300 300
  M 500 300 L 300 500

  M 0 0 L 100 100
  M 800 800 L 700 700
  M 0 800 L 100 700
  M 800 0 L 700 100

  M 400 0 L 300 100
  M 400 0 L 500 100
  M 400 800 L 300 700
  M 400 800 L 500 700

  M 0 400 L 100 300
  M 0 400 L 100 500
  M 800 400 L 700 300
  M 800 400 L 700 500
" />

<!-- darkmode: white shadow of black lines -->
<g stroke="#fff" stroke-width="8">
<rect x="100" y="100" width="200" height="200"/>
<rect x="500" y="100" width="200" height="200"/>
<rect x="100" y="500" width="200" height="200"/>
<rect x="500" y="500" width="200" height="200"/>
</g>

<rect x="100" y="100" width="200" height="200"/>
<rect x="500" y="100" width="200" height="200"/>
<rect x="100" y="500" width="200" height="200"/>
<rect x="500" y="500" width="200" height="200"/>
</g>

<g id="grid_wrap" transform="translate(100, 100)">

<g id="grid" dominant-baseline="middle" text-anchor="middle" font-family="sans">


    <!-- darkmode: white shadow of black lines -->
    <g fill="none">
    <circle cx="0" cy="0" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="200" cy="0" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="400" cy="0" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="600" cy="0" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="0" cy="200" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="200" cy="200" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="400" cy="200" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="600" cy="200" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="0" cy="400" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="200" cy="400" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="400" cy="400" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="600" cy="400" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="0" cy="600" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="200" cy="600" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="400" cy="600" r="60" stroke-width="8" stroke="#fff" />
    <circle cx="600" cy="600" r="60" stroke-width="8" stroke="#fff" />
    </g>


    <circle cx="0" cy="0" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="200" cy="0" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="400" cy="0" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="600" cy="0" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="0" cy="200" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="200" cy="200" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="400" cy="200" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="600" cy="200" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="0" cy="400" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="200" cy="400" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="400" cy="400" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="600" cy="400" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="0" cy="600" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="200" cy="600" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="400" cy="600" r="60" stroke-width="2" class="stroke fillbg" />
    <circle cx="600" cy="600" r="60" stroke-width="2" class="stroke fillbg" />


    <!-- useless, we need fillbg on <circle> to hide the pattern lines
    also this would make the text smaller
    so we would need to copy all <text> to create a white shadow
    <g stroke="#fff" stroke-width="1">
    </g>
    -->
    <text x="0" y="0" font-size="60">F1</text>
    <text x="200" y="0" font-size="60">F2</text>
    <text x="400" y="0" font-size="60">F3</text>
    <text x="600" y="0" font-size="60">F4</text>
    <text x="0" y="200" font-size="60">M2</text>
    <text x="200" y="200" font-size="60">M1</text>
    <text x="400" y="200" font-size="60">M4</text>
    <text x="600" y="200" font-size="60">M3</text>
    <text x="0" y="400" font-size="60">F4</text>
    <text x="200" y="400" font-size="60">F3</text>
    <text x="400" y="400" font-size="60">F2</text>
    <text x="600" y="400" font-size="60">F1</text>
    <text x="0" y="600" font-size="60">M3</text>
    <text x="200" y="600" font-size="60">M4</text>
    <text x="400" y="600" font-size="60">M1</text>
    <text x="600" y="600" font-size="60">M2</text>

</g>

</g>

</g>

</svg>