<svg viewBox="0 0 1300 1000" xmlns="http://www.w3.org/2000/svg">
  <circle r="300" cx="650" cy="500" class="circle" />
  <circle r="300" cx="650" cy="500" class="circle2 active" />
  <circle r="300" cx="650" cy="500" class="circle3" />
  <circle r="300" cx="650" cy="500" class="circle4" />
  <circle r="300" cx="650" cy="500" class="circle5" />

  <g class="obj1">
    <rect width="400" height="60" ry="10" />
    <circle r="40" cx="23" cy="29" />
    <text x="80" y="38" class="txt">lorem ipsum sit ammed</text>
    <text class="emodji" x="3" y="40">😇</text>
    <text class="ok" x="360" y="40">✌️</text>
  </g>

  <g class="obj2 active">
    <rect width="300" height="60" ry="10" />
    <circle r="40" cx="23" cy="29" />
    <text x="80" y="38" class="txt">lorem ipsum sit</text>
    <text class="emodji" x="3" y="40">😇</text>
    <text class="ok" x="260" y="40">✌️</text>
  </g>

  <g class="obj3">
    <rect width="300" height="60" ry="10" />
    <circle r="40" cx="23" cy="29" />
    <text x="80" y="38" class="txt">lorem ipsum sit</text>
    <text class="emodji" x="3" y="40">😇</text>
    <text class="ok" x="260" y="40">✌️</text>
  </g>

  <g class="obj4">
    <rect width="280" height="60" ry="10" x="-260" />
    <circle r="40" cx="23" cy="29" />
    <text x="-200" y="38" class="txt">lorem ipsum sit</text>
    <text class="emodji" x="3" y="40">😇</text>
    <text class="ok" x="-240" y="40">✌️</text>
  </g>

  <g class="obj5">
    <rect width="260" height="60" ry="10" x="-260" />
    <circle r="40" cx="23" cy="29" />
    <text x="-210" y="38" class="txt">lorem ipsum sit</text>
    <text class="emodji" x="3" y="40">😇</text>
    <text class="ok" x="-240" y="40">✌️</text>
  </g>

</svg>

svg {
  border: 1px solid transparent;
}

g {
  cursor: pointer;
}

.circle {
  fill: none;
  stroke: #000;
  stroke-width: 5;
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(-90deg);
  stroke-dasharray: 450 1884;
}

.circle2 {
  fill: none;
  stroke: #000;
  stroke-width: 5;
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(-5deg);
  stroke-dasharray: 250 1884;
}

.circle3 {
  fill: none;
  stroke: #000;
  stroke-width: 5;
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(42deg);
  stroke-dasharray: 270 1884;
}

.circle4 {
  fill: none;
  stroke: #000;
  stroke-width: 5;
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(93deg);
  stroke-dasharray: 360 1884;
}

.circle5 {
  fill: none;
  stroke: #000;
  stroke-width: 5;
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(162deg);
  stroke-dasharray: 565 1884;
}

.txt {
  font-size: 20px;
}

.obj1 {
  transform: translate(860px, 280px);
}

.obj2 {
  transform: translate(910px, 550px);
}

.obj3 {
  transform: translate(670px, 760px);
}

.obj4 {
  transform: translate(420px, 680px);
}

.obj5 {
  transform: translate(340px, 400px);
}

g rect {
  fill: #ccc;
}

g circle {
  fill: #ccc;
  stroke: #000;
  stroke-width: 2;
}

.emodji {
  font-size: 30px;
}

.ok {
  font-size: 26px;
}

g.active circle,
g.active rect {
  fill: tomato;
  stroke: #fff;
  stroke-width: 2;
}

g.active .txt {
  fill: #fff;
  stroke: none;
}

g.active .emodji,
g.active .ok {
  stroke: none;
}

.active {
  stroke: tomato;
  stroke-width: 8;
}