Skip to content
Medicine Rich #menstrual#cycle#estrogen

Menstrual Cycle Overview

Follicular, ovulation, luteal phases with hormone curves and endometrial state.

A free, animated menstrual cycle overview you can read here or embed on any website, from Scrollchart.

Menstrual Cycle Overview

Menstrual Cycle OverviewFour hormones across 28 days: FSH, LH surge triggers ovulation; E2 and P4 govern endometrial phases

Three-track diagram across 28 days: hormones (FSH, LH, E2, P4), ovarian state (follicle development, ovulation, corpus luteum), endometrium (proliferative, secretory, menses). Phases color-banded.

Good for

  • Patient education on cycle physiology and hormone-symptom timing
  • Fertility-tracking app explainers linking cycle phase to basal temperature and cervical mucus
  • Hormonal birth-control content explaining how combined OCP suppresses the LH surge

Source & accuracy

This menstrual cycle overview 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 phases of the cycle

The menstrual cycle is the recurring sequence that prepares the body for a possible pregnancy. It begins with menstruation, the shedding of the uterine lining, during the early follicular phase. During the follicular phase, rising follicle-stimulating hormone helps an ovarian follicle mature while estrogen rises and rebuilds the lining. A surge in luteinising hormone then triggers ovulation, the release of an egg, around the middle of a typical cycle.

Although twenty-eight days is often quoted as average, normal cycle length varies considerably between people and from cycle to cycle.

What the luteal phase does

After ovulation, the structure left behind in the ovary, the corpus luteum, produces progesterone, which stabilises and prepares the uterine lining for a fertilised egg. If pregnancy does not occur, the corpus luteum breaks down, progesterone and estrogen fall, and the lining is shed, starting the next cycle.

Cycle patterns are influenced by age, stress, weight, and many other factors. This is general educational information about reproductive physiology, not medical advice; concerns about cycle changes should be discussed with a qualified clinician.

Embed this diagram

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

Frequently asked questions

Where can I get a free animated "Menstrual Cycle Overview" for my website?
Scrollchart provides "Menstrual Cycle Overview" 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 menstrual cycle overview 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.