<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>
/* 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 = 'your_div_id'; // Insert your id here! 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" });
With the help of CSS classes, SVG filters can be applied to JSXGraph elements.
<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>
// Define the id of your board in BOARDID 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" });
This example is licensed under a
Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.