src/images/alchi.math.division-6-3-2.svg

<svg title="alchi.math,division-6-3-2"
  viewBox="-195 -155 390 310"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  >
  <!-- FIXME this breaks when embedding into html
  the first arrow (id="arrow") is right
  the other arrows are wrong
  -->
  <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="400" height="400" transform="translate(-200 -200)" stroke="red" stroke-width="2" fill="none" />
      <rect display="none" title="inner box" x="40" y="150" width="300" height="105" transform="translate(-200 -200) translate(10)" stroke="red" stroke-width="1" fill="none" />
      <line title="ycenter" x1="-999" x2="999" y1="0" y2="0" stroke="red" stroke-width="1"/>
      <line title="xcenter" x1="0" x2="0" y1="-999" y2="999" stroke="red" stroke-width="1"/>
      <circle cx="0" cy="0" r="100" fill="none" stroke="red" />
      <circle cx="0" cy="0" r="140" fill="none" stroke="red" />
    </g>
    <path title="big arc top" d="M -130 0 m 90 0 h -90 A 130 130 0 0 1 130 0 h -90" fill="none" stroke="black" stroke-width="2"/>

    <g title="">
      <g title="division lines" stroke="black" stroke-width="2">
        <!-- inverse
        <path id="arrow" d="M 0,0 m 0,-50 l 0,-30 m 0,30 m 10,-10 l -10,10 l -10,-10" fill="none"/>
        -->
        <path id="arrow" d="M 0,0 m 0,-50 l 0,-30 m 10,10 l -10,-10 l -10,10" fill="none"/>
        <use xlink:href="#arrow" transform="rotate(60)"/>
        <use xlink:href="#arrow" transform="rotate(-60)"/>
        <use xlink:href="#arrow" transform="translate(0 130)"/>
        <!-- TODO arg segment border lines -->
        <g id="segmentborder" transform="scale(-1 -1)">
          <path d="M 0 40 V 130" transform="rotate(30)"/>
          <path d="M 0 40 V 130" transform="rotate(-30)"/>
        </g>
        <g display="none" id="arrowin">
          <path d="M 0 0 M 0 30 V 70"/>
          <path d="M 0 70 l -10 -10"/>
          <path d="M 0 70 l +10 -10"/>
        </g>
      </g>
      <g title="" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40" fill="black" class="fillfg">
        <text title="times 3" x="0" y="-10">3</text>
        <circle display="none" cx="0" cy="0" r="30" fill="none" stroke="black" stroke-width="2"/> 
        <path title="small arc top" d="M -40 0 A 40 40 0 0 1 40 0" fill="none" stroke="black" stroke-width="2"/>
        <path title="small arc bottom left" d="M -40 0 A 40 40 0 0 1 0 40" fill="none" stroke="black" stroke-width="2"/>
        <path title="small arc bottom right" d="M 40 0 A 40 40 0 0 0 0 40" fill="none" stroke="black" stroke-width="2"/>
        <text id="value" transform="translate(0 -100)">2</text>
        <text id="output" transform="translate(0 110)">6</text>
        <use xlink:href="#value" transform="translate(0 100) rotate(120) translate(0 100) rotate(-120)"/>
        <use xlink:href="#value" transform="translate(0 100) rotate(-120) translate(0 100) rotate(120)"/>
      </g>
    </g>
  </g>
</svg>