Skills Assessment Radar Chart — Free SVG Spider Chart UI

<div class="sar-card">
  <div class="sar-head">
    <h2>Skills assessment</h2>
    <p class="sar-sub">Alex Morgan &middot; Senior Frontend Engineer candidate</p>
  </div>
  <div class="sar-chart-wrap">
    <svg class="sar-svg" id="sarSvg" viewBox="0 0 320 320"></svg>
  </div>
  <ul class="sar-legend" id="sarLegend">
    <li><span class="sar-dot" style="background:#6d5efc"></span>Candidate score</li>
    <li><span class="sar-dot sar-dot--outline"></span>Role benchmark</li>
  </ul>
</div>

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:#0c0e15;color:#e7e9f2;padding:40px 16px;display:flex;justify-content:center;min-height:100vh;align-items:center}
.sar-card{width:100%;max-width:460px;background:#12141f;border:1px solid #23273a;border-radius:18px;padding:26px}
.sar-head h2{margin:0 0 4px;font-size:19px}
.sar-sub{margin:0 0 10px;color:#9aa0b8;font-size:13px}
.sar-chart-wrap{display:flex;justify-content:center}
.sar-svg{width:100%;max-width:320px;height:auto}
.sar-axis-line{stroke:#23273a;stroke-width:1}
.sar-grid-ring{fill:none;stroke:#1c2032;stroke-width:1}
.sar-benchmark{fill:rgba(34,211,238,.08);stroke:#22d3ee;stroke-width:1.5;stroke-dasharray:4 3}
.sar-score{fill:rgba(109,94,252,.28);stroke:#6d5efc;stroke-width:2}
.sar-point{fill:#6d5efc;stroke:#0c0e15;stroke-width:2}
.sar-label{fill:#c7cade;font-size:11px;font-family:system-ui,sans-serif;text-anchor:middle}
.sar-legend{list-style:none;display:flex;gap:18px;justify-content:center;padding:14px 0 0;margin:0;border-top:1px solid #20232f}
.sar-legend li{display:flex;align-items:center;gap:6px;font-size:12px;color:#9aa0b8}
.sar-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.sar-dot--outline{background:transparent;border:1.5px dashed #22d3ee}

const axes = [
  { label: 'Communication', score: 4, benchmark: 3.5 },
  { label: 'Technical', score: 4.7, benchmark: 4 },
  { label: 'Leadership', score: 3, benchmark: 3.2 },
  { label: 'Problem Solving', score: 4.5, benchmark: 3.8 },
  { label: 'Collaboration', score: 4.2, benchmark: 3.6 },
  { label: 'Adaptability', score: 3.6, benchmark: 3.4 },
];
const maxValue = 5;
const axisCount = axes.length;
const size = 320;
const center = size / 2;
const maxRadius = 110;
const svg = document.getElementById('sarSvg');
const svgNs = 'http://www.w3.org/2000/svg';

// angle for axis i, starting straight up and going clockwise
function angleFor(index) {
  return index * (2 * Math.PI / axisCount) - Math.PI / 2;
}

// convert a value on a given axis into an absolute {x, y} point
function pointFor(index, value) {
  const angle = angleFor(index);
  const r = (value / maxValue) * maxRadius;
  return {
    x: center + r * Math.cos(angle),
    y: center + r * Math.sin(angle),
  };
}

function pointsAttr(values) {
  return values.map((v, i) => {
    const p = pointFor(i, v);
    return p.x.toFixed(2) + ',' + p.y.toFixed(2);
  }).join(' ');
}

function makeEl(tag, attrs) {
  const el = document.createElementNS(svgNs, tag);
  Object.keys(attrs).forEach((k) => el.setAttribute(k, attrs[k]));
  return el;
}

// background grid rings at 20/40/60/80/100% of maxRadius
[0.2, 0.4, 0.6, 0.8, 1].forEach((frac) => {
  const ringPoints = axes.map((_, i) => {
    const p = pointFor(i, maxValue * frac);
    return p.x.toFixed(2) + ',' + p.y.toFixed(2);
  }).join(' ');
  svg.appendChild(makeEl('polygon', { class: 'sar-grid-ring', points: ringPoints }));
});

// spokes from center to each axis's max point, plus axis labels
axes.forEach((axis, i) => {
  const outer = pointFor(i, maxValue);
  svg.appendChild(makeEl('line', {
    class: 'sar-axis-line', x1: center, y1: center, x2: outer.x.toFixed(2), y2: outer.y.toFixed(2),
  }));
  const labelPoint = pointFor(i, maxValue + 0.55);
  const label = makeEl('text', {
    class: 'sar-label', x: labelPoint.x.toFixed(2), y: labelPoint.y.toFixed(2),
  });
  label.textContent = axis.label;
  svg.appendChild(label);
});

// benchmark polygon (dashed) drawn first, score polygon (solid) drawn on top
svg.appendChild(makeEl('polygon', {
  class: 'sar-benchmark', points: pointsAttr(axes.map((a) => a.benchmark)),
}));
svg.appendChild(makeEl('polygon', {
  class: 'sar-score', points: pointsAttr(axes.map((a) => a.score)),
}));

// a small dot marker at each score vertex
axes.forEach((axis, i) => {
  const p = pointFor(i, axis.score);
  svg.appendChild(makeEl('circle', {
    class: 'sar-point', cx: p.x.toFixed(2), cy: p.y.toFixed(2), r: 3.5,
  }));
});