Кривая Безье: что это, формула и как рисовать её пером

Кривая Безье — это плавная линия, которую задают несколько точек: две крайние лежат на самой кривой, а промежуточные (контрольные) тянут её к себе, как магниты. Чем дальше контрольная точка, тем сильнее изгиб. На этих кривых построена вся векторная графика: инструмент «Перо» в редакторах, контуры шрифтов, пути в SVG и плавность анимаций в CSS.

Ниже разберём, как кривая устроена математически, чем квадратичная отличается от кубической, как рисовать её пером в Adobe Illustrator, Figma или Photopea и как записать её кодом в SVG, Canvas и CSS. Все примеры можно повторить в бесплатных онлайн-редакторах без регистрации.

CheckroiПодборка курсов по Adobe Illustrator228 курсов • 40 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Откуда взялись кривые Безье

Название кривые получили по фамилии французского инженера Пьера Безье. В 1960-х он работал в Renault и описывал ими обводы кузовов, чтобы станок с программным управлением мог повторить форму без лекал. Почти одновременно, в 1959 году, тот же способ построения нашёл математик Поль де Кастельжо в Citroën, но его работу долго не публиковали за пределами компании, и в историю вошла фамилия Безье.

Математическая база ещё старше: многочлены Бернштейна, на которых стоит формула, описаны в 1912 году. Эти даты и роли приводит статья о кривой Безье в английской Википедии.

• Автопром: обводы кузовов, которые нужно передать станку числами.
• Графика: контуры в Illustrator, Figma, Inkscape, CorelDRAW и путях формата SVG.
• Шрифты: каждая буква на экране собрана из таких кривых.
• Анимация: скорость движения элемента во времени, от CSS до 3D-пакетов: так, например, задают плавность движения, когда делают анимацию в Blender.

Как устроена кривая: опорные и контрольные точки

У любой кривой Безье есть два вида точек. Опорные (якорные) стоят в начале и в конце сегмента, кривая через них проходит. Контрольные работают как направляющие: кривая к ним тянется, но обычно их не касается.

Отрезок от опорной точки до контрольной в редакторах называют ручкой или усом. Направление ручки задаёт, куда кривая выходит из точки, а длина показывает, как долго она идёт в этом направлении, прежде чем повернуть к следующей точке.

Квадратичной кривой хватает, чтобы нарисовать дугу, но волну из одного сегмента она не построит: у неё одна контрольная точка, и изгиб получается только в одну сторону. Кубическая с двумя контрольными точками умеет делать S-образный изгиб, поэтому редакторы рисуют именно её.

На кадре ниже квадратичная кривая в SVG-редакторе: две опорные точки по краям и одна контрольная сверху. Тонкие линии от краёв к вершине и есть ручки, а сама кривая проходит ниже контрольной точки.

Кубическая кривая из того же редактора уже изгибается дважды. Справа видно продолжение: второй сегмент записан короткой командой S, и его первая контрольная точка зеркально отражает последнюю контрольную точку первого сегмента. Поэтому на стыке нет излома.

Формула кривой Безье

Кривая описывается параметром t, который бежит от 0 до 1. При t = 0 мы стоим в начальной опорной точке, при t = 1 в конечной, а промежуточные значения дают точки самой кривой. Формулы для координат x и y одинаковые, их считают отдельно.

Квадратичная кривая с точками P0, P1, P2:

B(t) = (1 − t)² · P0 + 2(1 − t)t · P1 + t² · P2

Кубическая кривая с точками P0, P1, P2, P3:

B(t) = (1 − t)³ · P0 + 3(1 − t)²t · P1 + 3(1 − t)t² · P2 + t³ · P3

Коэффициенты перед точками и есть многочлены Бернштейна. В любой момент они в сумме дают единицу, поэтому кривая всегда остаётся внутри многоугольника, натянутого на её точки. Этим же свойством пользуются 3D-редакторы, когда вы моделируете в Blender по кривым. Отсюда практическое правило: если хотите, чтобы кривая не вылезала за рамку, не выводите за рамку и контрольные точки.

Алгоритм де Кастельжо: то же самое без формулы

Точку кривой можно найти и геометрически, одними делениями отрезков. Это и есть алгоритм де Кастельжо:

1. Соедините соседние точки отрезками: P0–P1, P1–P2, P2–P3.
2. На каждом отрезке возьмите точку, которая делит его в пропорции t. При t = 0,5 это середина.
3. Соедините новые точки и повторите деление. Из трёх точек получится две, из двух одна.
4. Последняя оставшаяся точка лежит на кривой. Перебирая t от 0 до 1, вы проходите всю кривую.

