Skip to main content

đŸ—“ïž 09082025 1751

SVG BASIC CURVE COMMANDS

Why Curves Matter​

  • Curves make SVG paths powerful—allowing shapes beyond straight lines, like smooth hills, waves, or organic shapes.
  • SVG paths use BĂ©zier curves, just like in CSS animations.

Quadratic BĂ©zier Curve — Q / q​

  • Syntax:
Q x1 y1 x y
  • (x1, y1) = single control point
  • (x, y) = end point
  • Smooth curve with one control point.
  • Use relative form q dx1 dy1 dx dy for coordinates relative to current position.
  • Best for gentle, simple curves.

Cubic BĂ©zier Curve — C / c​

  • Syntax:
C x1 y1 x2 y2 x y
  • (x1, y1) = first control point
  • (x2, y2) = second control point
  • (x, y) = end point
  • More flexible and “curvy” than quadratic curves because of two control points.
  • Can create complex shapes like pill shapes, loops, or flowing designs.

Quadratic vs. Cubic — When to Use​

  • Rule of thumb:
    • Start with quadratic (Q) for simpler curves.
    • If it’s not curvy enough or needs more control → switch to cubic (C).
  • Anything possible with Q can be done with C, but not vice versa.

Arcs — A / a**​

  • Draw curves as part of a circle or ellipse.
  • Useful for shapes and morphing animations.
  • Will be discussed in detail later.

✅ Key Takeaway:

  • Q = one control point → simpler, gentler curves.

  • C = two control points → more flexibility, more “flow”.

  • Relative forms (q, c) are often easier for adjusting shapes.

  • Think of cubic as an extended version of quadratic.

References​