JSFiddle - React, Tailwind, and code Playground

by spgoo

HTML

<script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" />
<script type="text/javascript"   src ='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
<div class="jsgbox" id="box1" style="witdh:400px;height:400px">

JavaScript

const board = JXG.JSXGraph.initBoard("box1", {
		boundingbox: [-35, 30, 35, -30],
		axis:true,	grid:false,
showNavigation:false,showZoom:false,showFullscreen: false,fullscreen: {symbol: 'fs'},showCopyright:false	
});
board.renderer.container.style.backgroundColor='#E5E4E2'; //valeur par défaut si 'none' 


const trace=function(tab1,tab2) { 
	let p1=board.create("point",tab1,{name:"p1",fixed:true,visible:true,size:1});
	let p2=board.create("point",tab2,{name:"p2",fixed:true,visible:true,size:1});
  let t2 = board.create('transform', [Math.PI/30, p1], {type: 'rotate'});
	let t2_ = board.create('transform', [-Math.PI/30, p1], {type: 'rotate'});
	let pnew = board.create('point', [p2, [t2]], {name:'',color: 'blue',visible:false,fixed:true});
	let pnew2 = board.create('point', [p2, [t2_]], {name:'',color: 'blue',visible:false,fixed:true});
board.create("polygon",[p1,pnew,pnew2],{ fillOpacity:1,strokeColor:'blue',fillColor:'red',name:'',visible:true,fixed:true,strokeWidth:1});
  
  
  
}
trace([-30,-25],[-15,-20]);
trace([-30,-5],[-15,-10]);
trace([-5,-5],[-10,-15]);
trace([-5,-25],[-10,-15]);  

trace([30,25],[15,20]);
trace([30,5],[15,10]);
trace([5,5],[10,15]);
trace([5,25],[10,15]);