Ivan Bogachev

или PostCSS

В CSSNext есть такая штука. Синтаксис похож на то, что вы ищете:

:root {
  --danger-theme: {
    color: white;
    background-color: red;
  }
}

.danger {
  @apply --danger-theme;
}

Можно картинкой вставить. Просто. Быстро. Размер шрифта начинает отличаться от остальной страницы при адаптивном уменьшении картинки. Печаль для дизайнера-перфекциониста. А еще буквы могут начать мылиться. Это вообще печаль. Если нужно добавить/убрать стрелки - придется перерисовывать картинку. Это неприемлемо, если к ним привязана какая-то еще логика и они показываются не всегда.

Можно использовать связку SVG+CSS:
- Берется SVG с viewbox='0 0 100 100'.
- Основная картинка вставляется в виде image.
- Стрелки рисуем в векторе (это просто дуги из одной точки в другую с маркером на конце).
- Если нужно сделать их двухцветными, как в вашем примере - делаем маску по картинке и применяем ее к стрелкам.
- Надписи верстаем отдельно (div`ами) и абсолютно позиционируем сверху. Координаты будут соответствовать им же в svg (от 0 до 100). Это нужно для того, чтобы сохранять размер шрифта при адаптивном уменьшении всего этого.

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

Masonry

1. Набор элементов с бордерами (блоки-флексы-гриды по вкусу).
2. Сверху абсолютно позиционированный элемент в 200vh/200vw с фоном в виде радиального градиента из прозрачного в цвет фона body или что там еще снизу находится.
3. В вышеупомянутых элементах текстам задаем z-index и они ложатся сверху градиента.
4. На событие mousemove вешаем обработчик, который меняет координаты градиента.

Получаем что-то такое:
codepen

P.S.: И в перспективе вставляйте картинки сюда, а не на левый хостинг.

Практически все подобные вопросы про бордеры можно решать с помощью линейных градиентов (пример). Это получается как бы не бордер, а просто нарисованные на фоне линии.

Слой номер раз: SVG картинка со схемой, вставляете ее в код страницы. Областям задаете какой-нибудь класс, чтобы селекторы были более понятными.

Слой номер два: Плашки с текстом. Их удобно не в картинку пихать, а верстать на html/css и располагать поверх картинки с помощью абсолютного позиционирования или трансформаций. Если сообразить для картинки viewbox='0 0 100 100', то даже считать ничего не нужно будет.

Дальше на css на :hover/:focus по областям показываете плашки с текстом. Можно это на :nth-child построить или еще как-нибудь - смотрите, что будет удобнее. Ну и самим областям меняете fill на оранжевый.

P.S.: Можно еще сделать, чтобы в плашках как бы вода с волнами наливалась при наведении мыши, но это уже совсем другая история...

Можно сделать на SVG:

<svg viewBox="0 0 100 100">
  <defs>
    <filter id="noise">
      <feTurbulence id="js-turbulence" type="fractalNoise" baseFrequency="30" result="noisy"></feTurbulence>
      <feColorMatrix type="saturate" values="0"></feColorMatrix>
      <feBlend in="SourceGraphic" in2="noisy" mode="multiply"></feBlend>
    </filter>
    <clipPath id="the-object">
      <circle cx="50" cy="50" r="50" fill="currentColor"></circle>
    </clipPath>
  </defs>
  <circle cx="50" cy="50" r="50" fill="#5FDDD1" filter="url(#noise)" clip-path="url(#the-object)"></circle>
</svg>

Только вместо круга взять path, который вам нужен. Изменяя значение baseFrequency получите "анимированный" шум - codepen.

Кто нибудь из серьёзных верстальщиков делает анимацию самостоятельно, вот чтобы без плагинов писать весь код с нуля?

Да, вполне. Тут нужно понять такую вещь: есть задача и есть инструмент под задачу. Если вам нужно посадить кактус в горшок - экскаватор будет не к месту. И не всегда универсальный набор шестигранников подойдет под треугольный болт.

Вопрос : нужно ли вообще заморачиваться над серьёзным изучением анимации, джаваскрипта, или же забить и учить документацию гринсок?

Что такое GSAP? Ну вот без красивых слов? Это набор функций, решающих набор задач. А если у вас появится задача, на которую этот инструмент не рассчитан? Или задача, которую вообще никто еще не решал до вас, или готовые решения не подходят? Вы ничего не сможете сделать. Так что если вы хотите делать интересные вещи, которые выходят за рамки среднестатистического сайта, то ответ очевиден.

P.S.: И да, не зацикливайтесь на каком-то конкретном инструменте (например GSAP) только потому, что кто-то сказал, что это "стандарт". Всегда есть альтернатива. Например anime.js. То, что инструмент активно не развивается, не значит, что он вдруг перестал решать свою задачу. Старая добрая классическая zippo работала, работает и вас переживет.

Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

На нажатие мышки вешаете обработчик, показывающий эти элементы (думаю не стоит говорить о том, как поменять им opacity). Далее точно так же - на событие "перетаскивания" добавляете transform:translate для всех этих линий и transform:scale для кружков. При переходе между слайдами добавляете еще больше трансформаций по вкусу.

Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.

Или можно всё сделать проще?

Так у них [на сайте, на который вы ссылку дали] и так все просто:

1. Есть SVG, в которую через image воткнули картинки. Это обычные png с прозрачным фоном. Каждый человек - отдельная картинка. Можно еще сделать маску вокруг каждого человека, чтобы буквально вырезать его по контуру и определять наведение не по прямоугольнику (как у них), а по силуэту
   
2. Зная положение каждого человека, можно нарисовать текст над ним. Это можно как внутри SVG сделать (но тогда адаптировать сложно будет), так и с помощью обычных div`ов и абсолютного позиционирования из CSS. Если сделать viewbox='0 0 100 100' у SVG, то считать будет проще.
   
3. При наведении на человека (думаю про addEventListener вы знаете):
   
   • Берем большой прямоугольник в SVG, заливаем его черным полупрозрачным, таким образом делается затемнение. Показываем его.
     
   • Человека можно заменить другим человеком (как сделано на том сайте), или применить к нему какой-нибудь фильтр, чтобы цвета изменить. В любом нормальном графическом редакторе вы найдете кучу фильтров.
     
   • Показываем текст
     
     Когда я говорю "показываем" я имею в виду, что есть миллион способов сделать это, от банального отключения display:none или изменения прозрачности и до хитрых анимаций с SVG-масками или еще чем-нибудь.