This SVG example illustrates how to create paths that approximate a circle. The first path, shown in red, is a linear path approximation. The second path, shown in brown, is a quadratic approximation. The third path, show in a blue, is a cubic approximation composed of two cubic sections. The fourth path, shown in lime green, is a cubic approximation composed of four sections. Finally, a circle is drawn in black on top of the lime green path to demonstrate that it is a perfect approximation.

CircleApproximations.svg

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 2 2">
  <!-- A linear path approximation -->
  <path d="M-.9,0 L0,-.9 L.9,0 L0,.9 Z"
    fill="none" stroke="red" stroke-width=".002" />
  <!-- Draws a crude circle with four quardratic interpolations -->
  <path d="M-.9,0 Q-.9,-.9 0,-.9 T.9,0 T0,.9 T-.9,0"
    fill="none" stroke="brown" stroke-width=".002"/>
  <!-- Draws an approximate circle with two cubic interpolations -->
  <path d="M-.9,0 C-.9,-1.2 .9,-1.2 .9,0 S-.9,1.2 -.9,0"  
      fill="none" stroke="blue" stroke-width=".002"/>
  <!-- Draws a perfect circle with four cubic interpolations -->
  <!-- Implied control point at .5,-.9 -->
  <!-- Implied control point at .9,.5 -->
  <!-- Implied control point at -.5,.9 -->
  <path d="M-.9,0 C-.9,-.5 -.5,-.9 0,-.9 
          S.9,-.5 .9,0
          S.5,.9 0,.9
          S-.9,.5 -.9,0"
      fill="none" stroke="lime" stroke-width=".01"/>
  <!-- Draws a circle for comparison -->
  <circle cx="0" cy="0" r=".9" fill="none" stroke="black" stroke-width=".001"/>
</svg>

Output