SVG HTML

A Simple Quadratic Path with Control Points

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

QuadraticSimplePathControlPoints.svg

<svg width="250" height="225" xmlns="http://www.w3.org/2000/svg">
  <!-- Quadratic Curve -->
  <path d="M25,25 Q125,200 225,25"
    fill="none" stroke="black" stroke-width="1"/>
  <!-- Containing Polygonal Lines -->
  <path d="M25,25 L125,200 L225,25" fill="none"
      stroke="lightgray" stroke-width="1"/>
  <!-- Control Points -->
  <g fill="#666666" >
    <circle cx="25" cy="25" r="4"/>
    <circle cx="125" cy="200" r="4"/>
    <circle cx="225" cy="25" r="4"/>
  </g>
</svg>
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.