Context：我正在使用ANKI，我希望能够制作像[

]这样的花图

这是我的代码

{{Answer}}

<!-- Add this in the back template -->

<style>
/**
 Copyright 2019 Itay Grudev
 License: MIT
 */

.ciclegraph {
  position: relative;
  width: 500px;
  height: 500px;
  margin: calc(100px / 2 + 0px);
}

.ciclegraph:before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  /* Remove the border property to remove the circle outline */
  /* border: 2px solid teal; */
  width: calc(100% - 2px * 2);
  height: calc(100% - 2px * 2);
  border-radius: 50%;
}

.ciclegraph .circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 100px;
  height: 100px;
  margin: calc(-100px / 2);
  background: rgba(0, 128, 128, 0.0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-text {
  color: white; /* Adjust the text color as needed */
  font-size: 14px; /* Adjust the font size as needed */
}

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px; /* Adjust the font size as needed */
  color: white; /* Adjust the text color as needed */
  z-index: 1; /* Ensure text appears above the circles */
}

</style>

<script>
document.querySelectorAll('.ciclegraph').forEach((ciclegraph) => {
  let circles = ciclegraph.querySelectorAll('.circle');
  let angle = 360 - 90,
    dangle = 360 / circles.length;
  for (let i = 0; i < circles.length; ++i) {
    let circle = circles[i];
    angle += dangle;
    circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`;
  }
});
</script>

字符串
这是我在我的html

<div class="ciclegraph">
<div class="circle">
  <div class="circle-text">a</div>
</div>
<div class="circle">
  <div class="circle-text">Test 1</div>
</div>
<div class="circle">
  <div class="circle-text">Test 2</div>
</div>
  <div class="center-text"> Question</div>
</div>

型
我试过用GPT，但它总是把线弄错。有人知道我怎么才能达到从中心连接到文本的效果吗？
（https://i.stack.imgur.com/YJcrM.png）