RAX7

У свайпера можно определить метод renderBullet который создаст элементы для навигации по слайдеру. Эти элементы можно стилизовать на css как угодно.

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

transform="translate(cx cy) rotate(-180) translate(-cx -cy)"

где cx, cy координаты точки центра вращения.
https://developer.mozilla.org/en-US/docs/Web/API/C...

Как работает svg arc описано здесь https://svg-art.ru/?page_id=900#comm_a
Как посчитать радиус окружности зная высоту хорды - здесь https://en.wikipedia.org/wiki/Circular_segment

Режимы наложения тут вряд ли помогут, проще продублировать текст и скрывать лишнее через clip-path

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

.combined {
  position: relative;
  padding: 50px;
  width: 400px;
  z-index: 0;
}

.combined::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 7px;
  filter: url(#combined);
  z-index: -1;
}

div {
  isolation: isolate;
}

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Способ весьма костыльный, но вроде работает.

div {
  background: radial-gradient(circle at 100% 50%, transparent 35px, red 36px);
}

The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.

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