Bezier Curve Calculator

Calculate and model Bezier curves used in design and computer graphics.

Inputs

About Bezier Curves

Bezier curves are parametric curves used in computer graphics to model smooth curves. They are defined by a set of control points.

Results

Embed This Calculator

laqayt logo

Share this tool with your audience. 100% free and fully responsive.

How Bezier Curve Calculator Works

B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2 (Quadratic)

Calculate points along Bezier curves using control points. The parameter t ranges from 0 (start) to 1 (end) and determines position along the curve.

  1. 1

    Step 1

    Select curve type (Quadratic or Cubic)

  2. 2

    Step 2

    Enter control point coordinates

  3. 3

    Step 3

    Set the parameter t value (0 to 1)

  4. 4

    Step 4

    View the calculated point on the curve

Use Cases

Vector graphics design (Adobe Illustrator, Figma)

Animation path creation

Font design and typography

CSS transitions and easing functions

Tips

  • 1

    t=0 gives the starting point P0 and t=1 gives the ending point

  • 2

    A quadratic curve needs 3 points and a cubic needs 4 points

  • 3

    Control points define the curve shape but the curve does not necessarily pass through them

  • 4

    Bezier curves are the foundation of SVG files and TrueType fonts

  • 5

    Multiple Bezier curves can be connected to create complex shapes

Common Mistakes

  • Entering a t value outside the 0-1 range

  • Confusing control points with pass-through points

  • Not understanding that the curve does not pass through middle control points

  • Using a quadratic curve for shapes that need more flexibility

Frequently Asked Questions

What is the difference between quadratic and cubic Bezier curves?
Quadratic uses 3 control points (degree 2) and gives a simple curve. Cubic uses 4 points (degree 3) and provides more control over the curve shape.
What does the parameter t represent?
t is a parameter ranging from 0 to 1. At t=0 you are at the start point, at t=1 at the end point. Values in between give points along the curve.
Does the curve pass through the control points?
It only passes through the start and end points (P0 and P2/P3). Middle control points define the direction of the curve but it does not pass through them.
Where are Bezier curves used?
In design software (Illustrator, Figma), digital fonts (TrueType, OpenType), vector image files (SVG), and animations (CSS transitions).
How do I create a smooth Bezier curve connected to another curve?
To ensure smooth continuity, the last control point of the first curve and the first control point of the second must be collinear with the connection point.

Support Our Project

Our site is completely free, you can support us to help us stay online and develop new tools.

Buy me a coffee