Mathematical Curves You Can Create with SVG Paths

Scalable Vector Graphics (SVG) paths provide a robust set of drawing commands capable of rendering precise mathematical geometries directly in the browser. This article covers the fundamental mathematical curve types natively supported by the SVG <path> specification—including linear functions, quadratic Béziers, cubic Béziers, and elliptical arcs—as well as advanced mathematical curves that can be synthesized by chaining these base commands together.

Natively Supported Mathematical Curves

The SVG path specification directly supports three primary families of parametric and geometric curves using dedicated path data commands:

1. Linear Curves (First-Degree Polynomials)

Linear curves represent straight line segments between two points in a two-dimensional Cartesian plane. While not curved in the traditional sense, they represent degree-1 polynomial curves defined by the linear equation \(y = mx + b\) or parametric form \(P(t) = (1 - t)P_0 + tP_1\).

• SVG Commands: L (Line To), H (Horizontal Line To), V (Vertical Line To), and Z (Close Path).

2. Quadratic Bézier Curves (Second-Degree Polynomials)

A quadratic Bézier curve is a second-order parametric polynomial curve determined by three points: a start point, a single control point, and an end point. The control point dictates the direction and curvature of the curve without the path actually passing through it. Mathematically, it is defined as:

\[B(t) = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2 \quad \text{for } t \in [0, 1]\]

Geometrically, every quadratic Bézier curve is an exact segment of a parabola.

• SVG Commands:
  • Q (x1, y1, x, y): Draws a standard quadratic curve using the explicit control point (x1, y1).
  • T (x, y): Smooth quadratic curve that automatically reflects the previous control point across the current start point, ensuring \(C^1\) continuity (tangent continuity).

3. Cubic Bézier Curves (Third-Degree Polynomials)

Cubic Bézier curves are third-order parametric curves defined by four points: a start point, two independent control points, and an end point. These curves allow for inflection points, meaning the curve can change its concavity (e.g., forming S-curves or loops). Mathematically, it is defined as:

\[B(t) = (1 - t)^3 P_0 + 3(1 - t)^2 t P_1 + 3(1 - t)t^2 P_2 + t^3 P_3 \quad \text{for } t \in [0, 1]\]

• SVG Commands:
  • C (x1, y1, x2, y2, x, y): Draws a cubic curve using two explicit control points (x1, y1) and (x2, y2).
  • S (x2, y2, x, y): Smooth cubic curve that automatically computes the first control point as a reflection of the preceding control point, maintaining \(C^1\) smoothness.

4. Elliptical and Circular Arcs (Conic Sections)

SVG includes native support for arcs, which are segments of an ellipse or circle. An elliptical arc is defined by the semi-major axis, semi-minor axis, an x-axis rotation angle, and boolean flags determining whether to traverse the large arc and the sweep direction.

• SVG Command: A (rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)

Derived Mathematical Curves Constructible with SVG Paths

Curves that do not have dedicated single-letter commands can still be constructed or closely approximated by combining native SVG path primitives:

Composite Splines (B-Splines, Catmull-Rom, Hermite)

By chaining multiple C (cubic) or Q (quadratic) commands together, you can construct piecewise polynomial splines. Non-uniform rational B-splines (NURBS), Hermite splines, and Catmull-Rom splines can be analytically converted into equivalent cubic Bézier segments with matching control points and knots.

Conic Sections (Parabolas, Hyperbolas, Ellipses)

• Parabolas: Constructed exactly using single Quadratic Bézier (Q) commands.
• Ellipses and Circles: Constructed exactly using two or more Elliptical Arc (A) commands, or approximated within less than 0.03% error using four Cubic Bézier (C) segments.
• Hyperbolas: Constructed piecewise by mapping hyperbolic parametric functions to cubic Bézier approximations.

Transcendental and Trigonometric Curves

Transcendental curves cannot be represented as single polynomial equations, but they are constructed in SVG by dividing the curve domain into segments and fitting cubic Bézier segments:

• Sinusoidal Waves: Sine and cosine curves are approximated via piecewise cubic Béziers, where each half-period is fitted using control points at \(4(\sqrt{2} - 1)/3\) times the amplitude.
• Spirals (Archimedean, Logarithmic, Euler/Clothoids): Generated by calculating curvature and tangent vectors at discrete intervals and generating a continuous sequence of connecting cubic or arc segments.
• Lissajous and Epitrochoid Curves: Complex parametric harmonic curves rendered by sampling parametric coordinates \((x(t), y(t))\) and linking them with linear segments (L) or smooth Bézier approximations (S/T).