JSFiddle - React, Tailwind, and code Playground

by WernerSalomon

HTML

<script src="https://cindyjs.org/dist/latest/Cindy.js"></script>
<div id="CSCanvas"></div>

<script>
  CindyJS({ 
	scripts: "cs*", 
	defaultAppearance: { fontFamily: "sans-serif", lineSize: 1, pointSize: 5.0, textsize: 12.0 }, 
	angleUnit: "°", 
	geometry: [ 
		{ name: "B1", type: "Free", pos: [ 2.88, 2.56, 4.0 ], color: [ 0.0, 1.0, 0.0 ], labeled: true }, 
		{ name: "B2", type: "Free", pos: [ 4.0, 0.05161290322580645, 0.6451612903225806 ], color: [ 0.0, 1.0, 0.0 ], labeled: true }, 
		{ name: "Kreuz", type: "Free", pos: [ 4.0, 1.6, 0.6060606060606061 ], color: [ 0.0, 0.0, 0.0 ], labeled: true, size: 4.0 }, 
		{ name: "a", type: "Join", color: [ 0.0, 0.0, 1.0 ], args: [ "B1", "Kreuz" ], clip: "inci" }, 
		{ name: "C0", type: "CircleMP", color: [ 1.0, 1.0, 1.0 ], args: [ "B1", "Kreuz" ], size: 0, printname: "$C_{0}$" }, 
		{ name: "E", type: "OtherIntersectionCL", color: [ 1.0, 0.0, 0.0 ], args: [ "C0", "a", "Kreuz" ], labeled: true }, 
		{ name: "b", type: "Orthogonal", color: [ 0.0, 0.0, 1.0 ], args: [ "a", "E" ], clip: "inci" }, 
		{ name: "C1", type: "CircleMP", color: [ 0.0, 0.0, 1.0 ], args: [ "E", "B1" ], printname: "$C_{1}$" }, 
		{ name: "c", type: "Join", color: [ 0.0, 0.0, 1.0 ], args: [ "B2", "Kreuz" ], clip: "inci" }, 
		{ name: "Collection__1", type: "IntersectionConicLine", args: [ "C1", "b" ] }, 
		{ name: "M1", type: "SelectP", pos: [ -1.7458563535911595, -4.0, 0.5524861878453037 ], color: [ 1.0, 0.0, 0.0 ], args: [ "Collection__1" ], labeled: true }, 
		{ name: "d", type: "Orthogonal", color: [ 0.0, 0.0, 1.0 ], args: [ "c", "Kreuz" ], clip: "inci" }, 
		{ name: "C3", type: "CircleMP", color: [ 0.0, 0.0, 1.0 ], args: [ "Kreuz", "B2" ], printname: "$C_{3}$" }, 
		{ name: "Collection__2", type: "IntersectionConicLine", args: [ "C3", "d" ] }, 
		{ name: "M2", type: "SelectP", pos: [ 4.0, 3.0099009900990104, 0.9900990099009902 ], color: [ 1.0, 0.0, 0.0 ], args: [ "Collection__2" ], labeled: true }, 
		{ name: "Schatz", type: "Mid", color: [ 1.0,...