JSFiddle - React, Tailwind, and code Playground

by Jolu Mij

HTML

<body>
  <div>14th pentagon (Stein, 1985)</div>
  <svg height="400" width="450" id="tiling" style="border:1px solid gray"></svg>
  <br/>
  <svg height="250" width="450" id="design" style="border:1px solid gray"></svg>
  <div>
&alpha; &equiv; &ang;EAB. &beta; &equiv; &ang;ABC. &gamma; &equiv; &ang;BCD. &delta; &equiv; &ang;CDE. &epsilon; &equiv; &ang;DEA.
</div>
<div>
<div>Condition 1) &alpha; = 90&deg;.</div>
<div>Condition 2) 2&beta; + &gamma; = 360&deg;.</div>
<div>Condition 3) &gamma; + &epsilon; = 180&deg;.</div>
</div>

<dl>
<dt><b>Blue right triangles</b>. From condition 2, BJ is perpendicular to AB:</dt>
<dd>
<div>Smallest angle = &gamma;/2</div>
<div>Hypotenuse: BC = CJ = DJ = 1</div>
<div>Small cathetus: BL = JL = DK = cos (&gamma;/2)</d>
<div>Large cathetus: CL = JK = sin (&gamma;/2)</d>
</dd>
<dt>
<b>Red right triangles</b>.
From condition 3, &ang;DEF = &gamma;, so:
</dt>
<dd>
<div>&ang;EGH = &ang;GDI = &gamma;</div>
<div>Hypotenuse: DG = GE = 1</div>
<div>Small cathetus: DI = GH = cos(&gamma;)</div>
<div>Large cathetus: IG = EH = sin(&gamma;)</div>
</dd>
<dt>Y distances:</dt>
<dd>
 <div>DI + GH + 1 = BL + LJ + KD</div>

 <div>2*cos(&gamma;) + 1 = 3*sin(&gamma;/2)</div>
 <div>2*(1 - 2*sin<sup>2</sup>(&gamma;/2)) + 1 = 3*sin(&gamma;/2)</div>
 <div>4sin<sup>2</sup>(&gamma;/2) + 3sin(&gamma;/2) - 3 = 0</div>
 <div style="padding:5px; margin:3px;">
  <span style="border:1px solid gray; padding:3px;">
 BL = LJ = KD = sin(&gamma;/2) = (&radic;(57) - 3) / 8
  </span></div>
 <div style="padding:5px; margin:3px;">
  <span style="border:1px solid gray; padding:3px;">
 DI = GH = cos(&gamma;) = 1 - 2*sin(&gamma;/2) = (3*&radic;(57) - 17) / 16
  </span>
 </div>
<dd>

</dl>

  </div>

JavaScript

var s = Math.sqrt(57);
var y1 = (s - 3) / 8; // sin (C/2)
var y2 = (3*s - 17) / 16; // cos C
var x1 = Math.sqrt(6*s - 2) / 8; // cos (C/2)
var x2 = Math.sqrt(102*s - 546) / 16; // sin(C)

var A1 = [          0,      0];
var B1 = [2*x2 +   x1,      0];
var C1 = [2*x2 + 2*x1,    -y1];
var D1 = [2*x2       ,  -3*y1];
var E1 = [          0,     -1];

var A2 = [A1[0], -A1[1]];
var B2 = [B1[0], -B1[1]];
var C2 = [C1[0], -C1[1]];
var D2 = [D1[0], -D1[1]];
var E2 = [E1[0], -E1[1]];

var X1 = 4*x2 + 3*x1;
var A3 = [X1 - A1[0], -y1 + A1[1]];
var B3 = [X1 - B1[0], -y1 + B1[1]];
var C3 = [X1 - C1[0], -y1 + C1[1]];
var D3 = [X1 - D1[0], -y1 + D1[1]];
var E3 = [X1 - E1[0], -y1 + E1[1]];

var A4 = [A3[0], -y1 + A2[1]];
var B4 = [B3[0], -y1 + B2[1]];
var C4 = [C3[0], -y1 + C2[1]];
var D4 = [D3[0], -y1 + D2[1]];
var E4 = [E3[0], -y1 + E2[1]];

var A5 = [D4[0],      D4[1]];
var B5 = [C2[0],      C2[1]];
var C5 = [D2[0],      D2[1]];
var D5 = [D2[0],      D2[1] + 2];
var E5 = [D5[0] + x2, D5[1] - y2];

var A6 = [E5[0],       E5[1]];
var B6 = [A5[0],       A5[1]];
var C6 = [B6[0] + x2,  B6[1] - y2];
var D6 = [C6[0],       C6[1] + 2];
var E6 = [D6[0] -2*x1, D6[1] + 2*y1];

var svgNS = "http://www.w3.org/2000/svg";

function polygon(d, color, pos, x, y, t) {
	var p = document.createElementNS(svgNS, "polygon");
	p.setAttributeNS(null, "style", "fill:" + color + ";stroke:black;stroke-width:1");
	var _ = [];
	for (var i=0; i < pos.length; i++) {
		var point = pos[i];
		var X = t.cx + (x + point[0])*t.scale;
		var Y = t.cy + (y + point[1])*t.scale;
		_.push(X + "," + Y)
	}
	p.setAttributeNS(null, "points", _.join(" "));
    d.appendChild(p);
}

function polyline(d, color, width, pos, x, y, t) {
    var p = document.createElementNS(svgNS, "polyline");
    p.setAttributeNS(null, "style", "fill:none;stroke:" + color + ";stroke-width:" + width);
    p.setAttributeNS(null, "stroke-linejoin", "round");
	var _ = [];
	for (var i=0; i < pos.length; i++) {
		var point = pos[i];
		var X = t.cx + (x...