Radial Tree in HTML, CSS and JavaScript

const genres = [['Rock', ['Punk', 'Indie', 'Metal']], ['Jazz', ['Swing', 'Bebop']], ['Pop', ['Dance', 'K-pop']]];
const cx = 200, cy = 160, inner = 60, outer = 130;
const all = genres.flatMap(g => g[1]);
const at = (r, a) => [cx + r * Math.sin(a), cy - r * Math.cos(a)];
let i = 0;

drawCircle(cx, cy, 8, '#333');
genres.forEach(([name, styles]) => {
  const angles = styles.map(() => (i++ + 0.5) / all.length * Math.PI * 2);
  const [gx, gy] = at(inner, (angles[0] + angles[angles.length - 1]) / 2);
  drawLine(cx, cy, gx, gy, '#f4a259', 2); drawCircle(gx, gy, 6, '#f4a259');
  angles.forEach((a, k) => { const [x, y] = at(outer, a); drawLine(gx, gy, x, y, '#f4a259'); drawCircle(x, y, 4, '#f4a259'); drawText(...at(outer + 12, a), styles[k], 'middle'); });
});

const svg = document.querySelector('svg');
function make(tag, attrs) {
  const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (const k in attrs) n.setAttribute(k, attrs[k]);
  svg.appendChild(n);
  return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
  return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
  const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
  t.textContent = str;
  return t;
}