--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ width="260"
+ height="315">
+ <g transform="translate(41,10)">
+
+ <!-- We will draw circles at the control points -->
+ <g >
+ <!-- Start of first bezier -->
+ <circle cx="0" cy="300" r="5px" stroke="black" fill="red" fill-opacity="0.5"/>
+ <text x="-5" y="290" fill="red">A0</text>
+ <circle cx="200" cy="210" r="5px" stroke="black" fill="red" fill-opacity="0.5"/>
+ <text x="205" y="205" fill="red">A1</text>
+
+ <!-- End of first, start of second -->
+ <circle cx="90" cy="140" r="10px" stroke="black" fill="purple" fill-opacity="0.5"/>
+ <text x="105" y="145" fill="red">A2</text>
+ <text x="60" y="145" fill="blue">B0</text>
+ <circle cx="-20" cy="70" r="5px" stroke="black" fill="blue" fill-opacity="0.5"/>
+ <text x="-40" y="70" fill="blue">B1</text>
+ <circle cx="200" cy="0" r="5px" stroke="black" fill="blue" fill-opacity="0.5"/>
+ <text x="195" y="20" fill="blue">B2</text>
+ </g>
+
+ <!-- As a single spline the path data is two cubic beziers -->
+ <!--d="m 0,300 c 0,0 200,-90 90,-160 -110,-70 110,-140 110,-140"-->
+
+ <!-- First cubic bezier -->
+ <path d="m 0,300 c 0,0 200,-90 90,-160"
+ style="fill:none;stroke:#aa0000;stroke-width:2px;" />
+ <!-- Second cubic bezier -->
+ <path d="m 90,140 c -110,-70 110,-140 110,-140"
+ style="fill:none;stroke:#00aaaa;stroke-width:2px;" />
+
+ <g style="stroke-width:1px;">
+ <path stroke-dasharray="5,5"
+ d="m 0,300 200,-90 -110,-70" style="fill:none; stroke:#ff0000;"/>
+ <path stroke-dasharray="1,1"
+ d="m 90,140 -110,-70 220,-70" style="fill:none; stroke:#0000ff;"/>
+ </g>
+
+
+ </g>
+</svg>