贝塞尔曲线（Bézier Curve）是一种参数化曲线，由法国工程师皮埃尔·贝塞尔在1962年提出，广泛应用于计算机图形学、动画设计、字体轮廓和UI动效中。它通过控制点来定义曲线的形状——起点和终点确定曲线的两端，而中间的控制点像"磁铁"一样吸引曲线向它们弯曲。贝塞尔曲线最大的优势是直观性和数学精确性，用极少的数据就能描述复杂的平滑曲线。

二次贝塞尔曲线（Quadratic Bézier）有3个控制点：起点P₀、控制点P₁、终点P₂。曲线从P₀出发，向P₁弯曲，最终到达P₂。它只能形成一个"拱形"，形状相对简单。

三次贝塞尔曲线（Cubic Bézier）有4个控制点：起点P₀、两个控制点P₁和P₂、终点P₃。由于多了一个控制点，三次贝塞尔能产生更复杂的曲线形状，包括S型、波浪型甚至自交曲线。CSS中的cubic-bezier()函数和SVG路径中的C命令都使用三次贝塞尔曲线。它是现代设计中应用最广泛的贝塞尔曲线类型。

CSS中的cubic-bezier(x1, y1, x2, y2)定义了一个三次贝塞尔缓动函数，用于transition和animation属性。它的起点固定为(0,0)，终点固定为(1,1)，你只需要指定两个控制点的坐标。参数含义：
• x1, y1：第一个控制点（影响动画前半段）
• x2, y2：第二个控制点（影响动画后半段）
• 所有值通常在0到1之间（x值严格限制在[0,1]，y值可略微超出）

常见预设：ease = cubic-bezier(0.25, 0.1, 0.25, 1.0)；ease-in = cubic-bezier(0.42, 0, 1, 1)；ease-out = cubic-bezier(0, 0, 0.58, 1)；ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)。

在SVG的<path>元素中，贝塞尔曲线通过以下命令定义：
• Q命令（二次贝塞尔）：Q x1 y1, x y — 从当前点经过控制点(x1,y1)到终点(x,y)
• C命令（三次贝塞尔）：C x1 y1, x2 y2, x y — 使用两个控制点
• S命令（平滑三次贝塞尔）：自动镜像前一个控制点
• T命令（平滑二次贝塞尔）：自动镜像前一个控制点

例如：<path d="M 0 50 C 25 0, 75 100, 100 50" /> 绘制一条S型三次贝塞尔曲线。使用本工具可以可视化编辑并直接导出SVG路径代码。

贝塞尔曲线在现代UI/UX设计中无处不在：
• 缓动函数：CSS transition/animation中的timing-function，决定动画的速度曲线
• 运动路径：使用贝塞尔曲线定义元素在屏幕上的移动轨迹
• 图形设计：Figma、Illustrator等设计工具中的钢笔工具本质上就是编辑贝塞尔曲线
• 字体渲染：TrueType和OpenType字体使用二次贝塞尔曲线定义字形轮廓
• 数据可视化：平滑折线图、面积图等常用贝塞尔插值
• 游戏开发：相机路径、粒子运动轨迹、AI移动路线等