JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 60 20">
  <!--
  <rect width="80" height="60" fill="#eee"/>
  <text id="item" font-size="5px" x="2" y="8">External SVG Object</text>
  -->
  <script type="text/javascript"><![CDATA[
'use strict';


Math.TAU = 2 * Math.PI;

function internal_angle(n) {
	return (n - 2) * Math.TAU / (n * 2);
};

function set_view_box(svg_element, radius, margin) {
	let high_margin = radius * (1 + margin);
	let low_margin = -high_margin;
	let width = high_margin - low_margin;
	svg.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox', `${low_margin} ${low_margin} ${width} ${width}`);
};


function rotate(point, angle) {
	let [x, y] = point;
	return [
		x * Math.cos(angle) - y * Math.sin(angle),
		x * Math.sin(angle) + y * Math.cos(angle),
	];
}


let radiuses = [1.0];
let polygon_paths = [];
for (let nagon = 3; nagon < 100; nagon++) {
	let radius = radiuses[radiuses.length - 1];
	let internal_angle = (nagon - 2) * Math.TAU / (2 * nagon);
	let moo = Math.sin(internal_angle / 2);
	radius = radius / moo;
	radiuses.push(radius);
	let polygon_path = [];
	for (let i = 0; i < nagon; i++) {
		let angle = Math.TAU * i / nagon;
		let point = rotate([0, -radius], angle);
		polygon_path.push(point);
	};
	polygon_paths.push(polygon_path);
};


let svg = document.getElementsByTagName('svg')[0];
set_view_box(svg, radiuses[radiuses.length - 1], 0.1);
radiuses.forEach((r, i, radiuses)=>{
	let element = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
	element.setAttributeNS(null, 'cx', 0);
	element.setAttributeNS(null, 'cy', 0);
	element.setAttributeNS(null, 'r', r);
	element.setAttributeNS(null, 'fill', 'none');
	element.setAttributeNS(null, 'stroke', 'black');
	element.setAttributeNS(null, 'stroke-width', 0.1 / (i + 1));
	svg.appendChild(element);
});

polygon_paths.forEach((polygon_path, i, polygon_paths)=>{
	let element = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
	let points =...