Venn Diagram

About this style

The English logician John Venn introduced the diagrams named after him in 1880, drawing overlapping circles to show how sets of things relate. Every region means something exact, and the overlap holds only what belongs to both sets. Teachers, presenters and social media designers use two-circle Venns for comparisons and jokes alike, often saving the punchline for the middle. Set to a beat as kinetic type, each word lands in order so the logic arrives one step at a time.

Make a 10-second kinetic Venn diagram: two circles slide together, examples land in each side, the overlap fills, and the punchline lands in the middle.

<inputs>
If I don't give you something, use the default and don't ask.
- Question: "What lays eggs and makes milk?"
- Left set: "Lays eggs", with Hens, Turtles, Frogs.
- Right set: "Makes milk", with Cats, Whales, Bats.
- Overlap: "Platypus" and "Echidnas", under the punchline word "MONOTREMES".
- Closing line: "The only mammals that lay eggs."
- Tempo: 120 BPM. Length: 10 seconds.
</inputs>

<direction>
- Look: a bold kinetic-type explainer on one saturated field: big flat circles, big confident type, no illustration. The diagram does the explaining and the type does the performing.
- Palette: ground cobalt #2639F5; left circle mint #8AF0C8; right circle pink #FFA3D1; overlap lemon #FFE45E; ink #10122B; white #FFFFFF for type on the ground.
- Type: Unbounded 800 for the question, the punchline word and the closing line; Unbounded 700, 30px, uppercase, tracked 0.06em, for the set labels; Onest 600, 40px, for the examples (36px inside the overlap). Ink on the circles, white on the ground.
- Diagram: circles 640px across, centered at (780, 560) and (1140, 560), so the overlap is a lens 280px wide and about 530px tall. Build the lens as a nested clip (a container clipped to the left circle holding an element clipped to the right circle) so its edges are exact. Set labels sit inside the top of each crescent, clear of the lens: LAYS EGGS centered at (690, 340), MAKES MILK at (1230, 340). Examples stack in each crescent (left centered on x 640, right on x 1280, 60px apart, around y 560); the overlap holds MONOTREMES (Unbounded 800, 30px) at y 500 with "Platypus" and "Echidnas" beneath it around y 600. Every word stays inside its region with at least 24px to spare from any edge.
- Rhythm: everything lands on the 120 BPM grid (beats every 0.5s, half-beats allowed). Words drop in from 40px above over 0.28s on cubic-bezier(0.2, 0.9, 0.1, 1), letters 18ms apart. Circles arrive from off-stage on a spring, x(s) = target + offset × e^(−7s) × cos(10s) with s the seconds since they started: a small overshoot, settled by 0.8s. The overlap stays empty, ground showing through, until the circles settle, then fills with lemon from the bottom up like a glass over 0.5s, its surface a gentle 6px wave that calms flat as it reaches the top. Punches scale 1.25 → 1 over 0.25s on cubic-bezier(0.2, 0.9, 0.3, 1). The question moves on cubic-bezier(0.65, 0, 0.35, 1).
- Premium: two shapes and a handful of words timed to a beat, an exact lens, and a punchline that pays off the setup. Cheap: clip-art animals, three wobbly circles and a word cloud.
Banned: illustrations, icons or emoji, outlines, gradients, drop shadows, blur, a third circle, words crossing region edges, colors beyond the six above, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.5s: on the cobalt field the question lands in two lines, centered, 120px: "What" (0.0s), "lays eggs" (0.5s), then "and makes milk?" (1.0s) on the second line.
- 1.5–2.0s: the question shrinks to one 44px line and rises to the top center, baseline y 140.
- 2.0–3.0s: the mint circle springs in from the left edge and the pink from the right, settling with the lens still empty.
- 3.0s: LAYS EGGS and MAKES MILK punch in together on the beat.
- 3.25–4.5s: the examples drop on half-beats: Hens, Turtles, Frogs (3.25, 3.5, 3.75s), then Cats, Whales, Bats (4.0, 4.25, 4.5s).
- 4.75–5.25s: the overlap fills with lemon from the bottom up.
- 5.25–5.9s: "Platypus" (5.25s) and "Echidnas" (5.5s) drop into the lens.
- 6.5s: MONOTREMES punches in above them; the lens swells 3% and settles.
- 7.0–8.25s: the closing line lands word by word on half-beats under the circles, white, 48px, centered on baseline y 975.
- 8.5–10.0s: hold, nothing moving.
For other lengths, change the tempo, not the order; keep at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: absolutely positioned HTML elements, setting transforms, clip-paths and opacity from seek; no other libraries (no three.js: this style is flat).
- Split every word into letter spans at load; each letter's offset and opacity is a function of t and its word's landing beat.
- The lens fill is a rectangle inside the nested clip whose top edge (a wave from a closed-form function of t) rises with the fill.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every word lands on the beat grid, each word sits wholly inside its region with examples clear of the lens edge, the lens edges are exact with no seams, the question never touches the circles, and the 6s frame shows the full diagram with the lens filled and both overlap words settled. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Blueprint Technical Drawing

Made by us

A cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…

Sankey Flow

Made by us

A fictional gear maker's $380M of revenue pours left to right in proportional ribbons on a white report page: gray reve…

Network Graph

Made by us

On midnight blue, 72 members of a fictional makerspace join a force-directed graph one by one, the layout settles as if…

Transit Map

Made by us

A fictional city's metro diagram draws itself on white: four colored lines run at 0, 45 and 90 degrees across a pale ri…