JSFiddle - React, Tailwind, and code Playground

by aaronamran

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

JavaScript

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});
//var r1 = 1, r2 = 1.5; // check with different radius // negative r1 not working
var r1 = 1.5, r2 = 1;
var p1 = board.create("point", [-3,1],{name:"p1"})
var p2 = board.create("point", [3,1] ,{name:"p2"})
var c1 = board.create("circle", [p1,r1],{name:"c1"})
var c2 = board.create("circle", [p2,r2],{name:"c2"})
var m = board.create('midpoint', [p1, p2], {name: 'M'});
var c3 = board.create("circle",[m, p1])
var c4 = board.create('circle', [p1, function() {
        r1 = c1.Radius();
        r2 = c2.Radius();
        if(r1 > r2) {
            return r1 - r2;
        } else {
            return r2 + r1;
        }
        }], {'strokeColor': 'yellow', strokeWidth: '1px'});
        
var i1 = board.create('intersection', [c3,c4],{name:"i1",visible:true});
var s = board.create("segment",[p2,i1])
var r = board.create("line",[p1,i1])
var i3 = board.create('intersection', [r,c1],{name:"i3",visible:true});

// rope segment
var l = board.create('parallel', [i1, p2, i3], {straightFirst: false, straightLast: false});