Design System
Recipe Radar Chart
Multi-axis visualization for recipe attribute comparison.
Overview
The radar chart renders recipe profiles across six axes: sweetness, acidity, richness, complexity, spice, and texture. Each axis ranges from 0–100, forming a polygon overlay that lets users visually compare recipes at a glance.
Axis Definitions
Sweetness
Sugar content and perceived sweetness level.
Acidity
Tartness from citrus, vinegar, or fermentation.
Richness
Fat density, mouthfeel, and umami depth.
Complexity
Number of distinct flavor layers present.
Spice
Capsaicin heat or aromatic spice intensity.
Texture
Crunch, creaminess, chew, or viscosity.
Color Palette
Violet#8B5CF6
Pink#F472B6
Dark BG#0A0612
Gridrgba(139,92,246,0.15)
Usage
The radar chart appears on recipe detail pages and comparison views. Hovering an axis highlights its value; toggling a second recipe overlays a dashed polygon in pink for direct comparison. The component is pure SVG with no external charting library dependency.