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 a = board.create('slider', [[0, -0.2], [3.5, -0.2], [0, 0, 2 * Math.PI]], {name: 'angle'});
var b = board.create('slider', [[0, -0.4], [3.5, -0.4], [0, 0, 1]], {name: 'offset1'});
var c = board.create('slider', [[0, -0.6], [3.5, -0.6], [0, 1, 1]], {name: 'offset2'});

    var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
                fillOpacity: 1,
                fillColor: 'yellow',
                gradient: 'linear',
                gradientSecondColor: 'blue',
                gradientAngle: function() { return a.Value(); },
                gradientStartOffset: function() { return b.Value(); },
                gradientEndOffset: function() { return c.Value(); },
                hasInnerPoints: true
        });