Notas de cata
Cítrico, Caramelo, Chocolate
HTML + CSSFilters
Coffee flavour wheel
A two-ring tasting wheel: tap a family to select both of its notes, or pick the notes one by one.
Settings
16px
1x
Code
<div class="uvq05-fw"><p class="hd">Tasting notes</p><svg viewBox="-74 -74 148 148" role="group" aria-label="Tasting notes"><g class="s" style="--cl:#e4572e"><path class="fm" d="M0.00 -42.00A42 42 0 0 1 42.00 0.00L20.00 0.00A20 20 0 0 0 0.00 -20.00Z" tabindex="0" role="checkbox" aria-checked="false" aria-label="Fruity"/><text transform="translate(21.92 -21.92) rotate(45)" font-size="6.4">Fruity</text></g><g class="s" style="--cl:#e4572e"><path class="nt" d="M0.00 -71.00A71 71 0 0 1 50.20 -50.20L31.11 -31.11A44 44 0 0 0 0.00 -44.00Z" tabindex="0" role="checkbox" aria-checked="false" aria-label="Red berries"/><text transform="translate(22.00 -53.12) rotate(22.5)" font-size="5.4">Red berries</text></g><g class="s" style="--cl:#e4572e"><path class="nt" d="M50.20 -50.20A71 71 0 0 1 71.00 0.00L44.00 0.00A44 44 0 0 0 31.11 -31.11Z" tabindex="0" role="checkbox" aria-checked="true" aria-label="Citrus"/><text transform="translate(53.12 -22.00) rotate(67.5)" font-size="5.4">Citrus</text></g><g class="s" style="--cl:#b5179e"><path class="fm" d="M42.00 0.00A42 42 0 0 1 0.00 42.00L0.00 20.00A20 20 0 0 0 20.00 0.00Z" tabindex="0" role="checkbox" aria-checked="false" aria-label="Floral"/><text transform="translate(21.92 21.92) rotate(315)" font-size="6.4">Floral</text></g><g class="s" style="--cl:#b5179e"><path class="nt" d="M71.00 0.00A71 71 0 0 1 50.20 50.20L31.11 31.11A44 44 0 0 0 44.00 0.00Z" tabindex="0" role="checkbox" aria-checked="false" aria-label="Jasmine"/><text transform="translate(53.12 22.00) rotate(292.5)" font-size="5.4">Jasmine</text></g><g class="s" style="--cl:#b5179e"><path class="nt" d="M50.20 50.20A71 71 0 0 1 0.00 71.00L0.00 44.00A44 44 0 0 0 31.11 31.11Z" tabindex="0" role="checkbox" aria-checked="false" aria-label="Black tea"/><text transform="translate(22.00 53.12) rotate(337.5)" font-size="5.4">Black tea</text></g><g class="s" style="--cl:#e09f3e"><path class="fm" d="M0.00 42.00A42 42 0 0 1 -42.00 0.00L-20.00 0.00A20 20 0 0 0 0.00 20.00Z" tabindex="0" role="checkbox" aria-checked="false" aria-label="Sweet"/><text transform="translate(-21.92 21.92) rotate(405)" font-size="6.4">Sweet</text></g><g class="s" style="--cl:#e09f3e"><path class="nt" d="M0.00 71.00A71 71 0 0 1 -50.20 50.20L-31.11 31.11A44 44 0 0 0 0.00 44.00Z" tabindex="0" role="checkbox" aria-checked="true" aria-label="Caramel"/><text transform="translate(-22.00 53.12) rotate(382.5)" font-size="5.4">Caramel</text></g><g class="s" style="--cl:#e09f3e"><path class="nt" d="M-50.20 50.20A71 71 0 0 1 -71.00 0.00L-44.00 0.00A44 44 0 0 0 -31.11 31.11Z" tabindex="0" role="checkbox" aria-checked="true" aria-label="Chocolate"/><text transform="translate(-53.12 22.00) rotate(427.5)" font-size="5.4">Chocolate</text></g><g class="s" style="--cl:#7f5539"><path class="fm" d="M-42.00 0.00A42 42 0 0 1 -0.00 -42.00L-0.00 -20.00A20 20 0 0 0 -20.00 0.00Z" tabindex="0" role="checkbox" aria-checked="false" aria-label="Roasted"/><text transform="translate(-21.92 -21.92) rotate(315)" font-size="6.4">Roasted</text></g><g class="s" style="--cl:#7f5539"><path class="nt" d="M-71.00 0.00A71 71 0 0 1 -50.20 -50.20L-31.11 -31.11A44 44 0 0 0 -44.00 0.00Z" tabindex="0" role="checkbox" aria-checked="false" aria-label="Nuts"/><text transform="translate(-53.12 -22.00) rotate(292.5)" font-size="5.4">Nuts</text></g><g class="s" style="--cl:#7f5539"><path class="nt" d="M-50.20 -50.20A71 71 0 0 1 -0.00 -71.00L-0.00 -44.00A44 44 0 0 0 -31.11 -31.11Z" tabindex="0" role="checkbox" aria-checked="false" aria-label="Cereal"/><text transform="translate(-22.00 -53.12) rotate(337.5)" font-size="5.4">Cereal</text></g><circle class="hb" r="17"/><text class="cl" y="-3.5">Notes</text><text class="cn" y="9">3</text></svg><p class="ls" aria-live="polite">Citrus, Caramel, Chocolate</p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
See all FiltersWhere to use it
Coffee roasters, wine shops and tea brands describe taste with flavour wheels, and this one doubles as a filter. The SVG sunburst has four families in the inner ring and eight notes outside; each segment is a focusable checkbox, families show a mixed state when only one note is on, and the centre counts the chosen notes.
Segment colours live in the code, while the main colour sets the hub and the second its fill. Swap the families and notes for hops, perfumes or cheeses, and keep note names short so they fit along the ring.