RAX7

Для полупрозрачного уголка можно css-masks использовать, либо просто вставить svg как data-url в background-image

.content {
    position: relative;
}

img {
    position: absolute;
}

У свайпера можно определить метод 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

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

function* range(from, to, step = 1) {
  if (to === undefined) [from, to] = [0, from];
  for (let i = from; i < to; i += step) yield i;
}

for (let v of range(1, 10)) {
  console.log(v);
}

1) Заменить path на rect
2) Для градиента использовать gradientUnits="userSpaceOnUse"

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

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

https://marketplace.visualstudio.com/items?itemNam...

Скорее всего этот эффект сделан на основе шума Перлина
Можно сделать примерно так:

.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;
}