<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/svg-filter-and-css-classes" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: SVG Filter and CSS classes" 
    allowfullscreen
></iframe>

    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
        <filter id="handwriting">
            <feTurbulence type="turbulence" baseFrequency="0.2"></feTurbulence>
            <!--
            <feTurbulence
                type="fractalNoise"
                baseFrequency="0.2"
            ></feTurbulence>
            -->
            <feDisplacementMap in="SourceGraphic" in2="" xChannelSelector="R" yChannelSelector="G" scale="3">
            </feDisplacementMap>
        </filter>
        <defs>
            <pattern id="patt1" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse">
                <line x1="0" y1="15" x2="15" y2="0" stroke="#60513e" stroke-width="2" />
            </pattern>
        </defs>
        <defs>
            <pattern id="patt2" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
                <line x1="0" y1="0" x2="8" y2="8" stroke="#60513e" stroke-width="1.5" />
            </pattern>
        </defs>
    </svg>
    <style>
        body {
            font-family: Sans-serif;
            padding-left: 10px;
        }

        .handwritten {
            filter: url(#handwriting);
        }

        .area {
            /* fill: #ffff0066; */
            fill: url(#patt1);
        }

        .area2 {
            /* fill: #ffff0066; */
            fill: url(#patt2);
        }

        .img {
            fill: url(#img1);
            stroke: black;
            stroke-width: 5;
        }

        .areahigh {
            fill: #ffff0033;
        }

        .titletxt {
            padding-left: 60px;
        }

        .subtxt {
            color: #c0c0c0;
            padding-left: 75px;
        }
    </style>

<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 ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    var board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [3, 8, 10, 1]
    });
    
    var t0 = board.create("text", [3.5, 7.5, "Peripheriewinkel"], {
        strokeColor: "#60513e",
        fontSize: 24,
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var A = board.create("point", [4.5, 4.5], {
        name: "A",
        label: {
            offset: [-30, 30],
            strokeColor: "#60513e",
            fontSize: 24,
            cssClass: "handwritten",
            highlightCssClass: "handwritten"
        },
        strokeWidth: 3,
        strokeColor: "#60513e",
        fillColor: "#60513e",
    
        face: "x",
        size: 6,
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var B = board.create("point", [8.5, 3], {
        name: "B",
        label: {
            offset: [10, -5],
            strokeColor: "#60513e",
            fontSize: 24,
            cssClass: "handwritten",
            highlightCssClass: "handwritten"
        },
        strokeWidth: 3,
        strokeColor: "#60513e",
        fillColor: "#60513e",
        face: "x",
        size: 6,
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var C = board.create("point", [8, 7], {
        name: "C",
        label: {
            offset: [-10, 30],
            strokeColor: "#60513e",
            fontSize: 24,
            cssClass: "handwritten",
            highlightCssClass: "handwritten"
        },
        strokeWidth: 3,
        strokeColor: "#60513e",
        fillColor: "#60513e",
        face: "x",
        size: 6,
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var c = board.create("circle", [A, B, C], {
        name: "",
        withLabel: false,
        strokeColor: "#60513e",
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var ad = board.create("segment", [B, C], {
        name: "a",
        withLabel: false,
        strokeColor: "#60513e",
        strokeWidth: 2,
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var bd = board.create("segment", [A, C], {
        name: "b",
        withLabel: false,
        strokeColor: "#60513e",
        strokeWidth: 2,
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var cd = board.create("segment", [A, B], {
        name: "c",
        withLabel: false,
        strokeColor: "#60513e",
        strokeWidth: 2,
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    
    var D = board.create("glider", [5, 1, c], {
        name: "D",
        label: {
            offset: [-25, -20],
            strokeColor: "#60513e",
            fontSize: 24,
            cssClass: "handwritten",
            highlightCssClass: "handwritten"
        },
        strokeWidth: 3,
        strokeColor: "#60513e",
        fillColor: "#60513e",
        face: "x",
        size: 6,
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var aD = board.create("segment", [A, D], {
        name: "",
        withLabel: false,
        strokeColor: "#60513e",
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var bD = board.create("segment", [B, D], {
        name: "",
        withLabel: false,
        strokeColor: "#60513e",
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var cD = board.create("segment", [C, D], {
        name: "",
        withLabel: false,
        strokeColor: "#60513e",
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var a1 = board.create("nonreflexangle", [D, C, B], {
        name: "",
        withLabel: false,
        strokeWidth: 2,
        strokeColor: "#60513e",
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var a2 = board.create("nonreflexangle", [D, A, B], {
        name: "",
        withLabel: false,
        strokeWidth: 2,
        strokeColor: "#60513e",
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
    var ABD = board.create("polygon", [A, B, D], {
        name: "Δ ABC",
        label: { offset: [0, 0] },
        borders: {
            visible: false,
            strokeWidth: 2,
            cssClass: "handwritten",
            highlightCssClass: "handwritten"
        },
        withLabel: false,
        fillOpacity: 0.82,
        fillColor: "#60513e",
        cssClass: "area handwritten",
        highlightCssClass: "handwritten areahigh"
    });
    var BCD = board.create("polygon", [B, C, D], {
    
        name: "Δ BCD",
        label: { offset: [0, 0] },
        borders: {
            visible: false,
            strokeWidth: 2,
            cssClass: "handwritten",
            highlightCssClass: "handwritten"
        },
        withLabel: false,
        fillOpacity: 0.82,
        fillColor: "#60513e",
        cssClass: "area2 handwritten",
        highlightCssClass: "handwritten areahigh"
    });
    var t0 = board.create("text", [4, 2, "Man veraendere Punkt D dem Kreis entlang."], {
        strokeColor: "#60513e",
        fontSize: 14,
        cssClass: "handwritten",
        highlightCssClass: "handwritten"
    });
 </script>