RAX7

Можно и через абсолют примерно как здесь https://codepen.io/RAX7/pen/PoZMpqV
А можно и на js высчитывать позиции блоков и сдвигать их маржином.

Неровности по краям картинки можно сделать svg маской.

Можно просто сдвинуть через transform: translateY, либо добавить margin/padding соответствующим блокам

text-align-last: justify;
https://developer.mozilla.org/ru/docs/Web/CSS/text...
https://kristinlbradley.wordpress.com/2011/09/15/c...

Думаю придется переписать на webGL. Проще всего с использованием PIXIJS, для него есть готовый фильтр motion blur https://pixijs.io/pixi-filters/tools/demo/

Вся математика описана здесь: https://math.stackexchange.com/a/339033
Там же есть и proof-of-concept https://jsfiddle.net/dFrHS/1/
Можно воспользоваться этим фидлом чтобы посчитать матрицу трансформации. Для этого берем координаты углов полигона и его размеры и подставляем в переменную corners (ширину и высоту задаем через CSS).
Затем через инструменты разработчика смотрим примененную transform: matrix3d
Можно пойти дальше и попробовать получить угол поворота из матрицы How to extract euler angles from transformation matrix, а можно не замарачиваться и использовать transform: matrix3d как есть.

Лучше фоновое изображение засунуть в svg и сделать маску.
Либо так:
(с пропорциональным увеличением)

либо:
(с фиксированной высотой)

Также с помощью медиа-запросов можно совместить оба эти варианта

По всей видимости ты зря перевел обводку контура в кривые.

<path class="st0" fill-rule="evenodd" clip-rule="evenodd" d="M266.81.15c-4.5,35.94-12.56,132.35-16.05,176.31l-10.43,13.63v17.63L217.07,223c.15-7.74,1.41-18.56.15-26.47-.82-5.14-2.91-12.18-9.77-11.2-5.17.74-8.15,7.82-8.83,12v32.86c-7.12,8.32-6.6,22.21-3.21,30.45v64.12L181.78,340v59.3C91,441.56,46.53,488.44,27.83,525H-1354" fill="#252525"/>

Поменяй процентные значения в transform: translate(-47%, -49%) на значения в пикселях, похоже что safari не пересчитывает проценты при изменении width/height