<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div
var board = JXG.JSXGraph.initBoard('jsxgbox', { originX: 250, originY: 250, unitX: 50, unitY: 50 }); var g1 = board.create('point', [1, -1], { style: 6 }); var g2 = board.create('point', [2.5, -2], { style: 6 }); var g3 = board.create('point', [1, -3], { style: 5 }); var g4 = board.create('point', [2.5, -4], { style: 5 }); var g5 = board.create('point', [-4, 1], { style: 5, name: '' }); var c1 = board.create('curve', [ function (t) { return (g1.X() - g2.X()) * Math.cos(t) + g3.X() * Math.cos(t * (g1.X() - g2.X()) / g2.X()); }, function (t) { return (g1.X() - g2.X()) * Math.sin(t) + g3.X() * Math.sin(t * (g1.X() - g2.X()) / g2.X()); }, 0, function () { return Math.PI * 7 * Math.abs(g4.X()); }], { strokeWidth: function () { return g5.Y() * 3; }, strokeOpacity: function () { return g5.Y() * 0.6; } }); var t = board.create('text', [function () { return g5.X() + 0.2; }, function () { return g5.Y() + 0.25; }, 'X(B)=<value>X(B)</value>'], { digits: 3, fontSize: function () { return Math.abs(g5.Y()) * 10 + 1; } })