SVG - Curve (Line)

About

Geometry - Curve (Parabola|Parabolic|Arche) in SVG.

A curved line is just designed with a path element.

Articles Related

Syntax

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

bezier curve,
an “arc” or part of a circle.

C - S - Q : Bezier Curves

SVG - Bezier Curve

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;
}

Rendered by WebCode

D3

https://github.com/d3/d3-shape/blob/master/README.md#curves