Вот этот алгоритм на Python. Точки взяли те же, что в кадре с кубической кривой выше:

def lerp(a, b, t):
    return (a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t)

def bezier_point(points, t):
    while len(points) > 1:
        points = [lerp(points[i], points[i + 1], t) for i in range(len(points) - 1)]
    return points[0]

P = [(10, 80), (40, 10), (65, 10), (95, 80)]
for t in (0, 0.25, 0.5, 0.75, 1):
    print(t, bezier_point(P, t))

Вывод интерпретатора:

0 (10, 80)
0.25 (31.71875, 40.625)
0.5 (52.5, 27.5)
0.75 (73.28125, 40.625)
1 (95, 80)

Проверим середину по формуле. При t = 0,5 коэффициенты равны 0,125, 0,375, 0,375 и 0,125, и для x выходит 0,125·10 + 0,375·40 + 0,375·65 + 0,125·95 = 52,5. Число совпало с выводом программы. Заметьте, что вершина кривой оказалась на высоте 27,5, хотя контрольные точки стоят на 10: кривая к ним тянется, но не доходит.

Если хочется покрутить точки руками и посмотреть, как меняется кривая, загляните в бесплатную интерактивную книгу «Основы кривых Безье», у неё есть русский перевод: там почти каждый рисунок можно двигать мышью.

Как рисовать кривые Безье пером

В редакторах кривую Безье рисуют инструментом «Перо» (Pen). В Figma и в бесплатном браузерном Photopea он включается клавишей P, в Illustrator, Photoshop и Inkscape логика та же. Главное, что надо запомнить: щелчок ставит угловую точку, а щелчок с протягиванием ставит гладкую точку с ручками. Попробуйте в Photopea: две точки с протягиванием дадут плавную дугу, а простой щелчок после них поставит излом.

1. Выберите «Перо» и щёлкните там, где начинается линия. Если сразу потянуть мышь, не отпуская кнопку, из точки вырастут ручки.
2. Поставьте вторую точку и тяните мышь в ту сторону, куда кривая должна идти дальше. Сегмент между точками изогнётся.
3. Продолжайте так же. Чтобы сделать острый угол, щёлкните без протягивания.
4. Чтобы замкнуть контур, щёлкните по первой точке. Открытую линию заканчивают клавишей Enter или Esc, в зависимости от редактора.
5. Поправьте форму инструментом прямого выделения: двигайте точки и концы ручек.

В Figma есть отдельная настройка того, как ведут себя две ручки одной точки. По справке Figma, режимов три:

Перо поначалу слушается плохо, это нормально. Та же справка Figma советует потренироваться в The Bezier Game: это бесплатный браузерный тренажёр для работы пером. Если же исходник уже есть в растре, иногда быстрее начать с трассировки изображения и потом почистить лишние узлы руками.

Пять правил аккуратного контура

• Меньше точек. Для плавной дуги на 90° хватит одной пары ручек. Лишние точки дают бугры, которые видно при увеличении.
• Точки на экстремумах. Ставьте опорные точки в самых верхних, нижних, левых и правых местах изгиба, а ручки ведите горизонтально или вертикально. Так контур проще править и масштабировать.
• Ручка примерно на треть сегмента. Если ручка длиннее половины расстояния до соседней точки, кривая начинает «перелетать» и петлять.
• У гладкой точки ручки на одной прямой. Даже небольшой угол между ручками даст заметный излом в контуре логотипа.
• Проверяйте на большом масштабе. Ошибка, незаметная при 100 %, вылезет на баннере или при печати.

Эти же правила работают, когда вы вырезаете объект пером в Figma или пускаете текст по кривой: от аккуратности контура зависит, насколько ровно ляжет результат.

Кривые Безье в SVG, Canvas и CSS

В вебе кривую Безье пишут кодом, и синтаксис везде похож: начальная точка, контрольные точки, конечная точка.

SVG: команды Q и C

В атрибуте d у тега <path> квадратичную кривую задаёт команда Q с одной контрольной точкой, а кубическую команда C с двумя. Короткие T и S продолжают кривую, отражая предыдущую контрольную точку. Синтаксис расписан в руководстве MDN по путям SVG.

<svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 Q 95 30 180 80" stroke="black" fill="none"/>
  <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="blue" fill="none"/>
