Даннная работа выполнена за счет отрисовки множества кривых Безье.

Каждая кривая задается 4 точками.

Процесс отрисовки кривых можно наблюдать, нажав на кнопку "Нарисовать заново". Данный процесс (постепенная отрисовка) сделан при помощи отложенного вызова функции отрисовки для каждой из кривой. Задержка задается параметром step * t, где step - задержка, t - количество уже отрисованных линий. Первая линия рисуется через 0 ms, вторая линия - через 1 * step ms, третья - через 2 * step ms и т.д.

При помощи ввода input и кнопки Подтвердить можно настраивать скорость отрисовки линий.

При помощи кнопки "Показать фон" можно как показать, так и скрыть фон, по которому и строилась данная работа.

Каждые 4 точки задаются в отдельном блоке кода со своей областью видимости. После каждого вызова функции отрисовки кривой Безье к параметру t добавляется 1. Необязательным параметром функции является цвет линии.

  {
    const p1 = { x: 318, y: 161 };
    const p2 = { x: 319, y: 163 };
    const p3 = { x: 320, y: 174 };
    const p4 = { x: 318, y: 186 };
 
    setTimeout(drawBezierCurve, t * step, p1, p2, p3, p4, 'red')
    t += 1
  }