Bezier Curve Calculator
Visualize and calculate points on Bezier curves using De Casteljau's algorithm.
A Bezier curve is a parametric curve defined by a set of control points. The curve starts at the first control point, ends at the last, and is "pulled" toward the intermediate points without necessarily passing through them.
De Casteljau's Algorithm: This elegant recursive algorithm computes points on a Bezier curve. For a parameter t between 0 and 1:
- Take each pair of adjacent control points
- Find the point that divides each segment in ratio t:(1-t)
- These new points form a new, smaller set of control points
- Repeat until only one point remains - this is the point on the curve
Mathematical Formula: For n+1 control points P₀, P₁, ..., Pₙ, the Bezier curve is:
where C(n,i) is the binomial coefficient "n choose i". The terms C(n,i)·(1-t)ⁿ⁻ⁱ·tⁱ are called Bernstein basis polynomials.
Curve Types:
- Linear (2 points): A straight line segment
- Quadratic (3 points): Used in TrueType fonts
- Cubic (4 points): Used in PostScript, SVG paths, and CSS animations
- Higher degrees: More control but computationally expensive
Properties: Bezier curves always lie within the convex hull of their control points, start tangent to the line P₀P₁, and end tangent to the line Pₙ₋₁Pₙ.
Applications: Bezier curves are fundamental in computer graphics, CAD systems, font design, animation paths, and vector graphics (SVG, PDF). They provide smooth, controllable curves with intuitive editing through control points.
What is a Bezier curve and how is it used?
A Bezier curve is a parametric curve defined by control points that determine its shape. It's widely used in computer graphics, CAD software, font design (TrueType and OpenType fonts), vector graphics (SVG, PDF), animation paths, and CSS animations. The curve starts at the first control point, ends at the last, and is influenced by intermediate points.
What is De Casteljau's algorithm?
De Casteljau's algorithm is an elegant recursive method to compute points on a Bezier curve. For a parameter t between 0 and 1, it repeatedly finds points that divide line segments between adjacent control points in the ratio t:(1-t), creating successively smaller sets of points until one final point on the curve remains. It's numerically stable and forms the basis for curve subdivision.
What's the difference between quadratic, cubic, and higher-degree Bezier curves?
Quadratic Bezier curves have 3 control points and are used in TrueType fonts. Cubic Bezier curves have 4 control points and are the most common, used in PostScript, SVG paths, and CSS animations because they offer good flexibility with manageable complexity. Higher-degree curves (5+ control points) provide more control but are computationally expensive and harder to work with.
How do I choose control points for a smooth Bezier curve?
For smooth curves, place control points so that the first and last pairs are tangent to the desired curve direction at the endpoints. The intermediate control points 'pull' the curve toward them without the curve necessarily passing through them. For cubic curves, keeping the control handles symmetric creates smooth, balanced curves commonly seen in design software.