Skip to content
Health Science Medium #estradiol#progesterone#menstrual-cycle

Estrogen and Progesterone: 28-Day Cycle

Estradiol peaks day 13 at ovulation; progesterone rises in the luteal phase, peaking day 21.

A free, animated estrogen and progesterone: 28-day cycle you can read here or embed on any website, from Scrollchart.

Estrogen and Progesterone: 28-Day Cycle

Estrogen and Progesterone: 28-day CycleE2 (estradiol), progesterone, LH surge, and FSH across menstrual cycle phasesMenstruationFollicularOvulationLutealDay 1Day 5Day 10Day 14Day 21Day 280%25%50%75%100%Day of cycleE2 peak ~day 13LH surgeTriggers ovulationProg. peak day 21Corpus luteumBoth fall → menstruationEstradiol (E2)ProgesteroneLHFSH

Available in: Português

Two hormone curves across 28-day cycle. Estradiol (solid): rises follicular phase, peaks day 13 (~350 pg/mL), secondary rise mid-luteal. Progesterone (dashed): flat until ovulation, rises sharply to peak day 21 (~20 ng/mL), falls premenstrually. Phase bands: menses, follicular, ovulation, luteal.

Good for

  • Womens health explainers
  • Cycle-syncing content
  • Hormone imbalance patient education

Source & accuracy

This estrogen and progesterone: 28-day cycle 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 hormones, two halves of the cycle

The 28-day cycle is often summarized by two hormones taking the lead in turn. Estradiol dominates the first half, climbing as ovarian follicles mature and peaking around the time of ovulation, frequently charted near day 13. Progesterone dominates the second half, the luteal phase, rising after ovulation and typically peaking around day 21.

Progesterone comes from the corpus luteum, the structure left behind after the follicle releases its egg. Its job is to prepare and maintain the uterine lining, which is why its rise follows ovulation rather than preceding it.

What the falling tail of the curve signals

If pregnancy does not occur, the corpus luteum breaks down, so both progesterone and estradiol drop late in the luteal phase. That withdrawal triggers shedding of the lining and the start of the next cycle. The overlay therefore reads as a handoff between two hormones, then a shared decline.

The day-21 and day-13 markers describe an idealized 28-day cycle. Real cycles vary in length and timing. This is general educational information, not medical advice; consult a qualified professional for personal cycle or fertility questions.

Embed this diagram

Add this animated estrogen and progesterone: 28-day cycle 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 estrogen and progesterone: 28-day cycle for any website.
Who uses it
Health blogs, Wellness sites, Medical educators, Patient-info sites.
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="estrogen-progesterone-cycle" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Estrogen and Progesterone: 28-Day Cycle" for my website?
Scrollchart provides "Estrogen and Progesterone: 28-Day Cycle" 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 estrogen and progesterone: 28-day cycle 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.