</svg>

Это ровно те два пути, что на кадрах выше. Чтобы увидеть точки и ручки любого пути, вставьте его строку d в бесплатный SVG Path Editor: он рисует опорные и контрольные точки и даёт двигать их мышью.

Canvas: quadraticCurveTo и bezierCurveTo

В JavaScript-рисовании на холсте Canvas кривые строят два метода. Начало кривой берётся из текущей позиции пера, её ставят через moveTo().

• quadraticCurveTo(cpx, cpy, x, y) рисует квадратичную кривую: одна контрольная точка и конец.
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) рисует кубическую: первые четыре числа задают две контрольные точки, последние два задают конец кривой.

Параметры описаны в справке MDN по bezierCurveTo.

CSS: функция cubic-bezier() для анимации

В CSS кубическая кривая описывает не форму, а скорость анимации: по горизонтали время, по вертикали прогресс. Начальная точка всегда (0, 0), конечная (1, 1), а в функцию cubic-bezier(x1, y1, x2, y2) вы передаёте только две контрольные точки.

.button {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

Привычные ключевые слова ease и linear тоже кривые Безье, просто с заранее заданными точками. Их значения взяты из спецификации CSS Easing Functions:

Подобрать свою кривую удобно в онлайн-редакторе cubic-bezier.com Леи Веру. Тянете две цветные точки, а сверху сразу видите готовую строку для CSS. Кнопка GO! запускает два квадрата: один с вашей кривой, другой с выбранной из библиотеки.

Важное ограничение: координаты x обеих контрольных точек должны лежать в диапазоне от 0 до 1, иначе браузер проигнорирует всё свойство, предупреждает MDN. Координаты y так не ограничены. Если вывести y за пределы, элемент сначала проскочит конечное положение, а потом вернётся: получается эффект пружины.

С такими кривыми каждый день работает аниматор интерфейсов: от выбора cubic-bezier зависит, ощущается кнопка живой или деревянной. А чтобы писать анимации кодом, нужен базовый JavaScript.

Частые ошибки с кривыми Безье

Ещё одна частая путаница: многие ждут, что кривая пройдёт через контрольную точку. Она через неё не проходит, только тянется к ней. Если нужно, чтобы линия точно прошла через конкретное место, ставьте туда опорную точку, а не контрольную.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Где освоить работу с кривыми системно

Чтобы понять устройство кривой, хватит этой статьи и часа игры в The Bezier Game. Уверенно рисовать пером логотипы, иконки и иллюстрации учатся месяцами практики, лучше всего с разбором работ: этому учат курсы по Illustrator и векторной графике. Если пера мало и хочется в профессию, посмотрите, чем занимается дизайнер логотипов.

Ниже курсы по Adobe Illustrator из нашего каталога. Похожие программы с упором на иллюстрацию собраны в разделе «Векторная графика» (ссылка на него есть в начале статьи), а если Illustrator недоступен, есть разбор, чем его заменить бесплатно.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
Adobe Illustrator с нуля Перейти на сайт курса	Skillbox	37 528 ₽	2416 ₽/мес.	1 месяц	Обзор курса
Adobe Illustrator для fashion-дизайнера Перейти на сайт курса	Skillbox	34 368 ₽	4892 ₽/мес.	3 месяца	Обзор курса
Adobe Illustrator Перейти на сайт курса	Академия Синергия	16 716 ₽	1393 ₽/мес.	2 месяца	Обзор курса
Дизайнер-иллюстратор. Профессиональный курс Перейти на сайт курса	Pentaschool	83 720 ₽	7480 ₽/мес.	8 месяцев	Обзор курса
Дизайнер-иллюстратор. Московский диплом Перейти на сайт курса	НАДПО	38 500 ₽	3209 ₽/мес.	6 месяцев	Обзор курса

• 

  Adobe Illustrator с нуля

  Skillbox37 528 ₽2416 ₽/мес1 месяц
  Перейти на сайт курсаОбзор
• 

  Adobe Illustrator для fashion-дизайнера

  Skillbox34 368 ₽4892 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  Adobe Illustrator

  Академия Синергия16 716 ₽1393 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Дизайнер-иллюстратор. Профессиональный курс

  Pentaschool83 720 ₽7480 ₽/мес8 месяцев
  Перейти на сайт курсаОбзор
• 

  Дизайнер-иллюстратор. Московский диплом

  НАДПО38 500 ₽3209 ₽/мес6 месяцев
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по Adobe Illustrator