Venn diagram filter
Three overlapping circles: switch on several diets and only the area of products that meet them all gets hatched.
Settings
Code
<fieldset class="uvq05-vn"><legend>Diet</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>Gluten free</span></label><label style="--cl:#d97706"><input type="checkbox" class="i2"><span>Organic</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>products</span></p></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
See all FiltersWhere to use it
When filters combine with AND, people do not always see why results shrink, and a Venn diagram makes the logic visible. Three SVG circles share clip paths, the intersection of every active set is drawn as a hatched region, and a count for that region appears below. Everything is driven by checkboxes and CSS :has selectors.
The first two circles take the main and second colours and the third uses amber. Rename the sets for allergens, features or skills, update the counts for each combination, and keep the labels next to their circle colours.