Как сверстать круг по окружности которого равномерно расположено несколько маленьких кружков

#javascript #html #css #svg #анимация

Ниже рисунок, что необходимо сделать

   

Я попытался, но маленькие окружности располагаются неравномерно по большой окружности.
Есть ли какой-нибудь способ, формула, чтобы не высчитывать положение каждой окружности.
Я также пытался изменить окраску маленьких окружностей в копиях, созданных командой
 но они  остаются того же цвета, что и оригинал  








  

Как равномерно распределить маленькие окружности по краю большой окружности и реализовать
последовательный переход желтого цвета от одной окружности к другой.
    

Ответы

Ответ 1

Решение SVG

Решение адаптивно, работает во всех браузерах включая IE11, Edge 

Вы можете изменить начальные размеры блока, меняя проценты width и height блока контейнера.  



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

  	 





Вариант с анимацией

Не работает только в IE и Edge, потому что браузеры микрософт не поддерживает анимацию
SMIL SVG. Как в прочем и многое другое не поддерживают IE11, Edge и в анимации CSS.      



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

  



Ответ 2

Как вам такое решение?)))


.square {
  width: 400px;
  height: 400px;
  background-color: #000;
  position: relative;
}

.main-circle {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: 2px solid #fff;
  border-radius: 50%;
}

.small-circle-box {
  width: 70px;
  height: 70px;
  border: 2px solid #fff;
  position: absolute;
}

.angle {
  position: absolute;
  border: solid #fff;
  width: 10px;
  height: 10px;
}

.angle-0 {
  top: -4px;
  left: -4px;
  border-width: 4px 0 0 4px;
}

.angle-1 {
  top: -4px;
  right: -4px;
  border-width: 4px 4px 0 0;
}

.angle-2 {
  bottom: -4px;
  right: -4px;
  border-width: 0 4px 4px 0;
}

.angle-3 {
  bottom: -4px;
  left: -4px;
  border-width: 0 0 4px 4px;
}

.no-border {
  border: none;
}

.small-circle {
  width: 50px;
  height: 50px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
}

.box-0 {
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.box-1 {
  top: 3%;
  right: 3%;
}

.box-2 {
  top: 50%;
  right: 0;
  transform: translateX(50%) translateY(-50%);
}

.box-3 {
  bottom: 3%;
  right: 3%;
}

.box-4 {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(50%);
}

.box-5 {
  bottom: 3%;
  left: 3%;
}

.box-6 {
  top: 50%;
  left: 0;
  transform: translateX(-50%) translateY(-50%);
}

.box-7 {
  top: 3%;
  left: 3%;
}

.name {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  color: #fff;
  font-size: 30px;
  text-align: center;
}

  

    
OPTION NAME
    

      

      

      

      

      

    
    

      

    
    

      

    
    

      

    
    

      

    
    

      

    
    

      

    
    

      

    
  



Ответ 3

Можно сделать с помощью JS:
P.S. формула взята отсюда



var circle = document.getElementsByClassName('circle');
var delta = Math.PI * 2 / circle.length;
var angle = 0;

for (var i = 0; i < circle.length; i++) {
  circle[i].style.top = 100 * Math.cos(angle) + 'px';
  circle[i].style.left = 100 * Math.sin(angle) + 'px';
  angle += delta;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  position: relative;
  margin: 6rem;
}

.wrapper::before {
  content: "";
  position: absolute;
  transform: translate(-38%, -38%);
  display: block;
  width: 13rem;
  height: 13rem;
  border: 2px solid;
  border-radius: 50%;
}

.wrapper .circle {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: black;
  border-radius: 50%;
}

.wrapper .name {
  font-size: 2rem;
  transform: translate(-15%, 15%);
}

  

  

  

  

  

  

  

  

  
Name