Изменение размера многоугольника svg как контейнера

Question

Я пытаюсь воспроизвести следующий дизайн.

Мои основные проблемы:

1. Сохранение содержимого в правая область svg
2. Запуск следующего контейнера в разумно указанной c точке
3. Удаление воздуха из контейнера с одной стороны, но сохранение выравнивания по сетке с другой
4. Разная высота содержимого
5. Использование градиентов

У меня есть настройка codepen здесь , где я использую две справочные строки в svg для размещения содержимого, которое удовлетворяет большую часть вышеперечисленного.

Есть ли лучший, гораздо более простой способ подойти к этому?

Или я могу переместить определенные точки svg вниз в зависимости от высоты элемента, чтобы содержимое не

Мой текущий подход в значительной степени зависит от позиционирования элементов через javascript, но я не могу обернуть голову, манипулируя svg:

JS

function setEdge() {
        let useWidth = $(window).width() - $('#Layer_1').offset().left;
        $('#Layer_1').width(useWidth);
    }

    function setCenter() {
        let padding = $('#Content_Ref').offset().top - $('#Shape').offset().top;
        let height = $('#ref-row').height();
        let offset = padding - ( height / 2 );
        $('#ref-row').css('padding-top', offset);
    }   

    function setLower() {
        let top = $('#ref-row').offset().top;
        let height = $('#ref-row').outerHeight();
        let line = $('#Lower_Ref').offset().top
        let offset = line - (top + height);
        console.log(top,height,line,offset);
        $('#ref-row').css('margin-bottom', offset);
    }

    $( document ).ready(function() {
        setEdge();
        setCenter();
        setLower();
    });

SVG

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 624.63 452.69">
          <defs>
            <radialGradient id="radial-gradient" cx="471.69" cy="385.65" fx="842.0779126868974" fy="517.8832437207905" r="402.83" gradientUnits="userSpaceOnUse">
              <stop offset="0" stop-color="#00a19a"/>
              <stop offset="0.91" stop-color="#95c11f"/>
            </radialGradient>
          </defs>
          <path id="Shape" class="cls-1" d="M371.74,163.07,179.41,258.52c-25.61,12.71-27,48.73-2.38,63.32L784,612V287L404.17,163.25A36.06,36.06,0,0,0,371.74,163.07Z" transform="translate(-159.37 -159.31)"/>
          <line id="Content_Ref" data-name="Content Ref" class="cls-2" y1="131.69" x2="624.63" y2="131.69"/>
          <line id="Lower_Ref" data-name="Lower Ref" class="cls-3" y1="333.69" x2="624.63" y2="333.69"/>
        </svg>