Scalable Vector Graphics (SVG) in HTML:
See also here for a brief tutorial.

SVG Circle

$$tan45^\circ =tan(\frac{\pi}{4})=1 $$ $$arctan(1)= 45^\circ =\frac{\pi}{4} $$ $$4\times arctan(1)= \pi $$
SVG code:


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> 

<svg width="210" height="210"> 

  <circle fill="none" cx="100" cy="100" r="100" stroke="red" stroke-width="2"/> 

  <line x1="100" y1="100" x2="100" y2="0" stroke="blue" stroke-width="1" stroke-dasharray="2,5"/> 

  <line x1="100" y1="100" x2="200" y2="100" style="stroke:blue;stroke-width:1"/> 

  <line x1="100" y1="100" x2="170.71" y2="29.2893" style="stroke:black;stroke-width:1"/> 

  <line x1="170.71" y1="100" x2="170.71" y2="29.2893" stroke="black" stroke-width="1" stroke-dasharray="2,5"/> 

  <text x="130" y="60"> r </text> 

  <text x="120" y="95"> 45&deg; </text> 

</svg>

$$tan(\frac{\pi}{4})=1,\ 4\times arctan(1)=\pi$$

SVG Bar

SVG code:


  <svg> 

   <rect width="50" height="200" style="fill: blue;" /> 

  </svg>