SVG - Curve (Line)

A curved line is just designed with a path element.

Syntax

There are three different path commands that you can use to create smooth curves.

• an “arc” or part of a circle.

Example

Pure Svg

``````<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">

<path d="M 10 10 C 20 20, 40 20, 50 10" />
<line x1=10 y1=10 x2=20 y2=20 />
<line x1=50 y1=10 x2=40 y2=20 />

<path d="M 70 10 C 70 20, 120 20, 120 10" />
<line x1=70 y1=10 x2=70 y2=20 />
<line x1=120 y1=10 x2=120 y2=20 />

<path d="M 130 10 C 120 20, 180 20, 170 10" />
<line x1=130 y1=10 x2=120 y2=20 />
<line x1=170 y1=10 x2=180 y2=20 />

<path d="M 10 60 C 20 80, 40 80, 50 60" />
<line x1=10 y1=60 x2=20 y2=80 />
<line x1=50 y1=60 x2=40 y2=80 />

<path d="M 70 60 C 70 80, 110 80, 110 60" />
<line x1=70 y1=60 x2=70 y2=80 />
<line x1=110 y1=60 x2=110 y2=80 />

<path d="M 130 60 C 120 80, 180 80, 170 60" />
<line x1=130 y1=60 x2=120 y2=80 />
<line x1=170 y1=60 x2=180 y2=80 />

<path d="M 10 110 C 20 140, 40 140, 50 110" />
<line x1=10 y1=110 x2=20 y2=140 />
<line x1=50 y1=110 x2=40 y2=140 />

<path d="M 70 110 C 70 140, 110 140, 110 110" />
<line x1=70 y1=110 x2=70 y2=140 />
<line x1=110 y1=110 x2=110 y2=140 />

<path d="M 130 110 C 120 140, 180 140, 170 110" />
<line x1=130 y1=110 x2=120 y2=140 />
<line x1=170 y1=110 x2=180 y2=140 />

</svg>```
```
``````path {
stroke:black;
fill:transparent;
}
line {
stroke:red;
}```
```