Al tratar de crear un gráfico polar/radar, quiero crear secciones separadas del primer círculo en función de la longitud de los elementos de la matriz. E imprima cada elemento. nombre en cada segmento por igual y estilo de texto en Arc. Ancho del círculo 720px y alto 720px.

Cuando mapeo a través de la matriz e imprimo nombres, crea un círculo separado para cada nombre porque estoy mapeando fuera del dev.

Cualquier idea, las soluciones son apreciadas. Gracias

 const items = [{ "id": 1, "name": "javascript" }, { "id": 2, "name": "HTML" }, { "id": 1, "name": "CSS" }] const length = items?.length ?? 0 const width = 720 const slice = width / length return ( <div> { items?.map(item => <div className={styles.circle} style={{width: `${slice}}}> <p>{item.name}</p> </div> )} </div> ) //css .circle { height: 720px; border: solid 1px #fafafa; background: #fafafa; border-radius: 50%; padding: 20px; position: relative; }