Notas de cata
Cítrico, Caramelo, Chocolate
HTML + CSSFilter
Aromarad für Kaffee
Ein Verkostungsrad mit zwei Ringen: Tippe auf eine Familie, um beide Noten zu wählen, oder wähle die Noten einzeln.
Einstellungen
16px
1x
Code
<div class="uvq05-fw"><p class="hd">Verkostungsnoten</p><svg viewBox="-74 -74 148 148" role="group" aria-label="Verkostungsnoten"><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="Fruchtig"/><text transform="translate(21.92 -21.92) rotate(45)" font-size="6.4">Fruchtig</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="Rote Beeren"/><text transform="translate(22.00 -53.12) rotate(22.5)" font-size="5.4">Rote Beeren</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="Zitrus"/><text transform="translate(53.12 -22.00) rotate(67.5)" font-size="5.4">Zitrus</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="Blumig"/><text transform="translate(21.92 21.92) rotate(315)" font-size="6.4">Blumig</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="Schwarztee"/><text transform="translate(22.00 53.12) rotate(337.5)" font-size="5.4">Schwarztee</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="Süß"/><text transform="translate(-21.92 21.92) rotate(405)" font-size="6.4">Süß</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="Karamell"/><text transform="translate(-22.00 53.12) rotate(382.5)" font-size="5.4">Karamell</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="Schokolade"/><text transform="translate(-53.12 22.00) rotate(427.5)" font-size="5.4">Schokolade</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="Röstig"/><text transform="translate(-21.92 -21.92) rotate(315)" font-size="6.4">Röstig</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="Nüsse"/><text transform="translate(-53.12 -22.00) rotate(292.5)" font-size="5.4">Nüsse</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="Getreide"/><text transform="translate(-22.00 -53.12) rotate(337.5)" font-size="5.4">Getreide</text></g><circle class="hb" r="17"/><text class="cl" y="-3.5">Notizen</text><text class="cn" y="9">3</text></svg><p class="ls" aria-live="polite">Zitrus, Karamell, Schokolade</p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Kaffeeröstereien, Weinhandlungen und Teemarken beschreiben Geschmack mit Aromarädern, und dieses dient zugleich als Filter. Das SVG-Diagramm hat vier Familien im inneren Ring und acht Noten außen; jedes Segment ist eine fokussierbare Checkbox, Familien zeigen einen gemischten Zustand, wenn nur eine Note aktiv ist, und die Mitte zählt die gewählten Noten.
Die Segmentfarben stehen im Code, die Hauptfarbe bestimmt die Mitte und die zweite ihre Füllung. Tausch Familien und Noten gegen Hopfen, Parfüms oder Käse und halte die Namen kurz, damit sie auf den Ring passen.