This SVG example demonstrates how to create a simple cubic path with visible control points.

SimpleCubicPathWithControlPoints.svg

<svg width="420px" height="220px" xmlns="http://www.w3.org/2000/svg">
  <!-- First cubic with specified control points -->
  <g transform="translate(10,10)">
    <path d="M0,100 C100,0 300,200 400,100"
      fill="none" stroke="black" stroke-width="1"/>
    <path d="M0,100 L100,0" fill="none"
      stroke="lightgray" stroke-width="1"/>
    <path d="M400,100 L300,200" fill="none"
      stroke="lightgray" stroke-width="1"/>
    <!-- Control Points -->
    <g fill="#666666" >
      <circle cx="0" cy="100" r="4"/>
      <circle cx="100" cy="0" r="4"/>
      <circle cx="300" cy="200" r="4"/>
      <circle cx="400" cy="100" r="4"/>
    </g>
  </g>
</svg>

Output