Cubic Quadratic Bezier Curves

---

Key Constructs

An SVG quadratic Bezier curve can be defined with the following SVG snippet:

<g transform="translate(50,50)">     <path d="m0,0 Q100,0 200,200 T300,200 z"      fill="red"      style="stroke:blue;stroke-width:4;"/> </g>

An SVG cubic Bezier curve can be defined with the following SVG snippet:

<g transform="translate(20,20)"> <path    d="M0,0 C20,100 20,250 400,300"    fill="red"    style="stroke:blue;stroke-width:4;"/> </g>

An SVG Bezier clip path can be defined with the following SVG snippet:

 <defs>   <clipPath              clipPathUnits="userSpaceOnUse">     <path d="m0,0 Q100,0 200,200 T300,200"           style="fill:red;stroke:blue;stroke-width:4;"/>   </clipPath>  </defs>  <g transform="translate(50,50)"     clip-path="url(#clipPathDefinition)"     stroke="black" fill="none">     <!-- specify geometric elements here -->  </g>

---