html

<div class="circle-wrap">
  <div class="circle-item">1</div>
  <div class="circle-item">2</div>
  <div class="circle-item">3</div>
  <div class="circle-item">4</div>
  <div class="circle-item">5</div>
  <div class="circle-item">6</div>
  <div class="circle-item">7</div>
  <div class="circle-item">8</div>
</div>

JavaScript

const circleWrap = document.querySelector(".circle-wrap");
const circleItem = document.querySelectorAll(".circle-item");
const circleItemLength = circleItem.length;
const spaceRatio = 1.4; // 要素同士の感覚比率
const deg = 360.0 / circleItemLength;
const red = (deg * Math.PI) / 180.0;
let xArray = [];
let maxDiameter;

window.addEventListener("load", function () {
  circleItem.forEach(function (elem, index) {
    setCircle(elem, index);
  });
});

window.addEventListener("resize", function () {
  xArray = [];
  circleItem.forEach(function (elem, index) {
    setCircle(elem, index);
  });
});

function setCircle(item, number) {
  deviceWidth = window.innerWidth;
  const circleR = item.offsetWidth * spaceRatio;
  const x = Math.cos(red * number) * circleR + circleR;
  const y = Math.sin(red * number) * circleR + circleR;
  item.style.left = x + "px";
  item.style.top = y + "px";
  const circleWidth = document.defaultView.getComputedStyle(item, null).width;
  const circleLeft = document.defaultView.getComputedStyle(item, null).left;
  const circleWidthNum = Number(parseFloat(circleWidth));
  const circleLeftNum = Number(parseFloat(circleLeft));
  xArray.push(circleLeftNum);
  // Math.max Math.min は複数の数値を比較できるが配列を比較できないためスプレッド構文で渡す
  const maxLeft = Math.max(...xArray);
  maxDiameter = maxLeft + circleWidthNum;
  circleWrap.style.width = maxDiameter + "px";
  circleWrap.style.height = maxDiameter + "px";
  if (deviceWidth < maxDiameter) {
    const dif = (deviceWidth - maxDiameter) / 2;
    circleWrap.style.left = dif + "px";
  }
}

scss

.circle-wrap {
  position: relative;
  top: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center;
  animation: rotateR 20s infinite linear;
  .circle-item {
    width: 30vw; //希望の円形要素1つの横幅
    max-width: 200px; // 希望の最大幅
    aspect-ratio: 1/1;
    background-color: orange; //デバッグ用背景
    border-radius: 50%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center;
    animation: rotateL 20s infinite linear;
  }
}

@keyframes rotateR {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateL {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}