Diagrama de Venn de filtros
Tres círculos que se cruzan: activa varias dietas y se raya solo la zona de productos que cumplen todas.
Ajustes
Código
<fieldset class="uvq05-vn"><legend>Dieta</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>Vegano</span></label><label style="--cl:var(--c2)"><input type="checkbox" class="i1" checked><span>Sin gluten</span></label><label style="--cl:#d97706"><input type="checkbox" class="i2"><span>Ecológico</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>productos</span></p></fieldset>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Ver todos: FiltrosDónde usarlo
Cuando los filtros se combinan con Y, no siempre se entiende por qué bajan los resultados, y un diagrama de Venn hace visible esa lógica. Tres círculos SVG comparten trazados de recorte, la intersección de los conjuntos activos se dibuja rayada y debajo aparece el recuento de esa zona. Todo funciona con casillas y selectores :has de CSS.
Los dos primeros círculos usan el color principal y el secundario, y el tercero ámbar. Renombra los conjuntos para alérgenos, funciones o habilidades, actualiza los recuentos de cada combinación y deja las etiquetas junto al color de su círculo.