SVG - Curve (Line)
About
Articles Related
Syntax
There are three different path commands that you can use to create smooth curves.
- an “arc” or part of a circle.
C - S - Q : Bezier Curves
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;
}