src/images/alchi.math.addition-1-2-3.svg

<svg title="addition"
  viewBox="0 0 390 190"
  xmlns="http://www.w3.org/2000/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 display="none" title="debug">
      <rect title="viewbox" x="0" y="0" width="390" height="190" stroke="red" stroke-width="1" fill="none" />
      <rect title="inner box" width="310" height="110" transform="translate(-155 -55) translate(195 95)" stroke="red" stroke-width="1" fill="none" />
      <line title="ycenter" x1="0" x2="390" y1="95" y2="95" stroke="red" stroke-width="1"/>
      <line title="xcenter" x1="195" x2="195" y1="0" y2="190" stroke="red" stroke-width="1"/>
    </g>
    <g title="">
      <g title="" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40" fill="black" class="fillfg">
        <!-- TODO remove transform -->
        <g transform="translate(-360, -225) translate(5)">

          <g display="" title="top boxes" transform="translate(0 -5)">
            <g title="text">
              <text title="10" x="450" y="300">1</text>
              <text title="2" x="600" y="300">2</text>
            </g>
            <g title="boxes and lines" stroke="black" stroke-width="2" fill="none">
              <g display="" title="top box split">
                <rect display="none" title="top right box" x="600" y="270" width="100" height="50"/>
                <path title="top right arrow" d="M 500 270 h 175 l 25 25 l -25 25 h -175 v -50" />
                <rect display="none" title="top left box" x="400" y="270" width="200" height="50"/>
                <path title="top left arrow" d="M 400 270 h 75 l 25 25 l -25 25 h -75 v -50" />
              </g>
              <g display="none" title="plus sign to split top box">
                <rect title="top box full" x="400" y="270" width="300" height="50"/>
                <g display="none" title="plus lines full">
                  <path d="M 575 295 L 625 295" title="plus line 2 full" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);stroke-width: 2px;"/>
                  <path d="M 600 270 L 600 320" title="plus line 2 full" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);stroke-width: 2px;"/>
                </g>
                <g title="plus lines minus 10">
                  <path d="M 585 295 L 615 295" title="plus line 2" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);stroke-width: 2px;"/>
                  <path d="M 600 280 L 600 310" title="plus line 2 full" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);stroke-width: 2px;"/>
                </g>
                </g>
            </g>
          </g>
          <g title="bottom box" transform="translate(0 5)">
            <text title="12" x="550" y="350">3</text>
            <rect display="none" title="bottom box" x="400" y="320" width="300" height="50" stroke="black" stroke-width="2" fill="none"/>
            <path d="M 400 320 h 275 l 25 25 l -25 25 h -275 v -50" fill="none"  stroke="black" stroke-width="2" />
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>