forspamonly2

у вас в первой колонке похоже отдельный блок контента, который не переходит в другие колонки?

тогда можно сделать его отдельным элементом и картинка будет залезать только на одну колонку с текстом, а это уже решаемо.

в смысле 1) отдельный блок с первой колонкой с отступом сверху по высоте картинки, 2) блок с тремя цсс-колонками, с отступом сверху в первой колонке по высоте картинки, 3) картинка поверх этих двух блоков.

а так да, нормальных способов нет. адобовскую спецификацию css regions подонки-изготовители браузеров слили, занимаются всем подряд вместо того, что действительно полезно.

если хочется именно пнг, сделайте его белым с дыркой в виде картинки. а потом меняйте цвет фона, который в дырку выглядывает.
то есть нужно перенести изображение в альфа канал и проинвертировать

кажется вам тут проще без флексов обойтись. задать размеры шариков в процентах от ширины.

имхо, самый простой вариант:

жабаскрипт там вообще не нужен - чисто для интерактивности добавлен.

в таком случае надо те пути (элементы path), которые рисуются каждый своим градиентом, почистить от этих градиентов, цветов и заливок и обернуть в один элемент clipPath. а потом вывести прямоугольник, которому указать в качестве clip-path тот элемент. а уже этот прямоугольник стилизовать любым удобным вам способом - градиентом, картинкой, с анимацией и т.д.

то есть, нужно сделать из картинки трафарет, через который показывать что угодно.

простое механическое действие: грохнуть все градиенты, все атрибуты fill в путях, перенести пути в def > clipPath с айдишником, добавить rect c clip-path="url(#тот_айдишник)", пользоваться.

можно обрезать нижнюю тень внешним блоком.
сделать два вложенных блока с оступом внешнего от внутреннего по бокам и сверху, но без отступа снизу. внешнему поставить overflow:hidden, внутреннему задать тень со всех сторон.

вам для этого даже свг не нужен, такое спокойно делается в виде двух блоков, у которых рисуется несколько бордеров. и анимируйте потом размеры и положение простыми средствами цсс, без возни с свг.

у вас же фон монотонный. накладывайте поверх фотографии картинку цветом фона с вырезом нужной вам формы, включая скруглённые углы. хоть векторную, хоть растровую.

если оно у вас именно разными файлами сделано, то простой цсс-анимацией вы не обойдётесь. поищите каких-нить библиотек для page transition, типа https://github.com/miguel-perez/smoothState.js

технологии продвинулись 20 лет назад, ещё ие 5.5 умел.

https://codepen.io/anon/pen/zQBQjW

обколются своими флексами...

это выглядит как повёрнутый синий прямоугольник со скруглённым углом