Notas de cata
Cítrico, Caramelo, Chocolate
Roue des arômes du café
Une roue de dégustation à deux anneaux : touche une famille pour cocher ses deux notes ou choisis les notes une à une.
Réglages
Code
<div class="uvq05-fw"><p class="hd">Notes de dégustation</p><svg viewBox="-74 -74 148 148" role="group" aria-label="Notes de dégustation"><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="Fruité"/><text transform="translate(21.92 -21.92) rotate(45)" font-size="6.4">Fruité</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="Fruits rouges"/><text transform="translate(22.00 -53.12) rotate(22.5)" font-size="5.4">Fruits rouges</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="Agrumes"/><text transform="translate(53.12 -22.00) rotate(67.5)" font-size="5.4">Agrumes</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="Jasmin"/><text transform="translate(53.12 22.00) rotate(292.5)" font-size="5.4">Jasmin</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="Thé noir"/><text transform="translate(22.00 53.12) rotate(337.5)" font-size="5.4">Thé noir</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="Doux"/><text transform="translate(-21.92 21.92) rotate(405)" font-size="6.4">Doux</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="Chocolat"/><text transform="translate(-53.12 22.00) rotate(427.5)" font-size="5.4">Chocolat</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="Torréfié"/><text transform="translate(-21.92 -21.92) rotate(315)" font-size="6.4">Torréfié</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="Fruits à coque"/><text transform="translate(-53.12 -22.00) rotate(292.5)" font-size="5.4">Fruits à coque</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="Céréales"/><text transform="translate(-22.00 -53.12) rotate(337.5)" font-size="5.4">Céréales</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">Agrumes, Caramel, Chocolat</p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Voir tout : FiltresOù l’utiliser
Les torréfacteurs, les cavistes et les marques de thé décrivent le goût avec des roues des arômes, et celle-ci sert aussi de filtre. Le graphique SVG compte quatre familles sur l'anneau intérieur et huit notes à l'extérieur ; chaque segment est une case focalisable, les familles passent en état mixte quand une seule note est cochée et le centre compte les notes choisies.
Les couleurs des segments sont dans le code ; la couleur principale règle le centre et la seconde son fond. Remplace familles et notes par des houblons, des parfums ou des fromages et garde des noms courts pour l'anneau.