JSXGraph test

Template for JSXGraph

HTML

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

JavaScript

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-1.5, 4.5, 5, -1.5], axis:true
});

var cx = board.create('slider', [[0, -.2], [3.5, -.2], [0, 0.5, 1]], {name: 'cx, cy'});
var fx = board.create('slider', [[0, -.4], [3.5, -.4], [0, 0.5, 1]], {name: 'fx, fy'});
var o1 = board.create('slider', [[0, -.6], [3.5, -.6], [0, 0.0, 1]], {name: 'offset1'});
var o2 = board.create('slider', [[0, -.8], [3.5, -.8], [0, 1, 1]], {name: 'offset2'});
var r = board.create('slider', [[0, -1], [3.5, -1], [0, 0.5, 1]], {name: 'r'});
var fr = board.create('slider', [[0, -1.2], [3.5, -1.2], [0, 0, 1]], {name: 'fr'});

    var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
                fillOpacity: 1,
                fillColor: 'yellow',
                gradient: 'radial',
                gradientSecondColor: 'blue',
                gradientCX: function() { return cx.Value(); },
                gradientCY: function() { return cx.Value(); },
                gradientR: function() { return r.Value(); },
                gradientFX: function() { return fx.Value(); },
                gradientFY: function() { return fx.Value(); },
                gradientFR: function() { return fr.Value(); },
                gradientStartOffset: function() { return o1.Value(); },
                gradientEndOffset: function() { return o2.Value(); },
                hasInnerPoints: true
    });