Bezier Curve Calculator

Design curves interactively, analyze De Casteljau construction steps, estimate lengths, and export path formulas.

Results are calculated automatically as you enter data.

Curve length -

Degree Construction t Example seed

Show De Casteljau steps Show tangent and velocity

Equations and SVG output

Disclaimer: All tools on this site are intended for educational and informational purposes only. Not professional advice. No guarantee of accuracy; verify units, formulas, assumptions, tolerances, rounding, and limitations before important use. See our Terms of Use.

Assumptions and limitations

Results are educational estimates, not professional engineering, construction, safety, scientific, legal, financial, or academic advice. No guarantee is made that outputs are accurate, complete, suitable, or error-free. Verify units, formulas, assumptions, tolerances, rounding, and limitations independently, and use qualified professional review for technical or safety-sensitive work. Use of this calculator is subject to our Terms of Use.

▼ See explanations and tips below ▼

Related Calculators

What Is a Bézier Curve?

A Bézier curve is a smooth parametric curve shaped by a set of control points. Instead of drawing the curve directly through every point, you define a small group of points that act like handles. The curve starts at the first control point, ends at the last control point, and bends according to the points in between.

The parameter $t$ tells you where you are on the curve. For a standard Bézier curve, $t = 0$ gives the first endpoint, $t = 1$ gives the last endpoint, and values between $0$ and $1$ give points between them. The value of $t$ is unitless: it is not a distance, angle, time, or percentage unless you deliberately interpret it that way.

Bézier curves are widely used in vector graphics, font outlines, animation paths, CAD-style curve design, icons, illustrations, and web graphics. They are useful because a small number of control points can describe a flexible, smooth shape.

Why Bézier Curves Matter

Bézier curves give designers, students, and developers a shared way to describe curves mathematically. A curve can be drawn, stored, animated, exported, and edited by changing its control points rather than by manually editing many tiny line segments.

They are especially useful when a shape needs to stay smooth at different sizes. A vector icon, for example, can be scaled from a small button to a large poster because its outline is described by mathematical curves rather than fixed pixels.

Bézier curves also connect visual design with calculus and algebra. The same curve can be understood as a weighted blend of points, a polynomial formula, a sequence of linear interpolations, a tangent direction, and an SVG path segment.

Key Terms to Know

Control point: A point used to define the shape of the curve. The first and last control points are endpoints; interior control points usually act as handles rather than points the curve passes through.
Parameter $t$: A unitless value from $0$ to $1$ that selects a point on the curve.
Degree: The polynomial degree of the curve. A degree $n$ Bézier curve has $n + 1$ control points.
Quadratic Bézier curve: A degree $2$ curve with three control points.
Cubic Bézier curve: A degree $3$ curve with four control points. Cubic Bézier curves are common in vector graphics and SVG paths.
Quartic and quintic Bézier curves: Degree $4$ and degree $5$ curves, using five and six control points respectively.
Control polygon: The broken line connecting the control points in order. It helps visualize how the control points pull the curve.
Bernstein basis: The set of blending weights used in the standard Bézier formula.
De Casteljau algorithm: A geometric method for evaluating a Bézier curve by repeatedly interpolating between adjacent points.
Tangent vector: The direction of the curve at a selected point, found from the derivative $B'(t)$.
Arc length: The distance along the curve. For most Bézier curves, this is usually computed numerically rather than by a simple closed-form expression.

How Bézier Curves Work

A Bézier curve is a weighted blend of its control points. For a degree $n$ curve with control points $P_0, P_1, \ldots, P_n$, the general formula is:

$$ B(t) = \sum_{i=0}^{n} \binom{n}{i}(1-t)^{n-i}t^iP_i, \quad 0 \le t \le 1 $$

Where:

$B(t)$ is the point on the curve at parameter $t$.
$n$ is the curve degree.
$P_i$ is the control point with index $i$.
$\binom{n}{i}$ is a binomial coefficient.
$(1-t)^{n-i}t^i$ controls how much influence each point has at the selected $t$ value.

For coordinates, the same formula is applied separately to $x$ and $y$:

$$ x(t) = \sum_{i=0}^{n} \binom{n}{i}(1-t)^{n-i}t^ix_i $$

