animation - Draw a circle with arcs in CSS 3

Question

I want to draw a circle with arcs in CSS 3 so that I have 5 points and each point can be a link. The reason I want to do it with arcs is because I want to animate an arc when the user hovers over a point. For example if the use hovers over the second point, the line / arc connecting the first and the second point has a fill animation. Is there a way to do it with CSS or would it be better to use SVGs?

.circle {
  position: relative;
  width: 530px;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
}

.dot1 {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dot2 {
  top: 34.5%;
  left: 2%;
  transform: translate(-50%, -50%);
}
.dot3 {
  top: 34.5%;
  left: 98%;
  transform: translate(-50%, -50%);
}
.dot4 {
  top: 90%;
  left: 21%;
  transform: translate(-50%, -50%);
}
.dot5 {
  top: 90%;
  left: 79%;
  transform: translate(-50%, -50%);
}

<div class="circle">
<svg width="530" height="530" viewBox="0 0 530 530" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M265 529C410.803 529 529 410.803 529 265C529 119.197 410.803 1 265 1C119.197 1 1 119.197 1 265C1 410.803 119.197 529 265 529Z" stroke="#DDD7E3" />
<path d="M265 1L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L109.84 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L420.16 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M109.84 478.6L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L516.04 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6L516.04 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M516.04 183.4H13.96" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M516.04 183.4L109.84 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6H109.84" stroke="#DDD7E3" stroke-miterlimit="10"/>
</svg>

  <div class="dot dot1"></div>
  <div class="dot dot2"></div>
    <div class="dot dot3"></div>
    <div class="dot dot4"></div>
    <div class="dot dot5"></div>
</div>

question from:https://stackoverflow.com/questions/66045452/draw-a-circle-with-arcs-in-css-3

Answer 1

Instead of having divs as points you can use svg elements. Alternatively you can use the divs.

I'm calculating the position of the points on the main circle and using the coords of those points to draw the arcs.

You may try to redraw the lines using the coordinates of the points

Please read the comments in the code.

var SVG_NS = "http://www.w3.org/2000/svg";
var svg = document.querySelector("svg");

let points = [];
let arcs = [];
let c = { x: 265, y: 265 };// the center of the main circle
let r = 263;// the radius of the main circle
let n = 5;//number of points
let step = (2 * Math.PI) / n;// angle between each point

class Point {
  constructor(i) {
    this.p = {};
    this.p.cx = c.x + r * Math.cos(i);
    this.p.cy = c.y + r * Math.sin(i);
    this.p.r = 5;
    this.p.fill = "red";
    this.el = drawSVGelmt(this.p, "circle", circles);
  }
}


//create and push a new point on the points array
for (let i = -Math.PI / 2; i < (3 * Math.PI) / 2; i += step) {
  points.push(new Point(i));
}




for (let i = 0; i < points.length; i++) {
  let _i = i + 1 < points.length ? i + 1 : 0;
  let d = `M${points[i].p.cx},${points[i].p.cy}
           A${r}, ${r}, 0 0 1  ${points[_i].p.cx},${points[_i].p.cy}z`;
  let o = { d: d, fill: "skyBlue" };
  //create a new arc and push it to the arcs array for latter use
  arcs.push(drawSVGelmt(o, "path", arcsgroup));
}


//a function to draw a new svg element and append it to a parent
function drawSVGelmt(o, tag, parent) {
  let elmt = document.createElementNS(SVG_NS, tag);
  for (let name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}

svg{border:solid}

<svg width="530" height="530" viewBox="-5 -5 540 540" fill="none" xmlns="http://www.w3.org/2000/svg">
<path  d="M265 529C410.803 529 529 410.803 529 265C529 119.197 410.803 1 265 1C119.197 1 1 119.197 1 265C1 410.803 119.197 529 265 529Z" stroke="#f00" />
<path d="M265 1L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L109.84 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L420.16 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M109.84 478.6L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M265 1L516.04 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6L516.04 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6L13.96 183.4" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M516.04 183.4H13.96" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M516.04 183.4L109.84 478.6" stroke="#DDD7E3" stroke-miterlimit="10"/>
<path d="M420.16 478.6H109.84" stroke="#DDD7E3" stroke-miterlimit="10"/>
  
  
  <g id="arcsgroup"></g>  
  <g id="circles"></g>
</svg>