RAX7

const sum = arr.reduceRight((acc, n) => n && acc + n, 0);

let sum = 0;
for (let i = 0; arr[i]; sum += arr[i++]) ;

let sum = 0;
for (const n of arr) {
  if (!n) {
    break;
  }
  sum += n;
}

const sum = (function sum(arr, i = 0) {
  return arr[i] ? arr[i] + sum(arr, i + 1) : 0;
})(arr);

type AsCamelCase<S extends string> = S extends `${infer A}_${infer B}` ? `${A}${Capitalize<AsCamelCase<B>>}` : S;
type CamelCaseKeysRecord<T> = T extends Record<PropertyKey, unknown> ? {
    [K in string & keyof T as AsCamelCase<K>]: CamelCaseKeysRecord<T[K]>;
} & {
    [K in Exclude<keyof T, string>]: CamelCaseKeysRecord<T[K]>;
} : T;

function toCamelCaseKeys<T>(val: T): CamelCaseKeysRecord<T> {
    if (Array.isArray(val)) {
        return val.map(toCamelCaseKeys) as unknown as CamelCaseKeysRecord<T>;
    }
    if (typeof val === 'object') {
        return Object.fromEntries(Object
            .entries(val)
            .map(([k, v]) => [
                k.replace(/_+(.)/g, (_, g) => g.toUpperCase()),
                toCamelCaseKeys(v as Record<string, unknown>),
            ])) as CamelCaseKeysRecord<T>;
    }
    return val as unknown as CamelCaseKeysRecord<T>;
}

1. Элементы размещаете просто в сетку с помощью inline-block/float/flex/grid - как привычнее.
   
2. Родителю задаёте относительное позиционирование, в него помещаете абсолютный элемент на всю ширину/высоту с небольшим запасом, на котором будете рисовать SVG.
   
3. Как нарисуется - на js считаете ключевые точки (координаты), через которые нужно провести линии.
   
4. Динамически рисуете SVG по вашим ключевым точкам.
   О том, какие варианты вообще есть, можно почитать на MDN, например.
   Выглядеть это будет примерно так:
   
   
   
   В вашем случае рекомендую использовать кривые Безье. Здесь мне нужно было сделать полукруг, поэтому я использовал дуги, у вас же просто статичная величина закругления.
   
5. На ресайз окна считаете ключевые точки заново и перерисовываете SVG.
   
6. Опционально заморачиваетесь и добавляете сверху ещё один путь, который по скроллу будет "заполняться"
   

const checkTag = (parent, tag, isImmediate = false) => {
	const selector = isImmediate ? `:scope > ${tag}` : tag;
	const element = parent.querySelector(selector);
	
	return element !== null;
};

const point = (x, y) => ({ x, y });

const A = point(-1, 1);
const B = point(1, 1);
const C = point(1, -1);
const D = point(-1, -1);
const E = point(0, 0);

const side = (a, b, p) =>  Math.sign((b.x - a.x) * (p.y - a.y) - (b.y - a.y) * (p.x - a.x));

const inArea = side(A, B, E) === -1 &&
               side(B, C, E) === -1 &&
               side(C, D, E) === -1 &&
               side(D, A, E) === -1;

console.log(inArea); // true

function point(x, y)
    return { ["x"] = x, ["y"] = y }
end

function sign(number)
    if (number < 0) then
        return -1
    elseif (number > 0) then
        return 1
    else 
        return number
    end
end

function side(a, b, p)
    return sign((b.x - a.x) * (p.y - a.y) - (b.y - a.y) * (p.x - a.x))
end

A = point(-1, 1)
B = point(1, 1)
C = point(1, -1)
D = point(-1, -1)
E = point(0, 0)

inArea = side(A, B, E) == -1 and
         side(B, C, E) == -1 and
         side(C, D, E) == -1 and
         side(D, A, E) == -1;

print(inArea) -- true

grid-template-columns: calc((100% - 1200px)/2)) 3fr 7fr calc((100% - 1200px)/2))

body {
  overflow-anchor: none;
}

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

1. Волны абстрактные и на фотографиях, шум на фоне - WebGL, шейдеры. Вода на первом экране - скорее всего моделируется как идеальная жидкость, волны на фотографиях - чисто геометрические.
   
2. Обведение текста в овал, трилистник с пунктиром, стрелки на карте - SVG, рисование линии по такому принципу.
   
3. Плавные переходы между экранами можно делать по-разному, даже забытый модными фронтендерами pjax будет к месту. Можно познакомиться с barba.js - это если не самый популярный, то один из популярных инструментов для работы с плавными переходами. Можно использовать роутеры из SPA-фреймворков, не принципиально. Самое сложное здесь - все синхронизировать.
   
4. Карта с персонажами - это может быть обычная верстка, подложенная под канвас с шумом. Самый простой вариант.
   
5. Есть небольшое покачивание элементов вслед за мышкой, логично предположить, что это банальная CSS-трансформация на mousemove.
   
6. Рисование дуг из точек - это может быть либо SVG, как в п.2, только эта линия будет маской, либо можно это строить как графики.
   
7. Ну и немного стандартных CSS-анимаций там тоже есть.