$$ y(t) = \sum_{i=0}^{n} \binom{n}{i}(1-t)^{n-i}t^iy_i $$

For $0 \le t \le 1$, the blending weights are nonnegative and add up to $1$. This is why a Bézier curve is pulled by its control points in a predictable way and stays within the general region bounded by the control polygon.

De Casteljau interpolation

The De Casteljau algorithm evaluates the same curve without expanding the full polynomial. It repeatedly blends adjacent points until only one point remains.

Start with the original control points:

$$ P_i^{(0)} = P_i $$

Then interpolate between adjacent points at each level:

$$ P_i^{(r)} = (1-t)P_i^{(r-1)} + tP_{i+1}^{(r-1)} $$

After $n$ levels, the final point is the curve point:

$$ B(t) = P_0^{(n)} $$

This process is useful visually because it shows how the curve is built from repeated straight-line interpolation.

Tangent, velocity, and speed

The derivative of a Bézier curve gives its tangent direction. For a degree $n$ curve, the derivative can be written as another Bézier-style curve with one fewer degree:

$$ B'(t) = n \sum_{i=0}^{n-1} \binom{n-1}{i}(1-t)^{n-1-i}t^i(P_{i+1} - P_i) $$

The derivative vector is often called velocity in a parametric-curve context. Its magnitude is speed:

$$ \text{speed} = \left\|B'(t)\right\| = \sqrt{\left(\frac{dx}{dt}\right)^2 + \left(\frac{dy}{dt}\right)^2} $$

This speed is measured per unit of $t$. It is not automatically a real-world speed unless $t$ is being used as time.

Approximate curve length

The length of a parametric curve can be described by the arc-length integral:

$$ L = \int_0^1 \sqrt{\left(\frac{dx}{dt}\right)^2 + \left(\frac{dy}{dt}\right)^2}\,dt $$

In practical graphics tools, curve length is often estimated by sampling many points on the curve and adding the straight-line distances between consecutive samples:

$$ L \approx \sum_{k=1}^{m} \left\|B\left(\frac{k}{m}\right) - B\left(\frac{k-1}{m}\right)\right\| $$

This gives a useful numerical estimate, but it is still an approximation. More samples usually mean a closer estimate, at the cost of more computation.

Examples of Bézier Curves in Practice

Example 1: A simple quadratic curve

Suppose a quadratic Bézier curve has these control points:

$P_0 = (0, 0)$
$P_1 = (50, 100)$
$P_2 = (100, 0)$

A quadratic Bézier curve is:

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

At $t = 0.5$, the weights are:

$$ (1-0.5)^2 = 0.25 $$

$$ 2(1-0.5)(0.5) = 0.5 $$

$$ 0.5^2 = 0.25 $$

So the point is:

$$ B(0.5) = 0.25(0,0) + 0.5(50,100) + 0.25(100,0) $$

$$ B(0.5) = (50,50) $$

The curve passes halfway across the coordinate grid, but it does not pass through the interior control point $(50,100)$. That point pulls the curve upward.

Example 2: A cubic design curve

Consider a cubic Bézier curve with these control points:

$P_0 = (8, 18)$
$P_1 = (30, 88)$
$P_2 = (68, 8)$
$P_3 = (92, 78)$

A cubic Bézier curve is:

$$ B(t) = (1-t)^3P_0 + 3(1-t)^2tP_1 + 3(1-t)t^2P_2 + t^3P_3 $$

At $t = 0.5$, the cubic weights are $0.125$, $0.375$, $0.375$, and $0.125$:

$$ x(0.5) = 0.125(8) + 0.375(30) + 0.375(68) + 0.125(92) $$

$$ x(0.5) = 49.25 $$

$$ y(0.5) = 0.125(18) + 0.375(88) + 0.375(8) + 0.125(78) $$

$$ y(0.5) = 48 $$

So:

$$ B(0.5) = (49.25, 48) $$

The derivative control points for this cubic are:

$$ 3(P_1-P_0), \quad 3(P_2-P_1), \quad 3(P_3-P_2) $$

Which gives:

$$ (66, 210), \quad (114, -240), \quad (72, 210) $$

Evaluating that derivative curve at $t = 0.5$ gives approximately:

$$ B'(0.5) = (91.5, -15) $$

The speed is:

