# Is is possible to bend a row of divs around a point?

This is the result i want to make with divs How can i achieve this result?

Edit: my goal was not to use divs only that i didn’t want to use canvas. But i haven’t thought about SVG’s so thank you!

Here’s a quick and dirty alternative example using SVG arcs

const cx = 100; // Circle centre
const cy = 100;
const width = 40; // Width of line
const TwoPi = Math.PI * 2;

// Compute circumference
const circ = TwoPi * radius;
const height = circ / 12; // Length of each segment
const parent = document.getElementById("curve");

for (let i = 0; i < circ; i += height) {
let seg = document.createElementNS("http://www.w3.org/2000/svg", "path");

let rs = (i / circ) * TwoPi;
let re = ((i + height) / circ) * TwoPi;

let ss = Math.sin(rs);
let cs = Math.cos(rs);
let se = Math.sin(re);
let ce = Math.cos(re);

// Build wedge path element
seg.setAttribute("d",
`L\${(ce * (radius - width)) + cx},\${(se * (radius - width)) + cy}` +
`A\${radius - width},\${radius - width} \${((re - rs) / Math.PI) * -180},0,0 \${(cs * (radius - width)) + cx},\${(ss * (radius - width)) + cy}z`
);

seg.setAttribute("class", "pathSeg");

parent.appendChild(seg);
}
.pathSeg { stroke: black; stroke-width: 3px; fill: white }
.pathSeg:hover { fill: red }
<svg width="200" height="200" viewBox="0 0 200 200">
<g id="curve"></g>
</svg>