Circulation

Circulation draws double circulation: the four chambers of the heart, with the lungs above and the body below. The right side of the heart sits on the viewer’s left, as in a textbook.

• Path: the vessels follow the blood. It leaves the right ventricle, goes up the pulmonary artery to the lungs, back down the pulmonary vein to the left atrium, through the left ventricle, then along the aorta to the body and up the vena cava to the right atrium. The vena cava passes over the pulmonary artery with a gap of gap_color.
• Colour: each vessel is coloured by the blood in it, from deoxygenated to oxygenated. The blood turns red across the lungs and blue across the body.
• Motion: from delay the chambers appear and the vessels draw along the loop. Each name fades in as the line reaches it. Then blood cells run round at speed pixels a second, passing under the chambers, and the heart beats bpm times a minute, atria first.
• Labels: with labels, the lungs, the body and the four vessels are named.

Gallery scene: Circulation.

Circulation 8 sPlayUnmuteCopy render command

use fframes_kit::prelude::*;

fn heart<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
    ui.show(Circulation {
        delay: 0.5,
        bpm: 90.0,      // a faster beat
        labels: false,  // only the chambers' names
        ..ui.defaults()
    })
}

API

Components are plain structs. Set the fields you need and fill the rest with ..ui.defaults(): the defaults below come from the current theme (theme. values are fields of Theme).

Circulation

Field	Type	Default	Description
delay	f32	0.0	Seconds after the container’s start before the chambers appear and the vessels begin to draw.
center	(f64, f64)	(0.0, -0.15)	The middle of the heart, in units of ui.space.
scale	f64	1.0	Size factor on the figure; 1.0 is about 860 by 820 pixels.
speed	f32	260.0	Speed of the blood cells along the loop, in pixels per second.
bpm	f32	70.0	Heartbeats per minute; the atria contract first, then the ventricles.
labels	bool	true	Names the lungs, the body and the vessels when true.
oxygenated	Color	Color::hex("#ff6b6b")	Colour of oxygen-rich blood (left side, aorta, pulmonary vein).
deoxygenated	Color	Color::hex("#4dabf7")	Colour of oxygen-poor blood (right side, vena cava, pulmonary artery).
chamber_color	Color	Color::hex("#2a1c2e")	Fill of the four heart chambers.
bed_color	Color	Color::hex("#1b2735")	Fill of the capillary beds in the lungs and the body.
gap_color	Color	theme.colors.background	Colour of the gap cut into a vessel where another crosses it; match the background.
label_style	TextStyle	theme.typography.caption	The font of the lung, body and vessel names: family, size in pixels and weight.
chamber_style	TextStyle	chamber_style	The font of the chamber names (RA, RV, LA, LV): family, size in pixels and weight.
text_color	Color	theme.colors.text	Colour of all the text.
enter	Option<FadeIn>	None	Fade in at the start; None for none.
exit	Option<FadeOut>	None	Fade out before the end; None for none.

Feature biology · Source