Skip to content
SVG

Paths

Draw arbitrary curves via the d attribute.

#path#curve#d

Code

svg
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120">
  <!-- M move, L line, H/V horiz/vert, C cubic, Q quad, A arc, Z close -->
  <path d="M10 10 L100 10 L100 100 Z" fill="none" stroke="black"/>
  <path d="M120 10 Q170 60 220 10" fill="none" stroke="red"/>
  <path d="M10 60 C40 10 90 110 120 60" fill="none" stroke="blue"/>
  <path d="M150 100 A40 40 0 1 1 230 100" fill="none" stroke="green"/>
</svg>