Как сверстать круглый блок с иконками внутри?

#html #css #вёрстка #svg

Подскажите, пожалуйста, как сверстать такое расположение иконок?
Если приглядеться, там по окружности (белый фон с несколькими кругами) расположены
кликабельные иконки...    

У меня вообще нет идей.  


    

Ответы

Ответ 1

Добавляю новый ответ, так как приложение почти полностью переписано и не знаю какое
решение больше устроит автора. 

Что сделано вновь:


Все изменяемые параметры переведены в проценты для достижения полной
адаптивности.
Блок окружностей, который обеспечивает круглую основу иконки с тенью
переведен в секцию  для многократного использования с помощью
команды   
Упрощена формула фильтра, который размывает тень   
Убраны фиксированные значения widthи height из шапки SVG для
получения адаптивности  
svg код обернут в 
, что позволит менять размеры svg блока,
меняя проценты ширины и высоты родительского 
.  
Добавлены ссылки на каждую иконку  
Иконки распределены по всей ширине svg блока    


Для настройки размера и интенсивности тени увеличивайте или уменьшайте радиусы двух
окружностей относительно друг друга. Так же для этих целей, можно изменять атрибут
stdDeviation="4" фильтра



.container {
 width:100%;
 height:100%
}

 



Ответ 2

Решение SVG


Для реализации тени используются две окружности, одна над другой.
К нижней окружности применен фильтр Гаусса.  С помощью атрибутов
этого фильтра можно тонко отрегулировать насыщенность и положение
тени.  stdDeviation="4"   dx="0" dy="2"   Я сделал, как у автора
вопроса. Если нужно что-то изменить во внешнем виде тени, меняйте эти
атрибуты и радиусы окружностей.
Иконки добавлены через тег  внутри svg файла.       Это
гарантирует, что иконка и окружность с тенью не разъедутся при
изменении масштаба.
Я использовал для демонстрации 3 комплекта иконок+окружности.  Можно
клонировать и позиционировать комплекты других иконок с помощью
команды


  


Иконки бывают разного размера. В этой технике легко изменить х
размеры с помощью процентов 


 






Ответ 3

Разумеется что нету определённого алгоритма как расположить эти элементы 

Я показал только одну часть ибо направляю в нужное русло 

Дальше по шагам ... один блок в нём потомки ...и по такому примеру и сколько нужно
потомков ... 

Нужное правило для этого : transform:origin(x,y,z); и правильное позиционирование

Но лучше конечно для этого применить svg


* {
  margin: 0;
  padding: 0;
}

.items {
  width: 330px;
  height: 330px;
  margin: 90px auto;
  border: 1px solid red;
  position: relative;
  border-radius: 50%;
}

.items>div {
  position: absolute;
  top: -20%;
  left: 35%;
  transform-origin: 50% 230% 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.item1 {
  background: red;
  transform: rotate(0deg);
}

.item2 {
  background: green;
  transform: rotate(-90deg);
}

.item3 {
  background: blue;
  transform: rotate(90deg);
}

.item4 {
  background: orange;
  transform: rotate(180deg);
}