Bezier curves are one of the most common tools for drawing smooth paths in computer graphics, UI motion, vector illustration, and font rendering. Even when a curve looks freehand, many systems represent it with a small set of control points and a deterministic equation. That makes Bezier curves both expressive and reliable: artists and engineers can shape motion and geometry with only a few values.

This article builds a practical understanding from the ground up. You will start with the quadratic case, then inspect how a single point on the curve is actually computed, and then move to cubic curves, which are the form most design tools expose.

Bezier Curve Fundamentals

A Bezier curve is defined by control points. The curve starts at the first control point and ends at the last control point. The points in between usually are not on the curve. Instead, they pull the curve direction and bend amount.

For a quadratic Bezier curve, there are three points:

• $P_0$: start point
• $P_1$: control point
• $P_2$: end point

The formula uses a parameter $t$ from $0$ to $1$:

$$B(t) = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2$$

You can read this as a weighted combination of points. At $t = 0$, all weight is on $P_0$, so the curve point is at the start. At $t = 1$, all weight is on $P_2$, so the curve point is at the end. Between them, weight shifts smoothly and produces a continuous path.

The key idea is that the equation guarantees smoothness by construction. You do not manually draw every intermediate point. You sample $t$ many times, evaluate $B(t)$, and connect those positions.

Quadratic Shape Exploration

Use this first visualization to build intuition for how the control point changes curve shape. Move the control point sliders and watch both the control polygon and final curve update.

As you experiment, focus on these observations:

1. The curve always begins at $P_0$ and ends at $P_2$.
2. Moving $P_1$ changes the direction near both ends because it influences tangent direction.
3. Pulling $P_1$ farther away increases curvature and can make the path arch strongly.
4. Bringing $P_1$ closer to the segment from $P_0$ to $P_2$ makes the curve flatter.

A common beginner mistake is assuming the curve should pass through $P_1$. For a quadratic curve, $P_1$ is usually an attractor, not a point on the path. This is exactly why Bezier curves are useful: you can steer shape indirectly and keep smoothness.

De Casteljau Construction

The equation view is compact, but there is another way to think about Bezier curves that is often easier to trust in code: De Casteljau’s algorithm. It computes a point on the curve using repeated linear interpolation.

For the quadratic case at a chosen $t$:

1. Interpolate between $P_0$ and $P_1$ to get $Q_0$.
2. Interpolate between $P_1$ and $P_2$ to get $Q_1$.
3. Interpolate between $Q_0$ and $Q_1$ to get $B(t)$.

That final point equals the same result as the quadratic formula. The advantage is that this interpolation procedure extends naturally to higher degree curves and is numerically stable in many implementations.

Try moving the $t$ slider from $0$ to $1$ slowly. You will see $Q_0$ and $Q_1$ move along their line segments, while $B(t)$ traces the blue curve. This gives an immediate geometric reason for why the curve stays inside the convex region formed by control points.

De Casteljau is also useful for splitting a curve into two smaller Bezier curves at any $t$. That operation is widely used in rendering pipelines, adaptive tessellation, and hit-testing.

Tangents and Motion Direction

Bezier curves are often used for motion paths, not just static drawings. In animation, the local tangent direction matters because it tells you where an object is moving at that instant.

For a quadratic curve, the derivative is:

$$B'(t) = 2(1 - t)(P_1 - P_0) + 2t(P_2 - P_1)$$

Two practical facts follow:

• At the start ($t = 0$), direction aligns with $P_1 - P_0$.
• At the end ($t = 1$), direction aligns with $P_2 - P_1$.

This is why moving the middle control point changes how the curve leaves and approaches endpoints. In UI animation tooling, this same concept appears as direction handles.

When motion must feel natural, path geometry alone is not enough. You also need a timing function for how $t$ changes over time. A path can be smooth while speed still feels abrupt if the parameter progression is not eased.

Cubic Bezier Curves

Most design and web tools prefer cubic Bezier curves. A cubic has four control points:

• $P_0$: start
• $P_1$: first handle
• $P_2$: second handle
• $P_3$: end

Its equation is:

$$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$$

Compared to quadratic, cubic adds one more handle and much more shape control. You can create S-curves, gentle transitions, or aggressive turns without chaining multiple segments too early.

Use this workbench to inspect how each handle contributes:

1. Move $P_1$ while holding $P_2$ fixed. The curve departure near the start changes the most.
2. Move $P_2$ while holding $P_1$ fixed. The curve arrival near the end changes the most.
3. Move both handles to opposite sides and notice how S-shaped paths emerge.
4. Sweep the Sample t slider and watch the highlighted point move along the curve.

This local-handle behavior is the reason vector editors expose tangent handles for anchors. Each segment can be tuned without redrawing the full path manually.

Piecewise Bezier Paths and Continuity

Real drawings are usually not a single curve. They are chains of Bezier segments. When connecting segments, continuity is the main quality concern.

Three useful continuity levels:

• $C_0$ continuity: segments meet at the same point.
• $C_1$ continuity: first derivatives match, so direction is continuous.
• $C_2$ continuity: second derivatives match, so curvature changes smoothly.

In many UI and icon workflows, $C_1$ is the practical baseline. If adjacent handles are arranged as collinear and balanced around a shared anchor, joins look visually smooth. For high-precision surfaces and simulation paths, stronger continuity constraints may matter.

Common Implementation Patterns

If you are implementing Bezier evaluation in code, these patterns are common:

1. Sample at fixed t steps for simple drawing or previews.
2. Use adaptive subdivision when high curvature needs denser sampling.
3. Use De Casteljau splitting for robust recursion and curve clipping.
4. Cache sampled polylines for fast hit tests and approximate length.

A subtle point is that equal steps in t are not equal distances in space. If constant-speed motion is required, you usually need arc-length approximation and remapping. For many UI animations this approximation is sufficient and cheaper than exact symbolic solutions.

Typical Use Cases

Bezier curves appear in many systems, often behind friendly editors:

• SVG path commands in web graphics
• Font glyph outlines in text rendering
• Camera rails and object trajectories in 3D tools
• Easing curves for CSS and animation timelines (usually 1D cubic forms)
• Shape interpolation tools in illustration software

Although the interfaces differ, the underlying concept is the same: control points define smooth trajectories with predictable endpoint behavior.

Practical Mental Checklist

When a curve does not look right, this checklist helps debug quickly:

1. Confirm endpoint positions first.
2. Inspect handle directions near each endpoint.
3. Check handle lengths for over-bending.
4. Verify segment continuity at joins.
5. Separate path shape issues from timing/easing issues.

This keeps geometry decisions and animation timing decisions from getting mixed. Most visual glitches come from one of those categories, and the fix depends on identifying which one is wrong.

Bezier curves are popular because they compress expressive shape into a small, editable parameter set. Once you understand control-point influence, De Casteljau interpolation, and continuity between segments, they become a dependable tool instead of a mysterious one.