Venn-Diagramm als Filter
Drei überlappende Kreise: Schalte mehrere Ernährungsformen ein, und nur die Fläche mit Produkten, die alle erfüllen, wird schraffiert.
Einstellungen
Code
<fieldset class="uvq05-vn"><legend>Ernährung</legend><svg viewBox="0 0 200 160" aria-hidden="true"><defs><clipPath id="uvq05-vn-c0"><circle cx="78" cy="64" r="46"/></clipPath><clipPath id="uvq05-vn-c1"><circle cx="122" cy="64" r="46"/></clipPath><clipPath id="uvq05-vn-c2"><circle cx="100" cy="102" r="46"/></clipPath><pattern id="uvq05-vn-h" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="6" height="6" fill="currentColor" fill-opacity=".85"/><rect width="2.4" height="6" fill="#fff" fill-opacity=".4"/></pattern></defs><circle class="cc c0" cx="78" cy="64" r="46" style="--cl:var(--c1)"/><circle class="cc c1" cx="122" cy="64" r="46" style="--cl:var(--c2)"/><circle class="cc c2" cx="100" cy="102" r="46" style="--cl:#d97706"/><g class="r r1"><circle cx="78" cy="64" r="46" fill="url(#uvq05-vn-h)"/></g><g class="r r2"><circle cx="122" cy="64" r="46" fill="url(#uvq05-vn-h)"/></g><g class="r r3"><g clip-path="url(#uvq05-vn-c0)"><circle cx="122" cy="64" r="46" fill="url(#uvq05-vn-h)"/></g></g><g class="r r4"><circle cx="100" cy="102" r="46" fill="url(#uvq05-vn-h)"/></g><g class="r r5"><g clip-path="url(#uvq05-vn-c0)"><circle cx="100" cy="102" r="46" fill="url(#uvq05-vn-h)"/></g></g><g class="r r6"><g clip-path="url(#uvq05-vn-c1)"><circle cx="100" cy="102" r="46" fill="url(#uvq05-vn-h)"/></g></g><g class="r r7"><g clip-path="url(#uvq05-vn-c0)"><g clip-path="url(#uvq05-vn-c1)"><circle cx="100" cy="102" r="46" fill="url(#uvq05-vn-h)"/></g></g></g></svg><div class="ch"><label style="--cl:var(--c1)"><input type="checkbox" class="i0" checked><span>Vegan</span></label><label style="--cl:var(--c2)"><input type="checkbox" class="i1" checked><span>Glutenfrei</span></label><label style="--cl:#d97706"><input type="checkbox" class="i2"><span>Bio</span></label></div><p class="rs"><span class="ks"><b class="k k0">240</b><b class="k k1">64</b><b class="k k2">88</b><b class="k k3">23</b><b class="k k4">120</b><b class="k k5">41</b><b class="k k6">52</b><b class="k k7">15</b></span> <span>Produkte</span></p></fieldset>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
Wenn Filter mit UND verknüpft sind, sieht man nicht immer, warum die Treffer schrumpfen, und ein Venn-Diagramm macht die Logik sichtbar. Drei SVG-Kreise teilen sich Clip-Pfade, die Schnittmenge aller aktiven Mengen erscheint schraffiert, darunter steht die Zahl für diesen Bereich. Gesteuert wird alles über Checkboxen und CSS-Selektoren mit :has.
Die ersten beiden Kreise nehmen Haupt- und Zweitfarbe, der dritte Bernstein. Benenne die Mengen für Allergene, Funktionen oder Fähigkeiten um, trag die Zahlen jeder Kombination ein und lass die Labels neben ihrer Kreisfarbe.