Bezier curves show up everywhere in graphics. They draw shapes in vector editors, describe the outlines of fonts, and define the timing of CSS animations. Once the idea clicks, a lot of “how does that even work” questions about vector graphics answer themselves.
The concept is small. Spend a little time on it now and the payoff is a comfortable mental model you’ll reuse constantly.
Control points
A bezier curve is defined entirely by a small set of control points.
You can have 2, 3, 4, or more of them.
A two-point curve:
Two control points make a linear curve — the straight segment between them.
A three-point curve:
Three control points make a quadratic curve. The dashed line is the control polygon; point 2 pulls the curve toward it but does not sit on it.
A four-point curve:
Four control points make a cubic curve — here an S-shape. Only points 1 and 4 lie on the curve.
Look closely at those pictures and three things jump out:
The control points usually don’t sit on the curve. That looks strange at first. It stops looking strange once you see how the curve is constructed, which is the next section.
The curve’s order is the number of control points minus one. Two points give a linear curve (a straight line), three points give a quadratic curve (a parabola arc), four points give a cubic curve.
The curve always stays inside the convex hull of its control points:
Both curves stay inside the convex hull of their control points — the shaded polygon around them.
2 points
linear
a straight line
3 points
quadratic
a parabola arc
4 points
cubic
an S-shaped curve
The order of a Bezier curve is one less than its number of control points.
That convex-hull property has a practical payoff. In graphics code you often need to know whether two curves cross. Curves are expensive to intersect directly. Their convex hulls are simple polygons — triangles, quadrilaterals — and those are cheap to test. If the hulls don’t overlap, the curves can’t overlap either, so a fast hull check rules out the easy cases before you do any hard math.
The real reason designers love Bezier curves: dragging a control point changes the curve in a way that feels obvious. Move a point up, the nearby part of the curve pulls up. There are no surprises.
Try dragging the control points below:
interactiveDrag the four control points
Live example — Drag the four control points
HTML
<canvas id="cv" width="320" height="230"></canvas>
<p>Drag the numbered points. The curve leaves point 1 aimed straight at point 2, and reaches point 4 coming straight from point 3.</p>
Notice how the curve leaves the first point heading straight toward the second, and arrives at the last point coming straight from the one before it. The curve is tangent to the line 1 → 2 at the start and tangent to the line 3 → 4 at the end. That’s the intuition you use to place points on purpose.
After a bit of practice, aiming a curve becomes second nature. Chain a few curves together and you can draw almost any shape:
Three shapes, each outlined with a handful of chained Bezier curves — a leaf, a heart, and a bottle.
De Casteljau’s algorithm
There’s a closed-form formula for Bezier curves, and it’s coming later. First, De Casteljau’s algorithm, because it produces the exact same curve while showing you how each point is born. It’s the same definition, drawn instead of written.
Start with three points.
Here’s the demo. Points 1, 2, and 3 are draggable; press “play” to watch the construction sweep across.
interactiveDe Casteljau for 3 points
Live example — De Casteljau for 3 points
HTML
<canvas id="cv" width="320" height="230"></canvas>
<div class="row"><button id="play">▶ Play</button><span id="tval">t = 0.00</span></div>
<p>Drag points 1–3. The brown segments are cut at fraction t; the blue point between them draws the red curve.</p>
const cv=document.getElementById('cv');
const ctx=cv.getContext('2d');
const btn=document.getElementById('play');
const lab=document.getElementById('tval');
const pts=[{x:35,y:200},{x:160,y:35},{x:285,y:200}];
let t=0, playing=false, drag=-1;
function L(a,b,f){return{x:a.x+(b.x-a.x)*f,y:a.y+(b.y-a.y)*f};}
function curve(f){return L(L(pts[0],pts[1],f),L(pts[1],pts[2],f),f);}
function seg(a,b,c,w){ctx.strokeStyle=c;ctx.lineWidth=w;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();}
function dot(p,c,r){ctx.fillStyle=c;ctx.beginPath();ctx.arc(p.x,p.y,r,0,7);ctx.fill();}
function draw(){
ctx.clearRect(0,0,cv.width,cv.height);
ctx.strokeStyle='#f2dcec';ctx.lineWidth=2;ctx.beginPath();
for(let i=0;i<=100;i++){const p=curve(i/100);i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y);}ctx.stroke();
const steps=Math.max(1,Math.round(t*100));
ctx.strokeStyle='#e0245e';ctx.lineWidth=3;ctx.beginPath();
for(let i=0;i<=steps;i++){const p=curve(t*i/steps);i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y);}ctx.stroke();
seg(pts[0],pts[1],'#9a6a1f',2); seg(pts[1],pts[2],'#9a6a1f',2);
const q0=L(pts[0],pts[1],t), q1=L(pts[1],pts[2],t);
seg(q0,q1,'#1c7ed6',2);
dot(q0,'#9a6a1f',5); dot(q1,'#9a6a1f',5);
dot(L(q0,q1,t),'#e0245e',6);
for(let i=0;i<3;i++){dot(pts[i],'#0f172a',7);ctx.fillStyle='#fff';ctx.font='bold 10px ui-monospace,monospace';ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText(String(i+1),pts[i].x,pts[i].y);}
lab.textContent='t = '+t.toFixed(2);
}
function frame(){if(!playing)return; t+=0.008; if(t>=1){t=1;playing=false;btn.textContent='▶ Play';} draw(); if(playing)requestAnimationFrame(frame);}
btn.addEventListener('click',()=>{if(playing){playing=false;btn.textContent='▶ Play';return;} if(t>=1)t=0; playing=true;btn.textContent='⏸ Pause';requestAnimationFrame(frame);});
function loc(e){const r=cv.getBoundingClientRect();return{x:e.clientX-r.left,y:e.clientY-r.top};}
cv.addEventListener('pointerdown',e=>{const m=loc(e);for(let i=0;i<3;i++){if(Math.hypot(m.x-pts[i].x,m.y-pts[i].y)<16){drag=i;cv.setPointerCapture(e.pointerId);break;}}});
cv.addEventListener('pointermove',e=>{if(drag<0)return;const m=loc(e);pts[drag].x=Math.max(8,Math.min(cv.width-8,m.x));pts[drag].y=Math.max(8,Math.min(cv.height-8,m.y));draw();});
cv.addEventListener('pointerup',()=>{drag=-1;});
draw();
Before the walk-through, one building block. Everything in this algorithm rests on the same tiny operation: given two points and a fraction t, find the point that sits that fraction of the way from the first to the second. That’s linear interpolation.
Linear interpolation: for t between 0 and 1, the point slides from A toward B.
Drag the slider to feel it. At t=0 the moving point sits on A, at t=1 it lands on B, and in between it slides at exactly that fraction:
const cv=document.getElementById('cv');
const ctx=cv.getContext('2d');
const s=document.getElementById('s');
const tv=document.getElementById('tv');
const out=document.getElementById('out');
const A={x:35,y:50}, B={x:285,y:50};
function draw(){
const t=+s.value/100;
ctx.clearRect(0,0,cv.width,cv.height);
ctx.strokeStyle='#9a6a1f';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(A.x,A.y);ctx.lineTo(B.x,B.y);ctx.stroke();
ctx.fillStyle='#0f172a';
for(const p of [A,B]){ctx.beginPath();ctx.arc(p.x,p.y,5,0,7);ctx.fill();}
const P={x:A.x+(B.x-A.x)*t, y:A.y+(B.y-A.y)*t};
ctx.fillStyle='#0070f3';ctx.beginPath();ctx.arc(P.x,P.y,7,0,7);ctx.fill();
ctx.fillStyle='#666';ctx.font='11px ui-monospace,monospace';ctx.textAlign='center';
ctx.fillText('A',A.x,A.y+22);ctx.fillText('B',B.x,B.y+22);
tv.textContent=t.toFixed(2);
const pct=Math.round(t*100);
out.textContent='The point is '+pct+'% of the way from A to B.';
}
s.addEventListener('input',draw);
draw();
De Casteljau for 3 points:
Place the control points 1, 2, 3.
Draw the connecting segments 1 → 2 and 2 → 3. In the demo these are brown.
Let the parameter t sweep from 0 to 1. The demo steps by 0.05, so it visits 0, 0.05, 0.1, … 0.95, 1.
For each value of t:
On each brown segment, take the point that’s a fraction t of the way along it. Two segments, so two points. At t=0 both points sit at the segment starts; at t=0.25 they’re a quarter of the way along; at t=0.5 at the midpoints; at t=1 at the ends.
Connect those two points with a new segment. In the pictures below it’s blue.
For t = 0.25
For t = 0.5
De Casteljau for 3 points, shown at t=0.25 and t=0.5. Each brown segment is cut at fraction t, the blue segment joins the two cuts, and the red point on it lands on the curve.
On that blue segment, take the point a fraction t of the way along — same t again. For t=0.25 it’s a quarter along the blue segment; for t=0.5 it’s the midpoint. That point is red.
As t runs across [0,1], every value contributes one red point. The whole set of red points is the Bezier curve — the parabola arc you see.
De Casteljau for 3 points at t=0.5. Brown segments are halved to give two points; the blue segment joining them is halved to give the red curve point.
That was three points. Four points work the same way, just with one extra round of interpolation.
The 4-point demo (drag the points):
interactiveDe Casteljau for 4 points
Live example — De Casteljau for 4 points
HTML
<canvas id="cv" width="320" height="240"></canvas>
<div class="row"><button id="play">▶ Play</button><span id="tval">t = 0.00</span></div>
<p>Brown → green → blue → red: each round of interpolation drops one segment until a single red point is left on the curve.</p>
Connect the control points: 1 → 2, 2 → 3, 3 → 4. That’s 3 brown segments.
For each t in [0,1]:
Take the point at fraction t on each brown segment. Connecting these three points gives two green segments.
Take the point at fraction t on each green segment. Connecting those gives one blue segment.
Take the point at fraction t on the blue segment. That’s the red point.
All the red points together form the curve.
4 points → 3 brown→3 points → 2 green→2 points → 1 blue→1 red point
Each round of interpolation reduces the point count by one. The last remaining point is on the curve.
The process is recursive, and it generalizes to any number of control points.
Given N control points:
Connect them into N−1 segments.
For each t in [0,1], take the point at fraction t on every segment and connect the results. That leaves N−2 segments.
Repeat step 2 until a single point remains.
Sweep t across [0,1] and those single points trace out the curve.
Play and pause the demos to watch the segments collapse — that’s the clearest way to see it.
The exact same four-point construction produces wildly different shapes depending on where the points sit. Load a preset — a gentle arch, a zig-zag, a self-crossing loop, even a curve with a sharp corner — then drag any point to see how much reach one control point has:
interactiveFour points, four very different curves
Live example — Four points, four very different curves
HTML
<div class="row">
<button data-p="arch">Arch</button>
<button data-p="zig">Zig-zag</button>
<button data-p="loop">Loop</button>
<button data-p="corner">Corner</button>
</div>
<canvas id="cv" width="320" height="240"></canvas>
<p>Pick a preset, then drag any numbered point. Every shape here is one cubic curve.</p>
If any step feels murky, run the live demos above and watch it happen. The pictures do the explaining.
Because the algorithm is recursive, you can build curves of any order — 5, 6, or more control points. In practice, high-order curves are awkward. A single curve with many points is hard to control and slower to compute, so real work uses 2- or 3-point pieces and glues several together for complex shapes.
Maths
The same curve has a direct formula, no step-by-step drawing required.
Most people never touch it — they just drag points with a mouse. But if the algebra interests you, here it is.
Label the control points Pi: the first has coordinates P1 = (x1, y1), the second P2 = (x2, y2), and so on. The curve is a function of the parameter t, which ranges over [0,1].
Two control points:
P = (1-t)P1 + tP2
Three control points:
P = (1−t)2P1 + 2(1−t)tP2 + t2P3
Four control points:
P = (1−t)3P1 + 3(1−t)2tP2 + 3(1−t)t2P3 + t3P4
These are vector equations. Swap P for x or y and you get the equation for that coordinate on its own.
So the three-point curve is the set of points (x,y) given by:
x = (1−t)2x1 + 2(1−t)tx2 + t2x3
y = (1−t)2y1 + 2(1−t)ty2 + t2y3
Plug in the coordinates of your three control points for x1, y1, x2, y2, x3, y3. Then, as t moves from 0 to 1, each t gives you one (x,y) on the curve.
Worked example. Take the control points (0,0), (0.5, 1), and (1, 0). The equations simplify:
x = (1−t)2 · 0 + 2(1−t)t · 0.5 + t2 · 1 = (1−t)t + t2 = t
So x equals t exactly, and y is the parabola −2t² + 2t. As t runs across [0,1], the (x,y) pairs trace the arc for those control points.
Slide t below to evaluate the formula directly. The readout shows the numbers the polynomial spits out, and the blue dot is that (x, y) landing on the curve:
interactiveEvaluate the 3-point formula at a chosen t
Live example — Evaluate the 3-point formula at a chosen t
const cv=document.getElementById('cv');
const ctx=cv.getContext('2d');
const s=document.getElementById('s');
const tv=document.getElementById('tv');
const out=document.getElementById('out');
const X1=0,Y1=0,X2=0.5,Y2=1,X3=1,Y3=0;
function bx(t){const m=1-t;return m*m*X1+2*m*t*X2+t*t*X3;}
function by(t){const m=1-t;return m*m*Y1+2*m*t*Y2+t*t*Y3;}
function px(x){return 40+x*240;}
function py(y){return 190-y*150;}
function draw(){
const t=+s.value/100;
ctx.clearRect(0,0,cv.width,cv.height);
ctx.strokeStyle='#eee';ctx.lineWidth=1;
ctx.beginPath();ctx.moveTo(px(0),py(0));ctx.lineTo(px(1),py(0));ctx.stroke();
ctx.strokeStyle='#c7ccd6';ctx.setLineDash([4,4]);ctx.beginPath();
ctx.moveTo(px(X1),py(Y1));ctx.lineTo(px(X2),py(Y2));ctx.lineTo(px(X3),py(Y3));ctx.stroke();ctx.setLineDash([]);
ctx.strokeStyle='#7928ca';ctx.lineWidth=3;ctx.beginPath();
for(let i=0;i<=100;i++){const f=i/100;const X=px(bx(f)),Y=py(by(f));i?ctx.lineTo(X,Y):ctx.moveTo(X,Y);}ctx.stroke();
const X=bx(t),Y=by(t);
ctx.fillStyle='#0070f3';ctx.beginPath();ctx.arc(px(X),py(Y),7,0,7);ctx.fill();
tv.textContent=t.toFixed(2);
out.textContent='x = '+X.toFixed(3)+' y = '+Y.toFixed(3);
}
s.addEventListener('input',draw);
draw();
Notice that the formula and De Casteljau’s algorithm describe the same curve. The algorithm is repeated linear interpolation; expand all that nesting algebraically and the Bernstein-weighted formula falls out. One is better for drawing and intuition, the other for a quick calculation of a single point.
Summary
A Bezier curve is defined by its control points, and we’ve now seen it from two angles:
As a drawing process — De Casteljau’s algorithm, repeated linear interpolation collapsing many points down to one.
As a formula — a polynomial in t with binomial coefficients.
What makes them pleasant to work with:
You can draw smooth lines by dragging control points, with predictable results.
Complex shapes come from stitching several small curves together.
Where you’ll meet them:
Computer graphics, 3D modeling, and vector editors. Font glyphs are stored as Bezier curves.
Web graphics — both <canvas> drawing and the SVG format. The interactive demos above are drawn with <canvas> using only the linear-interpolation math from this article. Font glyphs, icon libraries, and vector illustrations are all stored as chained Bezier curves.
CSS animation, where a Bezier curve defines the speed and path of a transition.