A few years ago I made a Venn diagram using floats and absolute positioning. It was fine. Nothing to really brag about, but it got the point across.

I had use for CSS shapes in a project and wanted to play around beyond what the project itself allowed. I decided to revisit my Venn diagram and create something a bit more modern and flexible. This also gave me a chance to play with CSS grid overlaps, which I had not done yet simply because I had no reason.

This post is just a summation of what I made with some stuff I learned. To start, take a look at the base model of my CSS Grid and Shape-Outside Venn Diagram, also embedded immediately below.