HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>SVG Path — quadratic curve</title>

</head>

<body>

  <h1>SVG &lt;path&gt; — quadratic curve (Q)</h1>

  <svg width="240" height="160" viewBox="0 0 240 160" role="img" aria-label="Quadratic bezier curve drawn with SVG path Q command">

    <path d="M 30 120 Q 120 20 210 120"

          fill="none" stroke="#7c3aed" stroke-width="3" stroke-linecap="round" />

  </svg>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SVG Path — quadratic curve with Q (Try It)