<iframe 
    src="https://jsxgraph.org/share/iframe/approximation-of-the-circle-area" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Approximation of the circle area" 
    allowfullscreen
></iframe>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 2 / 1; width: 100%;" data-ar="2 / 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: [-1, 3, 8, -1.5],
        keepaspectratio: true,
        axis: true
    });
    
    var N = board.create('slider', [
        [0, 1.5],
        [3, 1.5],
        [1, 3, 40]
    ], {
        name: 'n',
        snapWidth: 1
    });
    
    // Circle on the right
    var circ = board.create('circle', [
        [6, 1], 1
    ], {
        strokeWidth: 1,
        strokecolor: 'black',
        strokeWidth: 2,
        fillColor: '#0055ff13'
    });
    
    // Tile the circle on the right into cake pieces
    var c1 = board.create('curve', [
        [0],
        [0]
    ], {
        strokecolor: 'red',
        strokeWidth: 1
    });
    c1.updateDataArray = function() {
        var r = 1,
            n = Math.floor(N.Value()),
            px = circ.midpoint.X(),
            py = circ.midpoint.Y(),
            x = [px],
            y = [py],
            phi = Math.PI / n,
            s = r * Math.sin(phi),
            i, j,
            d = 16,
            dt = phi / d,
            pt = Math.PI * 0.5 + phi;
    
        for (i = 0; i < n; i++) {
            for (j = -d; j <= d; j++) {
                x.push(px + r * Math.cos(pt));
                y.push(py + r * Math.sin(pt));
                pt -= dt;
            }
            x.push(px);
            y.push(py);
            pt += dt;
        }
        this.dataX = x;
        this.dataY = y;
    }
    
    // Reorder the tiles to approximate a rectangle (on the left) 
    var c2 = board.create('curve', [
        [0],
        [0]
    ], {
        strokecolor: 'red',
        strokeWidth: 2
    });
    c2.updateDataArray = function() {
        var r = 1,
            n = Math.floor(N.Value()),
            x = [0],
            y = [0],
            phi = Math.PI / n,
            h = r * Math.cos(phi),
            s = r * Math.sin(phi),
            i, j,
            px = 0,
            py = 0,
            sgn = 1,
            d = 16,
            dt = phi / d,
            pt;
    
        for (i = 0; i < n; i++) {
            for (j = -d; j <= d; j++) {
                pt = dt * j;
                x.push(px + r * Math.sin(pt));
                y.push(sgn * r * Math.cos(pt) - (sgn - 1) * h * 0.5);
            }
            px += s;
            sgn *= (-1);
        }
        x.push((n - 1) * s);
        y.push(h + (sgn - 1) * h * 0.5);
        this.dataX = x;
        this.dataY = y;
    }
    
    // Do one update to execute the updateDataArray methods
    board.update();
 </script> 

<jsxgraph width="100%" aspect-ratio="2 / 1" title="Approximation of the circle area" 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: [-1, 3, 8, -1.5],
       keepaspectratio: true,
       axis: true
   });
   
   var N = board.create('slider', [
       [0, 1.5],
       [3, 1.5],
       [1, 3, 40]
   ], {
       name: 'n',
       snapWidth: 1
   });
   
   // Circle on the right
   var circ = board.create('circle', [
       [6, 1], 1
   ], {
       strokeWidth: 1,
       strokecolor: 'black',
       strokeWidth: 2,
       fillColor: '#0055ff13'
   });
   
   // Tile the circle on the right into cake pieces
   var c1 = board.create('curve', [
       [0],
       [0]
   ], {
       strokecolor: 'red',
       strokeWidth: 1
   });
   c1.updateDataArray = function() {
       var r = 1,
           n = Math.floor(N.Value()),
           px = circ.midpoint.X(),
           py = circ.midpoint.Y(),
           x = [px],
           y = [py],
           phi = Math.PI / n,
           s = r * Math.sin(phi),
           i, j,
           d = 16,
           dt = phi / d,
           pt = Math.PI * 0.5 + phi;
   
       for (i = 0; i < n; i++) {
           for (j = -d; j <= d; j++) {
               x.push(px + r * Math.cos(pt));
               y.push(py + r * Math.sin(pt));
               pt -= dt;
           }
           x.push(px);
           y.push(py);
           pt += dt;
       }
       this.dataX = x;
       this.dataY = y;
   }
   
   // Reorder the tiles to approximate a rectangle (on the left) 
   var c2 = board.create('curve', [
       [0],
       [0]
   ], {
       strokecolor: 'red',
       strokeWidth: 2
   });
   c2.updateDataArray = function() {
       var r = 1,
           n = Math.floor(N.Value()),
           x = [0],
           y = [0],
           phi = Math.PI / n,
           h = r * Math.cos(phi),
           s = r * Math.sin(phi),
           i, j,
           px = 0,
           py = 0,
           sgn = 1,
           d = 16,
           dt = phi / d,
           pt;
   
       for (i = 0; i < n; i++) {
           for (j = -d; j <= d; j++) {
               pt = dt * j;
               x.push(px + r * Math.sin(pt));
               y.push(sgn * r * Math.cos(pt) - (sgn - 1) * h * 0.5);
           }
           px += s;
           sgn *= (-1);
       }
       x.push((n - 1) * s);
       y.push(h + (sgn - 1) * h * 0.5);
       this.dataX = x;
       this.dataY = y;
   }
   
   // Do one update to execute the updateDataArray methods
   board.update();
</jsxgraph>