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

  <p>
    <label for="c1">c1:</label>
    <input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;" 
        min="0" max="100" value="60" 
        oninput="c1 = this.value*0.01; board.update();" 
    /><br />
    <label for="f1">f1:</label>
    <input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;" 
        min="1" max="100" value="7"
        oninput="f1 = this.value; board.update();" 
    /><br />
    <label for="c2">c2:</label>
    <input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;" 
        min="0" max="100" value="0"
        oninput="c2 = this.value*0.01; 
                  board.updateQuality = board.BOARD_QUALITY_HIGH;
                  board.update();" 
    /><br />
    <label for="f2">f2:</label>
    <input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;" 
        min="1" max="100" value="17"
        oninput="f2 = this.value; board.update();" 
    />
  </p>


<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>


<button onclick="toSVG(board);">Dump as SVG image</button><br>
<textarea id="svgout" cols=70 rows=20></textarea>

<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: [-2.5, 2.5, 2.5, -2.5],
        keepaspectratio: true
    });
    var c1 = 0.6;
    var c2 = 0.0;
    var f1 = 7;
    var f2 = 17;
    
    var cb = board.create('curve', [
        (t) => Math.cos(t) + c1 * Math.cos(f1 * t) + c2 * Math.cos(f2 * t),
        (t) => Math.sin(t) + c1 * Math.sin(f1 * t) + c2 * Math.sin(f2 * t),
        0, 2.02 * Math.PI
    ], {strokeWidth:4, strokeColor: 'blue', shadow: true});
    
    var cw = board.create('curve', [
        (t) => Math.cos(t) + c1 * Math.cos(f1 * t) + c2 * Math.cos(f2 * t),
        (t) => Math.sin(t) + c1 * Math.sin(f1 * t) + c2 * Math.sin(f2 * t),
        0, 2.02 * Math.PI
    ], {strokeWidth: 2, strokeColor: 'white'});
    
    // Export to SVG
    var toSVG = function(board) {
        var svgRoot = board.renderer.svgRoot, 
            svg;
        
        svgRoot.setAttribute("xmlns", "http://www.w3.org/2000/svg");
        svgRoot.setAttribute("width", board.canvasWidth);
        svgRoot.setAttribute("height", board.canvasHeight);
        svg = new XMLSerializer().serializeToString(svgRoot);
        document.getElementById('svgout').value = svg.replace(/>/g, '>\n');
    }
    
 </script>