<iframe 
    src="http://jsxgraph.org/share/iframe/hypotrochoid" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Hypotrochoid" 
    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: [-5, 5, 5, -5]
    });
    
    // x-ccords of control points g1...g3 determine shape of curve
    var g1 = board.create('point', [1, -1], {size: 4});
    var g2 = board.create('point', [2.5, -2], {size: 4});
    var g3 = board.create('point', [1, -3], {size: 3});
    
    // Length of curve
    var g4 = board.create('point', [2.5, -4], {size: 3});
    
    // y-coord determines strokeWidth, opacity and font size
    var g5 = board.create('point', [-4, 1], {size: 3, name: ''});
    
    // Curve
    var c1 = board.create('curve', [
        (t) => (g1.X() - g2.X()) * Math.cos(t) + g3.X() * Math.cos(t * (g1.X() - g2.X()) / g2.X()),
        (t) => (g1.X() - g2.X()) * Math.sin(t) + g3.X() * Math.sin(t * (g1.X() - g2.X()) / g2.X()),
        0,
        () => Math.PI * 7 * Math.abs(g4.X())
    ], {
        strokeWidth: () => g5.Y() * 3,
        strokeOpacity: () => g5.Y() * 0.6
    });
    
    // Text
    var t = board.create('text', [() => g5.X() + 0.2,
        () => g5.Y() + 0.25, 'X(B)=<value>X(B)</value>'
    ], {
        digits: 3,
        fontSize: () => Math.abs(g5.Y()) * 10 + 1
    });
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Hypotrochoid" 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: [-5, 5, 5, -5]
   });
   
   // x-ccords of control points g1...g3 determine shape of curve
   var g1 = board.create('point', [1, -1], {size: 4});
   var g2 = board.create('point', [2.5, -2], {size: 4});
   var g3 = board.create('point', [1, -3], {size: 3});
   
   // Length of curve
   var g4 = board.create('point', [2.5, -4], {size: 3});
   
   // y-coord determines strokeWidth, opacity and font size
   var g5 = board.create('point', [-4, 1], {size: 3, name: ''});
   
   // Curve
   var c1 = board.create('curve', [
       (t) => (g1.X() - g2.X()) * Math.cos(t) + g3.X() * Math.cos(t * (g1.X() - g2.X()) / g2.X()),
       (t) => (g1.X() - g2.X()) * Math.sin(t) + g3.X() * Math.sin(t * (g1.X() - g2.X()) / g2.X()),
       0,
       () => Math.PI * 7 * Math.abs(g4.X())
   ], {
       strokeWidth: () => g5.Y() * 3,
       strokeOpacity: () => g5.Y() * 0.6
   });
   
   // Text
   var t = board.create('text', [() => g5.X() + 0.2,
       () => g5.Y() + 0.25, 'X(B)=<value>X(B)</value>'
   ], {
       digits: 3,
       fontSize: () => Math.abs(g5.Y()) * 10 + 1
   });
</jsxgraph>