JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: grid; grid-template-columns: 1fr 20em">

<pre>
Let the straight line <span data-key="L-AB">AB</span> be divided into any two parts in <span data-key="P-C">C</span>;
the square of <span data-key="A-ADEB">AB</span> is equal to
the squares of <span data-key="L-AC">AC</span>, <span data-key="L-CB">CB</span>,
and to twice the rectangle contained by <span data-key="L-AC">AC</span>, <span data-key="L-CB">CB</span>.
</pre>

<svg viewBox="-15 -15 130 130">
  <g class="lines">
    <path data-key="L-AB" d="M 0,0 l 100,0"/>
    <path data-key="L-AC" d="M 0,0 l 80,0"/>
    <path data-key="L-CB" d="M 80,0 l 20,0"/>
    <path data-key="L-AH" d="M 0,0 l 0,20"/>
    <path data-key="L-HD" d="M 0,20 l 0,80"/>
    <!-- rest not spelled out -->
    <path d="M 0,20 l 100,0 M 80,0 l 0,100 M 0,100 l 100,-100 l 0,100 l -100,0"/>
  </g>
  <g class="areas">
    <path data-key="A-ADEB" d="M 0,0 l 0,100 l 100,0 l 0,-100 Z"/>
  </g>
  <g class="labels" transform="translate(-1,-1)">
    <text data-key="P-A" text-anchor="end" x="0" y="0">A</text>
    <text data-key="P-C" text-anchor="end" x="80" y="0">C</text>
    <text data-key="P-B" text-anchor="start" x="102" y="0">B</text>
    <text data-key="P-H" text-anchor="end" x="0" y="20">H</text>
    <text data-key="P-G" text-anchor="end" x="80" y="20">G</text>
    <text data-key="P-K" text-anchor="start" x="102" y="20">K</text>
    <text data-key="P-D" text-anchor="end" x="0" y="100">D</text>
    <text data-key="P-F" text-anchor="end" x="80" y="100">F</text>
    <text data-key="P-E" text-anchor="start" x="102" y="100">E</text>
  </g>
</svg>

</div>

CSS

pre, svg text { font-family: Times, serif; font-size: 110%; }
  pre { line-height: 1.5; }
  .lines path { fill: none; stroke: black; stroke-width: 0.75px; stroke-linejoin: round; stroke-linecap: round; }
  .areas path { fill: none; }
  .labels text { font-size: 10px; }
  span[data-key] { display: inline-box; padding: 2px; border-radius: 4px; }
  span[data-key^="L-"] { background: hsl(240, 75%, 95%); }
  span[data-key^="P-"] { background: hsl(30, 40%, 75%); }
  span[data-key^="A-"] { background: hsl(240, 40%, 75%); }
  span[data-key^="L-"].highlight { background: hsl(240, 50%, 80%); }
  span[data-key^="P-"].highlight { background: hsl(30, 50%, 60%); }
  span[data-key^="A-"].highlight { background: hsl(240, 50%, 60%); }
  text[data-key^="P-"].highlight { fill: red; }
  path[data-key^="L-"].highlight { stroke: hsl(240, 100%, 60%); stroke-width: 2.5px; }
  path[data-key^="A-"].highlight { fill: hsla(240, 50%, 50%, 0.5); }

JavaScript

const highlightable = document.querySelectorAll("*[data-key]");
for (let el of highlightable) {
  el.addEventListener('pointerover', () => highlight(el.dataset.key));
  el.addEventListener('pointerout', () => highlight(null));
}
function highlight(key) {
    for (let el of highlightable) {
      el.classList.toggle("highlight", el.dataset.key === key);
    }
}