Hyubert

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

Что не так ?

canvas = document.getElementById('myCanvas');
<...>
drawImage(canvas[0],

const canvas = document.querySelector('#myCanvas');
const image = Object.assign(new Image, {
  onload() {
    canvas.getContext('2d').drawImage(this, 0, 0, 300, 300);
    const clone = canvas.cloneNode();
    clone.getContext('2d').drawImage(canvas, 0, 0);
    document.querySelector('#target').append(clone);
  },
  src: 'https://www.photographyatthesummit.com/wp-content/uploads/2013/03/p-nature43-300x300.jpg',
});

const $canvas = $('#myCanvas');
const $image = $('<img>')
  .on('load', function() {
    $canvas[0].getContext('2d').drawImage(this, 0, 0, 300, 300);
    const $clone = $canvas.clone();
    $clone[0].getContext('2d').drawImage($canvas[0], 0, 0);
    $('#target').append($clone);
  })
  .prop('src', 'https://www.photographyatthesummit.com/wp-content/uploads/2013/03/p-nature43-300x300.jpg');