Нарисуйте кривую Безье SVG

Короткий ответ: вы не можете.

SVG имеет только квадратичные (2-го порядка) и кубические кривые (3-го порядка), тогда как кривая, которую вы показываете, является Квартовой (4-го порядка). SVG не имеет общей инструкции рисования" N term Bezier", поэтому вам придется пойти на компромисс.

Некоторые варианты:

1. преобразуйте кривую в (ряд) кубических кривых и визуализируйте их вместо этого. Это довольно сложная проблема и не очень рекомендуется.
2. примерьте свою кривую в достаточном количестве точек, таких как что многоугольник, проходящий через эти точки, выглядит как кривая при разрешении и увеличении, люди будут смотреть на него. Это легко сделать, но, конечно, у вас больше нет "кривой", теперь у вас есть многоугольник.
3. Как и выше, но меньше точек, а затем вычислить последовательность кривых Catmull-Rom, которая проходит через эти точки, а затем преобразовать эти кривые CR в кубические Безье (они являются одним и тем же типом функции и могут быть преобразованы 1:1 из одной в другую). Это лучше, чем 2, потому что у вас есть кривой, но она не может смотреть совсем же, как и оригинал. Конечно, чем больше очков вы используете, тем лучше будет результат.
4. используйте холст, чтобы нарисовать кривую Безье N-й степени, построить изображение из результата с помощью функции toDataURL, а затем загрузить это изображение как изображение в SVG. Это будет работать отлично, но если вы используете созданный стиль пути SVG, то создание холста в том же стиле может оказаться непростой задачей.
5. Этот список может быть очень длинным, так что давайте пока остановимся здесь.

Итог: Если вам нужно показать кривые Безье более высокого порядка, SVG не является подходящей технологией для использования (я бы рекомендовал просто делать анимацию с использованием холста, или еще лучше, что-то вроде d3.js или бумага.js . Вероятно, последнее).

И если вы в конечном итоге сворачиваете свой собственный, функция выборки смехотворно проста. Кривые являются параметрическими, управляемыми значением t, которое выполняется от 0 до 1 (включительно), и могут быть записывается как вложенная линейная интерполяция:

getCurvePoint(t, points) {
  if (points.length === 1) return points[0];
  var newpoints = [];
  for(var i=0,j=1; j<points.length; i++,j++) {
    newpoints[i] = lerp2d(t, points[i], points[j]);
  }
  return getCurvePoint(t,newpoints);
}

С функцией lerp, являющейся стандартной линейной интерполяционной функцией:

lerp(ratio, start, end) {
  return ratio*start + (1-ratio)*end;
}

lerp2d(ratio, start, end) {
  return {
    x: lerp(ratio, start.x, end.x),
    y: lerp(ratio, start.y, end.y)
  };
}

И простой пример jsbin: http://jsbin.com/pesutibefu/edit?html,js, вывод с использованием точек

var points = [
  {x:50, y:100},
  {x:50, y:250},
  {x:210, y:250},
  {x:250, y:50},
  {x:380, y:150}
];

Дает нам:

Хотя и бумага.JS sketch будет проще работать, если вам нужны анимированные красивые контуры, с перетаскиваемыми контрольными точками и т. д.