How the Heart Pumps

About this style

William Harvey's De Motu Cordis of 1628 gave the first full account of blood circulating in a loop, pumped by the heart. The right side of the heart sends oxygen-poor blood to the lungs and the left side sends oxygen-rich blood to the body, while four one-way valves keep it moving forward. The two sounds heard through a stethoscope are valves closing: the tricuspid and mitral first, then the aortic and pulmonary. Medical illustrators color oxygen-poor blood blue and oxygen-rich blood red by convention, although real blood is always red.

Make a 10-second anatomical explainer of how the heart pumps: a flat, labelled four-chamber heart runs one beat in slow motion, its valves opening and closing in the right order, then speeds up to real time.

<inputs>
If I don't give you something, use the default and don't ask.
- Series: Larchwood Anatomy, plate 3 (fictional).
- Title: "How the heart pumps"
- Steps: 1 "Blood flows into the atria and on into the ventricles." · 2 "The atria squeeze, topping up the ventricles." · 3 "The ventricles squeeze: the tricuspid and mitral valves shut (lub) and blood leaves for the lungs and the body." · 4 "The ventricles relax: the pulmonary and aortic valves shut (dub)."
- Closing line: "75 beats a minute × 70 mL a beat = 5.25 litres a minute, at rest."
- Length: 10 seconds.
</inputs>

