Path Curve Label

A curved path, endpoint markers, and text label make an SVG trend line readable without bitmap images.

Program

The path element can draw curves with compact commands. Labels and markers turn the path into an understandable chart element.

path_curve_label.html

<svg viewBox="0 0 160 90" width="320" height="180" role="img" aria-label="Rising trend">
  <path d="M20 70 C55 20, 95 80, 140 24" fill="none" stroke="#2563eb" stroke-width="6"/>
  <circle cx="20" cy="70" r="5" fill="#1e293b"/>
  <circle cx="140" cy="24" r="5" fill="#1e293b"/>
  <text x="92" y="20" font-size="12" fill="#0f172a">growth</text>
</svg>

path path draws complex shapes from commands such as M, L, C, and Z.

text SVG text places readable labels in the same coordinate space as shapes.