Skip to content
Astronomy & Space Simple #dark-energy#composition

Cosmic Energy Budget

Dark energy 68%, dark matter 27%, baryonic 5% - the universe is mostly invisible.

A free, animated cosmic energy budget you can read here or embed on any website, from Scrollchart.

Cosmic Energy Budget

Cosmic Energy BudgetThe observable universe: 95% is invisible dark components (Planck 2018)Universeenergybudget68.3%Dark Energy26.8%Dark Matter4.9%Ordinary MatterOrdinary matter (4.9%) broken downMost baryons are diffuse gas, not starsHot intergalactic gas70%Stars10%Cold gas clouds12%Dust + black holes8%Key factsDark energy density: ~6e-10 J/m3 (constant)Dark matter: 5x more mass than all baryonsOmega_total = 1.000 +/- 0.002 (flat universe)Source: Planck Collaboration 2018

Donut: 68% dark energy, 27% dark matter, 4.9% ordinary matter. Of ordinary matter, only ~10% is in stars.

Good for

  • Cosmology and physics explainers establishing why the universe is mostly invisible matter and energy
  • Science communication pieces on dark energy and the accelerating expansion of the universe

Source & accuracy

This cosmic energy budget 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.

The universe's invisible majority

Direct observations of galaxies and gas account for roughly 5 percent of the universe's total mass-energy: protons, neutrons, and electrons (baryonic matter). The remaining 95 percent is invisible to telescopes. Of that, 27 percent is dark matter, detected only through gravitational effects on galaxy rotation and light bending. The remaining 68 percent is dark energy, which drives the accelerating expansion of space itself.

This composition was determined by combining observations of galaxy clustering, supernova distances, and the cosmic microwave background temperature fluctuations. No single measurement suffices; the picture emerged from convergence across three independent techniques by the early 2000s.

What we know and don't know about dark components

Dark matter's nature remains unresolved after five decades of searching. Leading candidates include weakly interacting massive particles (WIMPs), which would interact only through gravity, and axions, hypothetical particles proposed to solve a different problem in particle physics. Earth-bound detectors deep underground seek direct collisions with dark matter particles passing through Earth; so far, no definitive detection exists.

Dark energy is even more mysterious. Its properties are consistent with Einstein's cosmological constant, a uniform energy density filling all space. But why is dark energy's strength so weak compared to quantum field theory predictions? This mismatch, the cosmological constant problem, remains one of physics' largest unsolved mysteries.

Embed this diagram

Add this animated cosmic energy budget 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 cosmic energy budget for any website.
Who uses it
Astronomy enthusiasts.
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="cosmic-composition" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Cosmic Energy Budget" for my website?
Scrollchart provides "Cosmic Energy Budget" 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 cosmic energy budget in WordPress or a static site?
Paste the HTML snippet from the Scrollchart diagram page into your WordPress post (in HTML/code view), your Webflow embed block, or directly into a static HTML file. No plugin is needed. The diagram loads from scrollchart.com and paints in as the reader scrolls.