Как сверстать кружки с текстом вокруг круга?

*{ 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.circle{ 
  position: relative; 
  margin: 50px auto; 
  width: 100px; 
  height: 100px; 
  border: 2px solid #000; 
  border-radius: 50%; 
} 
.circle-item{ 
  position: absolute; 
  width: 20px; 
  height: 20px; 
  border: 2px solid #000; 
  background: #fff; 
  border-radius: 50%; 
} 
.circle-item-1{ 
  top: 0; left: 10px; 
} 
.circle-item-2{ 
  top: 0; right: 10px; 
} 
.circle-item-3{ 
  top: 50%; right: -10px; 
  margin-top: -10px 
} 
.circle-item-4{ 
  bottom: 0; right: 10px; 
} 
.circle-item-5{ 
  bottom: 0; left: 10px; 
} 
.circle-item-6{ 
  top: 50%; left: -10px; 
  margin-top: -10px 
} 
 
 
.circle-item > span{ 
  content: ''; 
  position: absolute; top: 50%; right: calc(100% + 15px); 
  text-align: right; 
  width: 300%; 
  transform: translateY(-50%); 
} 
 
.circle-item:nth-of-type(2) > span, 
.circle-item:nth-of-type(3) > span, 
.circle-item:nth-of-type(4) > span{ 
  right: auto; 
  left: calc(100% + 15px); 
  text-align: left; 
}

<div class="circle"> 
  <div class="circle-item circle-item-1"><span>text</span></div> 
  <div class="circle-item circle-item-2"><span>text</span></div> 
  <div class="circle-item circle-item-3"><span>text</span></div> 
  <div class="circle-item circle-item-4"><span>text</span></div> 
  <div class="circle-item circle-item-5"><span>text</span></div> 
  <div class="circle-item circle-item-6"><span>text</span></div> 
</div>

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  display: flex; 
  justify-content: center; 
}

<div class="wrapper"> 
    <svg width="50%" height="50%" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
        <circle cx="95" cy="35" r="20" fill="none" stroke="black" stroke-width="1" /> 
        <g fill="white" stroke="black" stroke-width="1"> 
            <circle cx="105" cy="18" r="5" /> 
            <circle cx="85" cy="18" r="5" /> 
            <circle cx="115" cy="35" r="5" /> 
            <circle cx="75" cy="35" r="5" /> 
            <circle cx="105" cy="52" r="5" /> 
            <circle cx="85" cy="52" r="5" /> 
        </g> 
        <g font-size="10px" font-family="Arial"> 
            <text x="45" y="20">Lorem</text> 
            <text x="40" y="37">Ipsum</text> 
            <text x="50" y="55">Dolor</text> 
            <text x="115" y="55">Sit</text> 
            <text x="122" y="37">Amet</text> 
            <text x="120" y="20">Ist</text> 
        </g> 
    </svg> 
</div>