# SVG Path

svg path are used to draw in any kind of shapes. for example we can draw line, curve,elliptical Arc and etc. we can use following commands.

No Paramter
1 M: Move To
2 L: Line To
3 C : Curve To
4 V : Vertical Line To
5 H: Horizontal Line To
6 S: Smooth Curve To
9 T: Smooth Quadratic Bezier curveto
10 Z: closepath
11 A: Elliptical Arc

Note that we can use both capital and small letter. small letter are work on relative path. and capital letter are work in absolute path (coordinates).

### Example 1

draw any shape but first we are need to set starting point. (M or m) are used to set current location. for example draw a simple line.

(M10 20) are set initial point.

``````<svg height="40" width="200"
<path d="M10 20 L 150 20" stroke="gray" stroke-width="5px" fill="none">
</path>
</svg>``````

### Example 2

``````  q :(width heigh end-x-coordinates end-y-coordinates)
``````
``````<svg height="240" width="200"
<path d="M60 30 q 100 50 0 100" stroke="gray" stroke-width="5px" fill="none">

</path>
<circle cx="60" cy="30" fill="navajowhite" r="5"></circle>
<circle cx="60" cy="130" fill="navajowhite" r="5"></circle>
</svg>``````

## SVG Path animation

``````<h1>SVG Path</h1>
<svg height="260" width="300"
<path stroke-dasharray="9 9" d="M10 120 l50 -50 l50 50 l 50 -50 l 50 50 l -100 100 l-100 -100z" stroke="blue" stroke-width="2px" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="200" begin="1s" dur="8s"  repeatCount="10"></animate>
</path>
</svg>
``````

Example 2

``````<svg height="260" width="300"