# Math triangle

from Red Blob Games
13 May 2021

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.

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.

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.