<direction>
- Look: a modern anatomical plate in flat color: clean shapes, two tones of muscle, hard edges, thin leader lines and a 2% paper grain, nothing else. Drawn in the standard frontal view, so the patient's right side is on the viewer's left.
- Palette: paper #F4EEE6; muscle #D9776A with cut surface #F0A493 and a deeper inner wall #B95A50; fat along the grooves #F2D59A; valve leaflets #F7EBD9 with 2px #7A3A35 edges; chordae #7A3A35; oxygen-poor blood #3E6ED8 with flow particles #A9C1F5; oxygen-rich blood #DE3340 with particles #FFA3A3; ink #2A1F1D; secondary #6E5F5B. Blue and red follow the medical-illustration convention, said once in a small note under the title: "Blue: oxygen-poor. Red: oxygen-rich."
- Anatomy, accurate in arrangement and proportion: a cone-shaped heart about 620px tall, centered at (960, 520), apex down and to the viewer's right at about (1150, 860). The right atrium upper left, receiving the superior vena cava from above and the inferior vena cava from below; the right ventricle in front, lower left; the pulmonary trunk rising from the right ventricle and dividing into left and right pulmonary arteries; the left atrium upper right, receiving two pulmonary veins from the viewer's right; the left ventricle lower right, forming the apex, its wall about three times thicker than the right ventricle's (about 54px against 18px); a thick interventricular septum between the ventricles. The aorta rises from the left ventricle behind the pulmonary trunk and arches to the viewer's right with three branches on top, descending out of frame. Four valves: tricuspid (right atrium to right ventricle) and mitral (left atrium to left ventricle), each tethered by chordae to papillary muscles in its ventricle; pulmonary and aortic valves at the two exits, three cusps each.
- Blood: each chamber and vessel is filled flat with its blood color, and lighter particles (7px discs, about 260 in all) stream along centerline paths so direction always reads: venae cavae → right atrium → tricuspid → right ventricle → pulmonary valve → pulmonary arteries, out of frame to the lungs; pulmonary veins → left atrium → mitral → left ventricle → aortic valve → aorta, out of frame to the body. Flow speed in each segment follows the cardiac phase, and blood never crosses a closed valve: particles queue behind it.
- The beat: one cycle at 75 beats a minute lasts 0.8s (atria contracting about 0.1s, ventricles about 0.3s, relaxation and filling about 0.4s), shown 6.5× slower, then ramping to real speed. Atria shrink 10% toward their centers when they contract; ventricles shrink 14% toward the septum and apex; the outer outline follows. Leaflets swing on their hinges over 0.12s of slowed time. As the ventricles begin to squeeze, the tricuspid and mitral close, all four valves stay shut for an instant, then the pulmonary and aortic open; as they relax, the pulmonary and aortic close, all four are shut for an instant, then the tricuspid and mitral reopen. The atria keep filling from the veins while the ventricles squeeze.
- ECG strip at x 1000–1800, y 920–1010: a 3px ink trace drawn by a moving cursor dot, with P, QRS and T marked in Atkinson Hyperlegible 700, 20px, "lub" tagged at the QRS and "dub" at the end of the T wave. It stays locked to the heart: P with the atria, QRS just before the ventricles squeeze, T as they relax.
- Labels: Atkinson Hyperlegible 700, 22px, each on a 1.5px ink leader ending in a 5px dot on the exact structure, in two columns. Left, right-aligned at x 520: Superior vena cava, Right atrium, Pulmonary valve, Tricuspid valve, Right ventricle, Inferior vena cava. Right, left-aligned at x 1400: Aorta, Pulmonary artery, Left atrium, Pulmonary veins, Aortic valve, Mitral valve, Left ventricle. Leaders never cross each other or a label.
- Type: kicker "LARCHWOOD ANATOMY · PLATE 3" in Atkinson Hyperlegible 700, 20px, tracked 0.14em, in the oxygen-rich red; title Crimson Pro 600, 64px, ink, top-left at (120, 96); the color note in Atkinson Hyperlegible 400, 20px, secondary; step captions Atkinson Hyperlegible 400, 28px, from (120, 930), at most 840px wide, each led by its number in a 36px ink disc.
- Easing: outlines draw by stroke-dashoffset over 0.8s on cubic-bezier(0.65, 0, 0.35, 1); fills and labels fade in with a 10px rise over 0.4s on cubic-bezier(0.22, 1, 0.36, 1); contractions use easeInOutSine within each phase. Nothing bounces.
- Premium: anatomy you could teach from: the right side on the viewer's left, a thick left ventricle, valves in the right order, flow that stops at closed valves and an ECG that matches the beat. Cheap: a Valentine heart that throbs while red dots run in circles.
Banned: Valentine heart shapes, glossy or 3D rendering, realistic tissue or gore, faces, purple "mixed" blood, oxygen-poor blood on the viewer's right, blood crossing a closed valve, both valve pairs open at once, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: the outline and vessels draw on; muscle and cut surface fill; the kicker and title rise in.
- 1.2–2.4s: the blood colors flood in, blue on the viewer's left and red on the right, and the particles begin to move; the four chamber labels land 0.15s apart, then the vessel labels; the color note fades in.
- 2.4–3.7s: step 1, filling: tricuspid and mitral open, pulmonary and aortic shut; particles pour from the veins through the atria into the ventricles; the ECG draws its baseline, then the P wave; the tricuspid and mitral labels land.
- 3.7–4.35s: step 2: the atria squeeze and push a last surge into the ventricles.
- 4.35–6.3s: step 3: the QRS; the tricuspid and mitral snap shut ("lub" on the strip), then the pulmonary and aortic open and the ventricles squeeze blood up the pulmonary artery and the aorta; the pulmonary and aortic valve labels land.
- 6.3–7.6s: step 4: the T wave; the ventricles relax, the pulmonary and aortic snap shut ("dub"), then the tricuspid and mitral reopen and filling resumes.
- 7.6–9.0s: the beat speeds up to real time over 0.6s and runs one more beat at 75 a minute; the closing line replaces the captions.
- 9.0–10.0s: hold: the heart rests in diastole and the flow eases to a stop.
For other lengths, stretch the slowed beat; 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: inline SVG, setting attributes and transforms from seek; no other libraries (no three.js: this style is flat).
- The cardiac phase φ(t) is the integral of the playback rate (6.5× slow, then ramping to 1×), solved in closed form; valve angles, chamber scales and the ECG come straight from φ(t).
- Because flow depends on the phase history, precompute every particle's position along its path once at load at a 1/240s step, with queues behind closed valves; seek(t) only reads that table.
</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 the oxygen-poor side is on the viewer's left in every frame, the left ventricle wall is visibly about three times the right's, no particle crosses a closed valve, the two valve pairs are never open together, "lub" and "dub" line up with their valve closures, and every leader ends on the structure it names. 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…

Material Container Transform

Made by us

A recipe app demonstrates Material-style motion: a card expands into a full screen, tabs switch on a shared axis, a FAB…

Isometric Hairline

Made by us

A tidy isometric line-art explainer: constant 2px strokes, white faces and one vermilion accent as a parcel travels fro…

Flat Vector Science Explainer

Made by us

A bright, rounded science explainer on a deep-space backdrop: springy geometric shapes, two-tone shading and soft long…