$$ \sqrt{91.5^2 + (-15)^2} \approx 92.721 $$

This means the curve is moving mostly to the right at the midpoint, with a slight downward direction in the model coordinate system.

Example 3: Endpoint and clamping behavior

For any Bézier curve:

$$ B(0) = P_0 $$

$$ B(1) = P_n $$

That means the first and last control points are guaranteed to be on the curve. Interior control points usually are not.

In this calculator, the visible $t$ control is entered on a $0$ to $100$ scale and then converted to the standard unitless range. A raw value of $50$ becomes:

$$ t = \frac{50}{100} = 0.5 $$

A raw value below $0$ is treated as $0$, and a raw value above $100$ is treated as $1$. For example, a raw value of $120$ evaluates the endpoint at $t = 1$, not a point beyond the curve.

How to Interpret the Result

Point $B(t)$ is the actual coordinate on the curve at the selected parameter value. When $t = 0$, this is the first control point. When $t = 1$, this is the last control point.

The $t$ value shows the normalized parameter after conversion to the $0$ to $1$ range. A larger $t$ moves forward through the parameterization, but not necessarily through equal distances along the curve.

Velocity is the derivative vector $B'(t)$. It points in the tangent direction of the curve at the selected point and shows the rate of change per unit of $t$.

Speed is the magnitude of the velocity vector. A higher value means the curve’s coordinates are changing more quickly with respect to $t$, but it does not mean a real physical speed unless $t$ is being used as time.

Approximate length is the estimated distance along the curve in coordinate units. It is based on sampled straight-line segments, so it should be read as a practical approximation rather than an exact analytic length.

The De Casteljau table shows the intermediate interpolation levels. The final single point in the table is the same $B(t)$ shown in the result.

SVG output depends on the curve degree. Quadratic and cubic curves correspond to native SVG Bézier path commands. Higher-degree curves, such as quartic and quintic curves, are represented as sampled line segments for SVG output.

Common Mistakes and Misconceptions

Assuming every control point lies on the curve. Only the first and last control points are guaranteed to lie on a standard Bézier curve. Interior control points usually shape the curve from a distance.

Entering $t$ as if the control used $0$ to $1$. In this calculator, the visible $t$ control uses a raw $0$ to $100$ scale. A value of $50$ means $t = 0.5$.

Treating $t$ as distance along the curve. Equal changes in $t$ do not usually produce equal distances along the curve. A point at $t = 0.5$ is not necessarily halfway along the curve’s arc length.

Reading approximate length as exact. The length result is a sampled approximation. It is useful for comparison and estimation, but it is not an exact symbolic arc length.

Expecting quartic or quintic curves to export as native high-degree SVG commands. SVG paths include native commands for quadratic and cubic Bézier segments. Higher-degree curves need approximation or conversion for SVG use.

Forgetting the coordinate range. Control point coordinates are limited to the $0$ to $100$ grid. Values outside that range are clamped.

Confusing model coordinates with screen coordinates. Mathematical model coordinates and screen drawing coordinates may use different vertical directions. A canvas often flips the $y$ direction so the visual display matches a conventional grid.

When to Use Bézier Curves

Use Bézier curves when you need to describe, edit, or export smooth shapes with a manageable number of points.

Common uses include:

Designing vector icons, logos, and illustrations.
Studying parametric curves, interpolation, and derivatives.
Building SVG paths for web graphics.
Comparing how different control points change the same curve degree.
Understanding tangent direction and curve speed at a chosen parameter value.
Estimating curve length for layout, drawing, or graphics work.
Demonstrating how De Casteljau interpolation builds a curve geometrically.

Limitations and Things to Keep in Mind

This calculator supports degrees $2$, $3$, $4$, and $5$. It does not support degree $1$ line segments, degrees above $5$, rational or weighted Bézier curves, NURBS, three-dimensional control points, or custom coordinate systems.

Coordinates are limited to a normalized $0$ to $100$ grid on both axes. This makes the tool easy to use for visualization, but it also means coordinates outside that range cannot be preserved.

The length result is approximate. The calculator estimates length by sampling the curve with a fixed sample count and summing straight-line distances between sample points. This is usually practical for visual work, but it should not be treated as an exact mathematical proof of arc length.

