Skip to content
🛠️ToolsShed

Bézier Curve Calculator

Interactive cubic Bézier curve calculator with draggable control points and curve length.

Point at t: (200.0, 200.0)  |  Curve Length: ~0px

P0

x
y

P1

x
y

P2

x
y

P3

x
y

Parametric Equation

B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3

Drag control points on the canvas to adjust the curve shape

About this tool

A Bezier curve calculator is an interactive tool for visualizing and manipulating cubic Bezier curves, which are widely used in graphic design, animation, web development, and engineering. By positioning four control points on a canvas, you can shape smooth curves that form the foundation of logos, UI animations, font outlines, and complex paths in computer-aided design. Understanding how control points influence curve shape is essential for anyone working with vector graphics or motion design.

To use the tool, you start by dragging the two control points (P1 and P2) in the middle of the canvas while the endpoints (P0 and P3) anchor the curve's start and end. As you move the control points, the curve updates in real-time, and the tool displays the curve length, helping you estimate distances for animation timing or path planning. You can also input numerical coordinates directly if you need precise control, making it useful for both visual design and technical calculations.

This tool is invaluable for graphic designers fine-tuning easing functions for animations, developers implementing SVG paths or CSS animation timing, and engineers modeling smooth transitions in simulations. The real-time length calculation is particularly helpful when planning stroke animations or estimating travel distance in motion graphics. While limited to cubic Bezier curves (not quadratic or higher-order), this covers the vast majority of design and animation use cases.

Frequently Asked Questions

Code Implementation

def cubic_bezier(p0, p1, p2, p3, t):
    """Evaluate a cubic Bézier curve at parameter t (0..1)."""
    u = 1 - t
    return (
        u**3 * p0[0] + 3*u**2*t * p1[0] + 3*u*t**2 * p2[0] + t**3 * p3[0],
        u**3 * p0[1] + 3*u**2*t * p1[1] + 3*u*t**2 * p2[1] + t**3 * p3[1],
    )

def bezier_length(p0, p1, p2, p3, steps=200):
    """Approximate curve length via numerical integration."""
    length = 0.0
    prev = cubic_bezier(p0, p1, p2, p3, 0)
    for i in range(1, steps + 1):
        curr = cubic_bezier(p0, p1, p2, p3, i / steps)
        dx, dy = curr[0] - prev[0], curr[1] - prev[1]
        length += (dx**2 + dy**2) ** 0.5
        prev = curr
    return length

def bezier_tangent(p0, p1, p2, p3, t):
    """Calculate the tangent direction at parameter t."""
    u = 1 - t
    dx = 3*u**2*(p1[0]-p0[0]) + 6*u*t*(p2[0]-p1[0]) + 3*t**2*(p3[0]-p2[0])
    dy = 3*u**2*(p1[1]-p0[1]) + 6*u*t*(p2[1]-p1[1]) + 3*t**2*(p3[1]-p2[1])
    return (dx, dy)

# Example: S-curve
p0, p1, p2, p3 = (0, 0), (0.5, 1), (0.5, -1), (1, 0)
length = bezier_length(p0, p1, p2, p3)
print(f"Curve length: {length:.4f}")
print(f"Point at t=0.5: {cubic_bezier(p0, p1, p2, p3, 0.5)}")

# Sample 10 points
for i in range(11):
    t = i / 10
    pt = cubic_bezier(p0, p1, p2, p3, t)
    print(f"t={t:.1f}: ({pt[0]:.3f}, {pt[1]:.3f})")

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.