Math triangle

 from Red Blob Games
13 May 2021

{status; this page isn’t public}

Like a painting student learning by copying masterpieces, I wanted to recreate Freya Holmer’s math triangle widget[1], originally posted on twitter[2]. (I made this based on the tweets, before the final version was published.) Click on the edges and angles to toggle them.

$$a$$$$b$$$$c$$$$A$$$$B$$$$C$$

I knew how to use KaTeX \(\text{for typesetting}\), but I didn’t know how to make it work inside an SVG diagram. I learned that <foreignobject> lets you put HTML inside SVG, and you can use KaTeX inside that HTML!. This seems like it’ll come in handy for my projects. I need to investigate how font sizes work though, since that HTML is going to be in document scale and not the SVG’s viewbox scale, right, I think.

Minor notes about polish:

  1. I made another line underneath the visible ones. It’s black, and also accepts clicks. This is especially useful on mobile where you don’t have precise positioning. I needed to place this underneath the text, whereas the visible lines are above the text.
  2. I disabled pointer events on the text boxes by using pointer-events: none.
  3. I changed the cursor while hovering over the clickable areas by using cursor: pointer.
  4. I disabled user-selection of the text by using user-select: none on the foreignobject. This was because clicking fast can lead to selecting that text.
  5. I also tried to stop the double click behavior by setting an ondblclick handler but I am not sure whether this had the intended effect.
  6. I drew the angles by drawing a <circle> with a clip region set to the triangle area.

Source code: index.org (html + javascript).