Notas de cata

AfrutadoFrutos rojosCítricoFloralJazmínTé negroDulceCarameloChocolateTostadoFrutos secosCerealNotas3

Cítrico, Caramelo, Chocolate

HTML + CSSFiltros

Rueda de aromas del café

Una rueda de cata en dos anillos: toca una familia para marcar sus dos notas o elige las notas una a una.

Ajustes

16px
1x

Código

<div class="uvq05-fw"><p class="hd">Notas de cata</p><svg viewBox="-74 -74 148 148" role="group" aria-label="Notas de cata"><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="Afrutado"/><text transform="translate(21.92 -21.92) rotate(45)" font-size="6.4">Afrutado</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="Frutos rojos"/><text transform="translate(22.00 -53.12) rotate(22.5)" font-size="5.4">Frutos rojos</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="Cítrico"/><text transform="translate(53.12 -22.00) rotate(67.5)" font-size="5.4">Cítrico</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="Jazmín"/><text transform="translate(53.12 22.00) rotate(292.5)" font-size="5.4">Jazmín</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="Té negro"/><text transform="translate(22.00 53.12) rotate(337.5)" font-size="5.4">Té negro</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="Dulce"/><text transform="translate(-21.92 21.92) rotate(405)" font-size="6.4">Dulce</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="Caramelo"/><text transform="translate(-22.00 53.12) rotate(382.5)" font-size="5.4">Caramelo</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="Tostado"/><text transform="translate(-21.92 -21.92) rotate(315)" font-size="6.4">Tostado</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="Frutos secos"/><text transform="translate(-53.12 -22.00) rotate(292.5)" font-size="5.4">Frutos secos</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">Notas</text><text class="cn" y="9">3</text></svg><p class="ls" aria-live="polite">Cítrico, Caramelo, Chocolate</p></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Filtros

Ver todos: Filtros

Dónde usarlo

Los tostadores de café, las vinotecas y las marcas de té describen el sabor con ruedas de aromas, y esta sirve además de filtro. El gráfico SVG tiene cuatro familias en el anillo interior y ocho notas fuera; cada segmento es una casilla con foco, las familias muestran un estado mixto si solo hay una nota marcada y el centro cuenta las notas elegidas.

Los colores de cada segmento están en el código; el color principal define el centro y el secundario su relleno. Cambia familias y notas por lúpulos, perfumes o quesos y deja nombres cortos para que quepan en el anillo.