Егор Живагин

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

methods: {
  short: str => str.replace(/(?<=^.{3}).{4,}(?=.{8}$)/, '...'),
  ...

<span>{{ file ? short(file.name) : 'Прикрепить' }}</span>

foreach ($videos as $video) {
    $list[] = [
        'sources' => [
            [
                'src' => $video->getFirstMediaUrl('videos'),
                'type' =>'video/mp4',
            ]
        ]
    ];
}

const datePicker = document.createElement("div");
datePicker.className = 'datePickerInline';
// тут накладываем на элемент всякие события

const str = '<div><span>Вставляем</span><div> <div class="replace_me"></div> </div><div><p>в уже готовые html элементы в виде строки</p></div></div>';

let el = document.getElementById('element');
el.innerHTML = str;

el.querySelector('div.replace_me').replaceWith(datePicker);

const handle = el => {
	setItems(items => items.map(item => item === el
		? {
			...item,
			show: !item.show
		}
		: item
	));
};

const isSumEven = arr => arr.reduce((p, c) => p ^ c, 1) & 1;
// или
const isSumEven = arr => !(arr.filter(n => n % 2).length % 2);
// или
const isSumEven = arr => Number.isInteger(arr.reduce((acc, n) => acc + n, 0) / 2);
// или
const isSumEven = arr => /[02468]$/.test(eval(arr.join('+')) ?? 0);

console.log(`Card ${key + 1} start!`);
el.classList.add('active');
console.log(`Card ${key + 1} end!`); // выполнится почти одновременно с предыдущими строками

console.log(`Card ${key + 1} start!`);
el.classList.add('active');
setTimeout(() => console.log(`Card ${key + 1} end!`), 1000);

el.addEventListener('transitionend', () => {
  console.log(`Card ${key + 1} end!`);
});

setTimeout(() => {
        console.log(`Card ${key + 1} start!`);
        const onTransitionEnd = () => {
          console.log(`Card ${key + 1} end!`);
          el.removeEventListener('transitionend', onTransitionEnd);
        }
        el.addEventListener('transitionend', onTransitionEnd); 
        el.classList.add('active');
      }, ms);