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!

Answer

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 radius = 100; // Radius of circle
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",
        `M${(cs * radius) + cx},${(ss * radius) + cy}` +
        `A${radius},${radius} ${((re - rs) / Math.PI) * 180},0,1 ${(ce * radius) + cx},${(se * radius) + cy}` +
        `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>