<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/infinity" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Infinity" 
    allowfullscreen
></iframe>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-6, 6, 10, -8]
    });
    
    var S = board.create('slider', [
        [-5, -6],
        [5, -6],
        [0, 0.95, 1]
    ], {
        name: 'S'
    });
    var hue = board.create('slider', [
        [-5, -7],
        [5, -7],
        [0, 8, 36]
    ], {
        name: 'color'
    });
    
    var points = [],
        attr = {name: ''};
    points[0] = board.create('point', [5, 5], attr);
    points[1] = board.create('point', [-5, 5], attr);
    points[2] = board.create('point', [-5, -5], attr);
    points[3] = board.create('point', [5, -5], attr);
    
    var quadrangle = function(pt, n) {
        var col, i, arr = [];
    
        for (i = 0; i < 4; i++) {
            arr[i] = board.create('point',
                [(function(t) {
                        return function() {
                            var x = pt[t].X(),
                                x1 = pt[(t + 1) % 4].X();
                            return x + (x1 - x) * S.Value();
                        }
                    })(i),
                    (function(t) {
                        return function() {
                            var y = pt[t].Y(),
                                y1 = pt[(t + 1) % 4].Y();
                            return y + (y1 - y) * S.Value();
                        }
                    })(i)
    
                ], {
                    size: 1,
                    withLabel: false,
                    visible: false
                });
        }
    
        // Dynamic fill color
        col = () => JXG.hsv2rgb(hue.Value() * n, 0.7, 0.9);
        board.create('polygon', pt, {fillColor: col});
        
        // Recursion
        if (n > 0) {
            quadrangle(arr, --n);
        }
    }
    
    // Start recursion
    quadrangle(points, 30);
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Infinity" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution 4.0 International License.
   https://creativecommons.org/licenses/by/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-6, 6, 10, -8]
   });
   
   var S = board.create('slider', [
       [-5, -6],
       [5, -6],
       [0, 0.95, 1]
   ], {
       name: 'S'
   });
   var hue = board.create('slider', [
       [-5, -7],
       [5, -7],
       [0, 8, 36]
   ], {
       name: 'color'
   });
   
   var points = [],
       attr = {name: ''};
   points[0] = board.create('point', [5, 5], attr);
   points[1] = board.create('point', [-5, 5], attr);
   points[2] = board.create('point', [-5, -5], attr);
   points[3] = board.create('point', [5, -5], attr);
   
   var quadrangle = function(pt, n) {
       var col, i, arr = [];
   
       for (i = 0; i < 4; i++) {
           arr[i] = board.create('point',
               [(function(t) {
                       return function() {
                           var x = pt[t].X(),
                               x1 = pt[(t + 1) % 4].X();
                           return x + (x1 - x) * S.Value();
                       }
                   })(i),
                   (function(t) {
                       return function() {
                           var y = pt[t].Y(),
                               y1 = pt[(t + 1) % 4].Y();
                           return y + (y1 - y) * S.Value();
                       }
                   })(i)
   
               ], {
                   size: 1,
                   withLabel: false,
                   visible: false
               });
       }
   
       // Dynamic fill color
       col = () => JXG.hsv2rgb(hue.Value() * n, 0.7, 0.9);
       board.create('polygon', pt, {fillColor: col});
       
       // Recursion
       if (n > 0) {
           quadrangle(arr, --n);
       }
   }
   
   // Start recursion
   quadrangle(points, 30);
</jsxgraph>