Diagramme de Venn de filtres
Trois cercles qui se croisent : active plusieurs régimes et seule la zone des produits qui les respectent tous est hachurée.
Réglages
Code
<fieldset class="uvq05-vn"><legend>Régime</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>Végan</span></label><label style="--cl:var(--c2)"><input type="checkbox" class="i1" checked><span>Sans gluten</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>produits</span></p></fieldset>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
Quand les filtres se combinent avec ET, on ne voit pas toujours pourquoi les résultats diminuent, et un diagramme de Venn rend cette logique visible. Trois cercles SVG partagent des tracés de découpe, l'intersection des ensembles actifs est dessinée en hachures et le nombre de produits de cette zone s'affiche dessous. Tout passe par des cases à cocher et des sélecteurs CSS :has.
Les deux premiers cercles prennent la couleur principale et la seconde, le troisième l'ambre. Renomme les ensembles pour des allergènes, des fonctions ou des compétences, mets à jour les chiffres de chaque combinaison et garde les libellés près de la couleur de leur cercle.