RAX7

Если открыть html как файл, то не работает, а если использовать локальный сервер, то все ок

расстояние от боков карточки до боков экрана может отличаться

Если карточка лежит в контейнере-центровщике, то расстояние до краев вьюпорта можно посчитать как 50vw - 50%. В этом случае нужно еще учесть ширину скроллбара, которую придется определять в js.

https://css-tricks.com/snippets/css/fluid-typography/
https://mattclaffey.medium.com/responsive-fonts-us...

$(function () {
  let timeoutId = null;
  $(".sidebar").hover(
    function () {
      timeoutId = setTimeout(() => {
        $(this).addClass("sidebar_hovered");
      }, 600);
    },
    function () {
      // change to any color that was previously used.
      clearTimeout(timeoutId);
      $(this).removeClass("sidebar_hovered");
    }
  );
});

Зачем конвертировать, когда можно использовать svg`шный clip-path прямо в css
https://developer.mozilla.org/en-US/docs/Web/CSS/c...
А если очень хочется, то можешь воспользоваться вот этим генератором https://css-doodle.com/
Упрощенная формула твоей фигуры

@grid: 1 / 90%;

background: radial-gradient(
  yellow, #E91F63, #fff
);

clip-path: @shape(
  split: 180;
  r: cos(14t)*0.07 + 0.93;
);

Держи, немного поправил один из своих старых набросков.

Принцип работы примерно, как описал Максим Морев в своем ответе.

.intro-section .promo-video {
    position: fixed;
}
.intro-section {
    z-index: -1;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/b...

.text p {
  display: inline-block;
  position: relative;
}

.text p::before {
  content: '';
  position: absolute;
  left: -30px;
  right: -30px;
  top: -10px;
  height: 6px;
  background: radial-gradient(circle, #000 2px, transparent 3px) space center / 10px 6px;
  opacity: 0.3;
}

Убери из названия слово banner, adBlock и Ghostery блочат загрузку этого изображения.