Lots going on here - keep your eyes open. All of the action is done using the animate element. This element is used to perform action on:
When most people hear 'animation' they think of something moving. In SVG it can also mean 'change' or 'modify'. Don't worry, we move stuff around in some other pages.
For example, the initial black circle, the red equilateral triangle, and blue square don't 'move' anywhere, but they are modified over time all using the animate element only.
In order to draw the green circle around the triangle (circumscribe the triangle), we first have to locate the center of the circle. The center of this circle (circumcenter) is also the center of gravity of the triangle.
That's found by drawing the perpendicular bisector from each side. The intersection of these lines (pink lines) is the center of the circumscribed circle.
In this particular case (equilateral triangle), it is also the center of an inscribed circle (the disappearing black circle) - a circle inside a triangle touching all 3 sides at 1 point (tangent). This is the intersection of the angle bisectors of each side.
The radius of this circle is determined by:
r = a / √3
If our triangle has sides of length 300 (a) our radius has to be 173.2.
However, if we center the triangle in the 500 x 500 grid, the circumscribed circle will not be in the right position.
We have to move the triangle up. By how much I leave as an exercise to the viewer - it will be good for you.
As usual, view the source code to see how things are done.