How to add lines from the center?

Question

Context: I am using anki and I would like to be able to make flower diagrams like []

Here is my code

{{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>

Here is what I have in my 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>

I tried using GPT but it kept getting the lines wrong. Does anybody know how I could achieve the effect of having lines from the center connecting to the text?

(https://i.stack.imgur.com/YJcrM.png)

Answer 1

You can try this, maybe you want all lines to be placed inside the middle column, you can edit the code accordingly.

p.s I used css variables for equal spacing and equal height/width of the line.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.outer {
    display: flex;
    --gap: 15px;
    --line-length: 30px;
    --line-weight: 2px;
    gap: var(--gap);
}
.col {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}
.text {
    font: 400 20px/1 sans-serif;
}
.mid-col {
    flex-direction: column;
}
.line {
    background-color: rgb(58, 58, 58);
}
.hr-line {
    width: var(--line-length);
    height: var(--line-weight);
}
.vr-line {
    height: var(--line-length);
    width: var(--line-weight);
}

<div class="outer">
    <div class="col">
        <span class="text">test4</span>
        <span class="line hr-line"></span>
    </div>
    <div class="col mid-col">
        <span class="text">test1</span>
        <span class="line vr-line"></span>
        <span class="text">word</span>
        <span class="line vr-line"></span>
        <span class="text">test2</span>
    </div>
    <div class="col">
        <span class="line hr-line"></span>
        <span class="text">test3</span>
    </div>
</div>