JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<svg>
	<path id="path" d="" stroke="#000" fill="none"/>
</svg>

		
<fieldset>
	<label id="unit-input">
		Unit: <span>100</span>
		<input type="range" value="100" min="10" max="1000" step="10"/>
	</label>

	<label id="stroke-input">
		Stroke: <span>.23606797749978958<!--3819660112501052--></span>
		<input type="range" value="0.23606797749978958" min="0.001" max=".5" step="0.001"/>
	</label>
</fieldset>

CSS

* {
	margin: 0;
	padding: 0;
}
svg {
	position: absolute;
	margin: 20px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
fieldset {
	border: 0;
	background-color: rgba(0, 0, 0, .1);
	padding: 20px;
	position: fixed;
	right: 0;
	bottom: 0;
}
input {
	display: block;
}
fieldset label {
	display: block;
}
fieldset label + label {
	margin-top: 20px;
}

JavaScript

var phi = (1 + Math.sqrt(5)) / 2;

function render (unit, stroke) {
	var precision = 2;
	var h = unit;
	var w = unit * phi;
	var halfStroke = unit * stroke / 2;
	var s = halfStroke.toFixed(precision);
	var hs = (h-halfStroke).toFixed(precision);
	var ws = (w-halfStroke).toFixed(precision);
	var wh = (w-h).toFixed(precision);
	var whs = (w-h+halfStroke).toFixed(precision);
	var d = `M${s},0 L${s},${hs} L${whs},${hs} L${ws},${s} M${wh},${s} L${ws},${s} L${ws},${h}`;
	window.console && console.log("d", d);
	path.setAttribute("d", d);
	path.setAttribute("stroke-width", unit * stroke);
} 

var inputs = {
	unit: null,
	stroke: null
};

Object.keys(inputs).forEach(function (key) {
	var callback = inputs[key];
	var label = window[key + "-input"];
	var span = label.getElementsByTagName("span")[0];
	var input = label.getElementsByTagName("input")[0];

	input.oninput = updateInput;

	function updateInput (event) {
		var value = parseFloat(input.value, 10);
		if (inputs[key] !== value) {
			inputs[key] = value;
			span.textContent = value;
			if (event) {
				update();
			}
		}
	}

	updateInput();
});

function update () {
	render(inputs.unit, inputs.stroke);
} 

update();