Сергей

Вот здесь, например, делал когда-то такую вещь (блок "Этапы создания корпоративного сайта").



Идея, вкратце:

1. Элементы размещаете просто в сетку с помощью inline-block/float/flex/grid - как привычнее.
   
2. Родителю задаёте относительное позиционирование, в него помещаете абсолютный элемент на всю ширину/высоту с небольшим запасом, на котором будете рисовать SVG.
   
3. Как нарисуется - на js считаете ключевые точки (координаты), через которые нужно провести линии.
   
4. Динамически рисуете SVG по вашим ключевым точкам.
   О том, какие варианты вообще есть, можно почитать на MDN, например.
   Выглядеть это будет примерно так:
   
   
   
   В вашем случае рекомендую использовать кривые Безье. Здесь мне нужно было сделать полукруг, поэтому я использовал дуги, у вас же просто статичная величина закругления.
   
5. На ресайз окна считаете ключевые точки заново и перерисовываете SVG.
   
6. Опционально заморачиваетесь и добавляете сверху ещё один путь, который по скроллу будет "заполняться"
   

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

Готовых вариантов тут в общем-то вы вряд ли найдёте, нужно взять и разработать.
У меня была идея оформить это в какую-то библиотеку, но как и все остальные идеи - и ныне лежит в туду-листе на 60+ пунктов. :)

<div class="layout">

  <div class="layout__row header">
    <div class="header__cell">
      Пусть это HEADER
    </div>
  </div>

  <div class="layout__row navbar">
    <div class="navbar__cell">
      А это пусть NAVBAR
    </div>
  </div>

  <!-- variant 1 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__col layout__col_main">
        main
      </main>
      <aside class="layout__col layout__col_side">
        side
      </aside>
    </div>
  </div>

  <!-- variant 2 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__main">
        main
      </main>
      <aside class="layout__side">
        side
      </aside>
    </div>
  </div>

  <div class="layout__row footer">
    <div class="footer__cell">
      Это FOOTER
    </div>
  </div>

</div>

Поскольку эти цифры не подходят для тега sup, то это просто span сдвинутый наверх любым из способов
- position relative
- margin
- transform

Это имеется ввиду?

Я думаю проще кинуть canvas на background и там генерить линии и их анимацию. Скрипта такого не встречал
И вот еще: https://codepen.io/mpopv/pen/zzENQQ
И еще варианты где порыться можно:
https://codemyui.com/tag/distortion-effect/
https://codepen.io/search/pens?q=distortion&page=1...

Перешел на Figma. Удобная, простая, легкая программа. После монстра Фотошопа «как гора с плеч». Основное назначение — разработка дизайна сайтов, приложений, веб-сервисов.

Плюсы

• бесплатна! (есть платные тарифы, но бесплатной версии для фрилансера или небольшой команды хватает вполне)
• есть версии для всех популярных ОС
• есть все необходимые инструменты для дизайна сайта/приложения/презентации/баннеров и пр.
  
• компоненты и все что связанно с ними (тема большая и отдельная)
  
• файлы макетов занимают минимум места
  
• работает практически без вылетов
  
• можно делать макет прямо в браузере
  
• настройка сеток просто сказка
  
• десктопная версия может работать без доступа к интернет
  
• облегчает работу верстальщику — показывает отступы, размеры шрифтов, цвета css-код, код для Андроид и iOS разработки. Почти вся эта информация в одном сайдбаре, не нужно использовать всякие инструменты типа пипетки, открывать разные панели
  
• встроенные простые инструменты для прототипирования
  

Плюсов гораздо больше, все давно описаны и легко гуглятся если копать в сторону Фигмы.

Минусы (субъективно и если придираться)

• Прототипирование в Figma очень простое, все переходы возможны только между отдельными фреймами. Нет переходов по якорям, окрытия отдельных попапов и пр. (как в Invision, к примеру)
  
• Нет инструментов для анимации интерфейсов (ну это был бы вообще мегакомбайн)
• нельзя сделать коллаж, сделать полноценный цветокор изображения и пр., что можно сделать в фотошопе (для этого он и нужен)

Разработчики работают на программой и я думаю, что в ней появится еще много чего. В общем, рекомендую её.

В итоге - Фигма. Инструменты кратко описаны тут, философия и напутствия тут.

Перешли на Figma с фотошопа. Больно уж она удобная, работа сразу в несколько человек, и возможность на "живую" работать с заказчиком и т.к. это онлайн сервис, проект всегда в кармане.

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

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

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

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

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

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

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

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

Либо всем плашкам обычным задаете: border-bottom: 1px solid transparent;, а при наведении меняете transparent на цвет, либо добавляете просто через :before,:after полоску снизу.