Radar / Spider Chart

A read-only, CSS-only radar: one filled polygon per series over a circular grid. The server computes each vertex from polar coordinates (value × radius at each axis angle) into --points; CSS clips the series to that polygon. No JavaScript.

Player comparison

Attribute ratings (0-100)
Attribute	Player A	Player B
Speed	90	50
Power	60	80
Range	70	40
Defense	50	90
Agility	80	50
Stamina	60	70

Speed Power Range Defense Agility Stamina

Markup

<!-- Wrap the radar and its sibling radial label band in a positioned box.
     --casca-radar-axes = number of spokes; each series' --points is a
     polygon (one "x% y%" pair per axis, clockwise from top). -->
<div style="position: relative">
  <div class="casca-radar" style="--casca-radar-axes: 6" aria-hidden="true">
    <div class="casca-radar-series"
         style="--points: 50% 5%, 76% 35%, 80% 68%, 50% 75%, 15% 70%, 24% 35%;
                --color: var(--casca-color-1)"></div>
    <!-- ...one .casca-radar-series per series... -->
  </div>

  <!-- Spoke labels: one tick per axis, placed by --index (0 = top, clockwise). -->
  <div class="casca-axis" data-axis="radial" style="--casca-axis-count: 6">
    <span class="casca-axis-tick" style="--index: 0">Speed</span>
    <span class="casca-axis-tick" style="--index: 1">Power</span>
    <!-- ...one tick per spoke... -->
  </div>
</div>