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