Curve drawing and SVG export also use sampling in some cases. Quadratic and cubic curves can be exported with native SVG Bézier commands, while quartic and quintic curves are exported as sampled line segments.

Control-coordinate fields and instantiated equations retain the active finite coordinate values. Other numerical outputs are rounded for readability. Very small values may be displayed as $0$, and values that cannot be represented as finite numbers may be shown as unavailable.

The derivative and speed are measured with respect to $t$. They do not describe physical motion unless you define a timing model that maps $t$ to time.

How to Use This Calculator

Choose a supported curve degree: quadratic, cubic, quartic, or quintic.
Edit the generated $P_0$ through $P_n$ control point coordinates, or drag the points on the canvas.
Set the raw $t$ control from $0$ to $100$. The calculator converts it to a unitless $t$ value from $0$ to $1$.
Turn on the construction view to see De Casteljau interpolation levels.
Turn on the tangent view to see the derivative direction at the selected point.
Review $B(t)$, the normalized $t$ value, velocity, speed, and approximate length.
Use snapshots to compare up to three curves.
Export the current visualization, including any enabled construction or tangent overlay, as PNG or SVG when needed.

Frequently Asked Questions

What does $t$ mean in a Bézier curve?

$t$ is the unitless parameter used to select a point on the curve. In the standard formula, $t$ ranges from $0$ to $1$. In this calculator, the visible control uses $0$ to $100$, then converts that value into the standard $0$ to $1$ range.

Does a Bézier curve pass through all of its control points?

No. A standard Bézier curve starts at $P_0$ and ends at $P_n$, but the interior control points usually act as handles. They influence the curve’s shape without necessarily lying on the curve.

What is the difference between quadratic and cubic Bézier curves?

A quadratic Bézier curve has degree $2$ and uses three control points. A cubic Bézier curve has degree $3$ and uses four control points. Cubic curves offer more shape control and are widely used in vector graphics and SVG paths.

Why is the curve length approximate?

Most Bézier curve lengths do not simplify to a convenient exact formula. A practical way to estimate length is to sample the curve at many parameter values and add the straight-line distances between neighboring samples. The result is useful, but it is still a numerical approximation.

What does the velocity result mean?

Velocity is the derivative vector $B'(t)$. It points along the tangent direction and shows how quickly the curve’s coordinates change as $t$ changes. It is not a real-world speed unless $t$ is connected to time.

Why do quartic and quintic curves export differently from quadratic and cubic curves?

SVG path data has native commands for quadratic and cubic Bézier curve segments. Quartic and quintic curves are higher-degree curves, so this calculator represents them as sampled line segments when exporting SVG.

Can this calculator work with NURBS or rational Bézier curves?

No. It works with non-rational Bézier curves on a two-dimensional $0$ to $100$ coordinate grid. Weighted control points, rational curves, NURBS, and three-dimensional curves are outside its supported scope.

Sources and References

Books

Gerald Farin. Curves and Surfaces for CAGD: A Practical Guide. 5th ed., Morgan Kaufmann, 2002. Relevant chapters and sections: linear interpolation, the De Casteljau algorithm, the Bernstein form, Bézier curves, and curve/surface design foundations. Publisher page: https://shop.elsevier.com/books/curves-and-surfaces-for-cagd/farin/978-1-55860-737-8
Les Piegl and Wayne Tiller. The NURBS Book. 2nd ed., Springer, 1997. Relevant chapters and sections: curve and surface basics, Bézier curves, Bernstein polynomials, derivatives, rational curves, and NURBS background. Springer page: https://link.springer.com/book/10.1007/978-3-642-59223-2

Online and Official Sources

Pomax. “A Primer on Bézier Curves.” Accessed June 27, 2026. Relevant sections: Bernstein polynomials, De Casteljau’s algorithm, derivatives, tangents and normals, and arc-length approximation. https://pomax.github.io/bezierinfo/
World Wide Web Consortium SVG Working Group. “Paths — SVG 2.” W3C, accessed June 27, 2026. Relevant sections: path data, cubic Bézier curve commands, quadratic Bézier curve commands, and line commands. https://www.w3.org/TR/SVG2/paths.html
MDN Web Docs. “d - SVG.” Last modified December 18, 2025; accessed June 27, 2026. Relevant sections: SVG path data and path commands. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d