<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>
// Define the id of your board in BOARDID
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');
}
<button onclick="toSVG(board);">Dump as SVG image</button><br>
<textarea id="svgout" cols=70 rows=20></textarea>