Максим

https://codepen.io/topicstarter/pen/KKgvvem
https://codepen.io/topicstarter/pen/pojqwRg
https://codepen.io/topicstarter/pen/dyoemQy

В маску надо поставить ваше изображение

Иконок у меня нету - вставите их в g.sings а дальше обычные координаты по осиX и по осиY

Раз ни кто не ответил то покажу на gsap + scrollMagick
Работает при скролле : https://codepen.io/topicstarter/pen/VwmQWXM

.icon-head {
  text-align: center;
  padding: 20px;
  width: 100px;
  position: relative;
}

.icon-text span {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: red;
  z-index: 100;
  box-shadow: 0 5px 7px #000
}

Я не захотел вставлять SVG в HTML и по тому вставил через JS, если вас такой результат не устроит(использование javascript) то открываете HTML в инспекторе кода копируете HTML CSS и используете как есть

Вот так вроде

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

Если так устроит то используйте: https://codepen.io/topicstarter/pen/MWbvgoa

На SVG можно

https://codepen.io/topicstarter/pen/LYbxLOZ - ваще уже ...

С use есть проблемы - даже в современных браузерах так как shadow-root(closet)
Лучше вставить через object и навести то есть hover/mousemove
Или же в SVG подключить css file и javascript file и делать наведение hover или mousemove

1) Есть для windows - youtube dll в кансоле надо указать ссылку на playlist
2) И так же savefromnet - устанавливается в chrome, firefox, opera, edge - открываем канал и нужный плейлист - смотреть - и потом на ярлык - скачать всё

вот так вот

Просто перечисляем всё от M до Z в одном path d="" либо на js получаем все d генерируем новый path вставляем новый d в path и всё вроде