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="width:500px;height:500px">

JavaScript

const board = JXG.JSXGraph.initBoard("box1", {
		boundingbox: [-30, 30, 30, -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, nb) { 
	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/70, p2], {type: 'rotate'});
	let t2_ = board.create('transform', [-Math.PI/70, p2], {type: 'rotate'});
	let pnew = board.create('point', [p1, [t2]], {visible:false,fixed:true});
	let pnew2 = board.create('point', [p1, [t2_]], {visible:false,fixed:true});
	let l1=board.create("segment",[p1,p2],{opacity:1,strokeColor:'blue',name:'',visible:true,fixed:true,strokeWidth:1});
	let pl1 = board.create('parallel', [p1,p2, pnew],
  {strokeColor:'red',straightFirst: false, straightLast: false});
	let pl2 = board.create('parallel', [p1,p2, pnew2],
  {strokeColor:'blue',straightFirst: false, straightLast: false});
  
}
trace([-29,-25],[-15,-20],3);
trace([-29,-5],[-15,-10],3);
trace([-5,-5],[-10,-15],4);
trace([-5,-25],[-10,-15],4);  

trace([29,25],[15,20],3);
trace([29,5],[15,10],3);
trace([5,5],[10,15],4);
trace([5,25],[10,15],4);