how SVG curveTo ( C ) works?

Question

I need your help , I am confused a little.

My question is how SVG curveTo works, really I can't understand.

look for this example

<svg height="400" width="400">
 <path d="M 200 90 C 200  90 0 0 90  300 " stroke="black" fill="none" stroke-width="3"/>
</svg>

this code draws this shape

but really I can't understand how that done , I can't understand how the curve identified and what control points are and what 0 0 coordinate represents in my example.

Answer 1

You are drawing a Cubic Bezier curve (with two control points). But one of the control points has the same coordinates as the starting point.

1. Move (M) to (200,90).

2. Draw a Cubic (C) Bezier Curve

   a. starting at current position (200,90)
   b. first control point at (200,90) - same as starting point
   c. second control point at (0,0)
   d. ending at (90,300)

Answer 2

Bezier curves are a bit tricky to get the sense of. Perhaps the section at http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C might help, and maybe the section before that on quadratic Beziers. As the earlier poster pointed out, having your start point and the control point coincident makes your case a bit odder, still, perhaps.