Post

Venn Diagrams

CSS Venn Diagrams

Incel

Excel

Incorrectly assuming something is a date

This page explores how to make responsive venn diagrams using CSS. The code on this page relies on a combination of CSS Grid, Container Queries, and the Shape-Outside property to create a responsive, text-wrapping Venn diagram.

Dumb enough to make meth

Meth Lab Operators

Smart enough to make meth

1. The Layout: CSS Grid

The "canvas" for the diagram is a CSS Grid. The .Venn container is divided into a 5x2 grid:

        
figure.Venn {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 5/3;
  max-width: 500px;
  margin: 0 auto;
  container-type: inline-size;
  align-content: center;
}

This specific aspect ratio (5/3 or ~1.67) is critical. Since the grid is 5 columns wide and 2 rows tall, this ratio ensures that a 1x1 unit in the grid is not square, but a 3x2 block (which the circles use) becomes a perfect square.

Drive-time DJs

Sisyphus

Bringing you the same great classic rock night after night

2. Positioning: Overlapping Areas

The circles are positioned using grid lines to explicitly overlap each other.

Circle One (Left): Starts at col 1, ends at col 4. Spans rows 1-3.
Circle Two (Right): Starts at col 3, ends at col 6. Spans rows 1-3.
Intersection (Middle): The overlapping area is explicitly defined as grid-column: 3 / 4.

By placing two generic divs into these overlapping grid areas, they naturally form the visual structure of a Venn diagram.

Chemical elements

H He Li Be B C N O F Na Mg Si P S Cl K Ti V Cr Fe Ni Cu Zn Ge As Se Br Kr Rb Sr Y Zr Nb Tc Ru Rn Pd Ag Cd Sn Sb Te I Xe Cs Ba Ce Pr Pm Sm Eu Gd Tb Dy Ho Er Tm Yb Lu Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At Rn Fr Ra Ac Th U Np Pu Am Cm Bk Lv Uup Uut Cn Rg Ds Hs Bh Sg Db Rf Lr No Fm Es Cf Uus Uuo

US States

Ak Az Ct De Hi Id Il Ia Ks Ky Me Ma Mi Ms Nv Nh Nj Nm Ny Nc Oh Ok Or Ri Sd Tn Tx Ut Vt Va Wa Wv Wi Wy

Ne Al Ar Ca Sc Mn Co Ga Mo In Pa La Nd Mt Md Fl

3. Rendering Circles

The circles themselves are simple divs turned into circles:

        
.Venn > .circle {
  border-radius: 50%; /* Makes the square div a circle */
  aspect-ratio: 1; /* Enforces 1:1 width-to-height ratio */
}

Strippers

Cats

I'm going to sit on your lap, but you can't touch me.

4. The "Magic": Text Wrapping

This is the most complex part. Normally, text inside a div flows in a rectangle. To make the text "flow" inside the curves of the circles or the leaf-shape of the intersection, the code uses shape-outside.

Inside each .circle or .shape div, there are two empty elements that are floated to the left and right.

        
.Venn .one > span {
  float: left;
  width: 32%;
  shape-outside: polygon(...); /* Defines an invisible jagged line */
}

These invisible floated spans push the text content away from the edges, effectively "carving out" the negative space so the text appears to fill a circular shape.

Scooby dooby doo

Blink 182

Where are you?

5. Scaling: Container Queries (cqi)

Container Queries allow the diagram to scale responsively based on its container size.

Container: The .Venn element is defined as a container (container-type: inline-size).
Font Size: Instead of using fixed pixels (px) or viewport width (vw), we use cqi (Container Queries Inline units). font-size: 5cqi means "5% of the container's current width".

This is why the text size perfectly matches the diagram size. If the diagram creates a 200px wide container, the font is 10px. If it grows to 300px, the font automatically grows to 15px.