Radar Chart

A pentagon web where the data shape springs out from the center

SpeedStyleA11yMotionCopy

Create a radar (spider) chart that springs to life. An SVG with 5 axes arranged around a center point (vertex i sits at angle i/5 * 360deg - 90deg). Draw 3 concentric polygon rings at 33% / 66% / 100% of the radius plus a spoke line per axis, all in a 1px hairline stroke. The data polygon (accent stroke 2px, accent fill at 18% opacity, round joins) scales in from the center with a soft spring (from scale 0, stiffness 200, damping 22, 0.25s delay, transform-origin at the center). After the shape lands, a 3px accent dot pops onto each vertex with a spring (stiffness 500, damping 22) and a 0.07s stagger, followed by the monospace axis labels fading in just outside the outer ring, staggered the same way. Accessibility: give the SVG role="img" and an aria-label naming the strongest axis (e.g. "Radar chart of site scores, motion is the strongest axis"). If prefers-reduced-motion is set, render the finished chart immediately. Trigger the entrance when the chart scrolls into view. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data