SVG HTML

A Quadratic Chain Path with Control Points

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

QuadraticChainPathControlPoints.svg

<svg width="650" height="450" xmlns="http://www.w3.org/2000/svg">
  <!-- Quadratic Curve Chain -->
  <path d="M25,225 Q125,425 225,225 T425,225 T625,225"
    fill="none" stroke="black" stroke-width="1"/>
  <!-- Containing Polygonal Lines -->
  <path d="M25,225 L125,425 L225,225
    L325,25 L425,225 L525,425 L625,225" fill="none"
      stroke="lightgray" stroke-width="1"/>
  <!-- Control Points -->
  <g fill="#666666" >
    <circle cx="25" cy="225" r="4"/>
    <circle cx="125" cy="425" r="4"/>
    <circle cx="225" cy="225" r="4"/>
    <circle cx="325" cy="25" r="4"/>
    <circle cx="425" cy="225" r="4"/>
    <circle cx="525" cy="425" r="4"/>
    <circle cx="625" cy="225" r="4"/>
  </g>
</svg>
 

Output

 
 

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