fix(markdown): Updated Example to v3

markdown/dev/guides/prerequisites/bezier-curves/en.md

@@ -17,8 +17,23 @@ In FreeSewing, we use so-called cubic Bézier curves which have:
 - A second control point that’s linked to the end point
 - An end point
 
-<Example settings_complete="0" part="path_curve">
-An example of a Bézier curve drawn by the Path.curve() method
+<Example caption="An example of a Bézier curve drawn by the Path.curve() method" settings="margin: 20">
+```js
+({ Point, points, Path, paths, part }) => {
+
+  points.from = new Point(10, 20)
+  points.cp1 = new Point(40, 0)
+  points.cp2 = new Point(60, 40)
+  points.to = new Point(90, 20)
+  
+  paths.line = new Path()
+    .move(points.from)
+    .curve(points.cp1, points.cp2, points.to)
+    .setText("Path.curve()", "text-sm center fill-note")
+
+  return part
+}
+```
 </Example>
 
 Bézier curves and their _handles_ or _control points_ are surprisingly intuitive.

markdown/dev/guides/prerequisites/coordinate-system/en.md

@@ -7,8 +7,25 @@ The coordinate system in FreeSewing -- and in SVG -- follows the same rules as t
 You start at the top-left, and as you go to the right, the X-coordinate will increase.
 As you go down the Y-coordinate will increase.
 
-<Example part="docs_coords">
-The SVG coordinate system
+<Example caption="The coordinate system in an SVG document">
+```mjs
+({ Point, points, paths, Path, part }) => {
+  points.origin = new Point(10, 10)
+  points.x = new Point(100, 10)
+  points.y = new Point(10, 50)
+  points.textX = new Point(85, 20).addText('X', 'text-lg')
+  points.textY = new Point(12, 43).addText('Y', 'text-lg')
+  paths.coords = new Path()
+    .move(points.y)
+    .line(points.origin)
+    .line(points.x)
+    .addClass('mark')
+    .attr('marker-start', 'url(#dimensionFrom)')
+    .attr('marker-end', 'url(#dimensionTo)')
+
+  return part
+}
+```
 </Example>
 
 The image above illustrates both the X-axis and Y-axis.