Skip to content
Health Science Rich #heart-failure#hfref#hfpef

Heart Failure Spectrum

HFrEF (low EF) vs HFpEF (preserved EF, stiff ventricle) - distinct mechanisms, overlapping symptoms.

A free, animated heart failure spectrum you can read here or embed on any website, from Scrollchart.

Heart Failure Spectrum

Heart Failure Spectrum: HFrEF vs HFpEFDistinct ventricular phenotypes, overlapping symptoms (dyspnoea, fatigue, fluid retention)HFrEFHeart Failure with Reduced EFHFpEFHeart Failure with Preserved EFPVPVEFEF < 40%EF >= 50%LV morphologyDilated, thin wallConcentric, thickDysfunctionSystolic (weak pump)Diastolic (stiff)PV loop shapeWide, low pressureNarrow, high pressureSV at EDV 150~55 mL (depressed)~80 mL (near-normal)Main driversMI, DCM, toxinsHTN, DM2, obesityTreatmentACEi/ARB, BB, MRADiuretics, SGLT2iHFrEF and HFpEF share symptoms but need different treatments; SGLT2 inhibitors improve outcomes in both

Two-column comparison: HFrEF (dilated, EF<40%, systolic dysfunction) vs HFpEF (concentric, EF>=50%, diastolic dysfunction). Pressure-volume loops contrasted.

Good for

  • Heart failure classification and mechanism explainer for medical educators
  • Patient education distinguishing HFrEF from HFpEF symptoms and treatment
  • Cardiology board review content on pressure-volume loop interpretation

Source & accuracy

This heart failure spectrum is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Two failure modes defined by ejection fraction

Heart failure is not a single disease but a spectrum, often split by ejection fraction, the percentage of blood the left ventricle pumps out with each beat. In heart failure with reduced ejection fraction (HFrEF), the ventricle is weakened and dilated, so it cannot contract forcefully and the ejection fraction is low. In heart failure with preserved ejection fraction (HFpEF), the ventricle squeezes adequately but is stiff and fills poorly during relaxation, so the ejection fraction looks normal even though output is impaired.

A middle category, mildly reduced ejection fraction, is also recognized, reflecting that the boundary is a continuum.

Different mechanisms, overlapping symptoms

Although their underlying problems differ, a contraction problem versus a filling problem, both can produce similar symptoms: breathlessness, fatigue, fluid retention, and reduced exercise tolerance. The distinction matters because the conditions respond differently to treatment, and HFpEF has historically been harder to treat.

This is general educational information about how heart failure is categorized, not a diagnostic or treatment guide; any heart failure care should be directed by a qualified clinician.

Embed this diagram

Add this animated heart failure spectrum to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated heart failure spectrum for any website.
Who uses it
Medical educators, Patient-info sites, Health blogs.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="heart-failure-spectrum" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Heart Failure Spectrum" for my website?
Scrollchart provides "Heart Failure Spectrum" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a heart failure spectrum diagram in a health or wellness blog?
Copy the HTML snippet from the Scrollchart diagram page and paste it into any post or page in your CMS. It works in WordPress, Webflow, Ghost, Substack, and plain HTML without any plugin or account. The diagram renders as animated SVG directly in your page, so search engines can index the accompanying explainer text.