Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Grab a round cookie or a toy wheel! Have you ever wondered how many times the width across the middle fits around the outside edge?

Before we measure, let's learn the special names for the two paths on any circle.

The **diameter** is the straight line across the middle of a circle, while the **circumference** is the distance all the way around its outside edge.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<title>Investigating Pi: Circumference and Diameter</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .main-stage {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
  }

  .svg-container {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    position: relative;
  }

  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Arc styling */
  .base-circle {
    fill: #ffffff;
    stroke: #e2e8f0;
    stroke-width: 8;
  }

  .diameter-line {
    stroke: #22b7ff;
    stroke-width: 4;
    stroke-linecap: round;
  }

  .arc-seg {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  }

  .arc-d1 { stroke: #22b7ff; }
  .arc-d2 { stroke: #8b5cf6; }
  .arc-d3 { stroke: #f59e0b; }
  .arc-rem { stroke: #10b981; }

  /* Formula display card */
  .formula-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    font-size: 15px;
    font-weight: 600;
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
  }
  .pill-d1 { background: #22b7ff; }
  .pill-d2 { background: #8b5cf6; }
  .pill-d3 { background: #f59e0b; }
  .pill-rem { background: #10b981; }

  /* Interactive Controls */
  .controls {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .step-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
  }

  .btn {
    border: none;
    background: #ffffff;
    color: #4b5563;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    text-align: center;
  }

  .btn:hover {
    background: #f1f5f9;
  }

  .btn.active {
    background: #1e2945;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(30,41,69,0.25);
  }

  .playback-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .play-toggle {
    border: none;
    background: #ffffff;
    color: #1e2945;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
</style>
</head>
<body>

<div class="main-stage">
  <div class="svg-container">
    <svg viewBox="0 0 240 240">
      
      <circle class="base-circle" cx="120" cy="120" r="90" />
      
      
      <g id="diameterGroup">
        <line class="diameter-line" x1="30" y1="120" x2="210" y2="120" />
        <circle cx="30" cy="120" r="3.5" fill="#22b7ff" />
        <circle cx="210" cy="120" r="3.5" fill="#22b7ff" />
        <circle cx="120" cy="120" r="3" fill="#1e2945" />
        <text x="120" y="112" text-anchor="middle" fill="#1e2945" font-size="14" font-weight="700">d</text>
      </g>

      
      
      
      <circle id="arc1" class="arc-seg arc-d1" cx="120" cy="120" r="90"
        stroke-dasharray="180 385.48"
        stroke-dashoffset="0"
        transform="rotate(-90 120 120)" />

      <circle id="arc2" class="arc-seg arc-d2" cx="120" cy="120" r="90"
        stroke-dasharray="180 385.48"
        stroke-dashoffset="0"
        transform="rotate(24.59 120 120)" />

      <circle id="arc3" class="arc-seg arc-d3" cx="120" cy="120" r="90"
        stroke-dasharray="180 385.48"
        stroke-dashoffset="0"
        transform="rotate(139.18 120 120)" />

      
      <circle id="arcRem" class="arc-seg arc-rem" cx="120" cy="120" r="90"
        stroke-dasharray="25.5 540"
        stroke-dashoffset="0"
        transform="rotate(253.77 120 120)" />
    </svg>
  </div>

  
  <div class="formula-box" id="formulaDisplay">
    <span style="color:#6b7280;">C =</span>
    <span class="pill pill-d1" id="p1">1d</span>
    <span id="p2Wrap" style="display:none;"><span style="color:#9ca3af;">+</span> <span class="pill pill-d2">1d</span></span>
    <span id="p3Wrap" style="display:none;"><span style="color:#9ca3af;">+</span> <span class="pill pill-d3">1d</span></span>
    <span id="pRemWrap" style="display:none;"><span style="color:#9ca3af;">+</span> <span class="pill pill-rem">0.14d</span></span>
    <span id="pTotalWrap" style="display:none; color:#1e2945; font-weight:700;">= 3.14d (πd)</span>
  </div>
</div>

<div class="controls">
  <div class="step-buttons">
    <button class="btn active" onclick="setStep(0)">1 × d</button>
    <button class="btn" onclick="setStep(1)">2 × d</button>
    <button class="btn" onclick="setStep(2)">3 × d</button>
    <button class="btn" onclick="setStep(3)">+ 0.14d (π)</button>
  </div>

  <div class="playback-row">
    <button class="play-toggle" id="playBtn" onclick="togglePlay()" title="Play / Pause">⏸</button>
  </div>
</div>

<script>
  let currentStep = 0;
  let isPlaying = true;
  let timer = null;

  const arc1 = document.getElementById('arc1');
  const arc2 = document.getElementById('arc2');
  const arc3 = document.getElementById('arc3');
  const arcRem = document.getElementById('arcRem');

  const p2Wrap = document.getElementById('p2Wrap');
  const p3Wrap = document.getElementById('p3Wrap');
  const pRemWrap = document.getElementById('pRemWrap');
  const pTotalWrap = document.getElementById('pTotalWrap');
  const buttons = document.querySelectorAll('.step-buttons .btn');
  const playBtn = document.getElementById('playBtn');

  function renderStep(step) {
    currentStep = step;
    buttons.forEach((btn, idx) => {
      btn.classList.toggle('active', idx === step);
    });

    // Update arcs visibility/offsets
    arc1.style.opacity = step >= 0 ? "1" : "0";
    arc2.style.opacity = step >= 1 ? "1" : "0";
    arc3.style.opacity = step >= 2 ? "1" : "0";
    arcRem.style.opacity = step >= 3 ? "1" : "0";

    // Update Formula display
    p2Wrap.style.display = step >= 1 ? "inline-flex" : "none";
    p3Wrap.style.display = step >= 2 ? "inline-flex" : "none";
    pRemWrap.style.display = step >= 3 ? "inline-flex" : "none";
    pTotalWrap.style.display = step >= 3 ? "inline" : "none";
  }

  function setStep(step) {
    renderStep(step);
  }

  function nextStep() {
    let next = (currentStep + 1) % 4;
    setStep(next);
  }

  function startAutoPlay() {
    if (timer) clearInterval(timer);
    timer = setInterval(nextStep, 3000);
    isPlaying = true;
    playBtn.textContent = '⏸';
  }

  function pauseAutoPlay() {
    if (timer) clearInterval(timer);
    timer = null;
    isPlaying = false;
    playBtn.textContent = '▶';
  }

  function togglePlay() {
    if (isPlaying) {
      pauseAutoPlay();
    } else {
      startAutoPlay();
    }
  }

  // Initial render & timer start
  renderStep(0);
  startAutoPlay();
</script>
</body>
</html>

What happens if we take that straight diameter stick and bend it around the outside edge?

When you wrap diameter sticks around the circle, exactly 3 sticks fit along the edge, with just a tiny leftover space!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Investigating Pi</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

    .main-stage {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      flex: 1;
      justify-content: center;
    }

    /* SVG Canvas */
    .svg-box {
      width: 100%;
      max-width: 320px;
      height: auto;
      aspect-ratio: 1 / 1;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Rod Comparison Bar */
    .rod-container {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .rod-track {
      width: 100%;
      height: 28px;
      background: #f1f5f9;
      border-radius: 6px;
      display: flex;
      overflow: hidden;
      position: relative;
    }
    .rod-seg {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      color: #ffffff;
      transition: opacity 0.3s ease, transform 0.3s ease;
      opacity: 0.15;
    }
    .rod-seg.active {
      opacity: 1;
    }
    .rod-1 { width: 31.83%; background: #2563eb; }
    .rod-2 { width: 31.83%; background: #0284c7; }
    .rod-3 { width: 31.83%; background: #0d9488; }
    .rod-rem { width: 4.51%; background: #f59e0b; min-width: 18px; }

    .rod-labels {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #64748b;
      font-weight: 600;
      padding: 0 2px;
    }

    /* Equation Summary */
    .eq-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    .badge {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
    }
    .b-blue { background: #2563eb; }
    .b-sky { background: #0284c7; }
    .b-teal { background: #0d9488; }
    .b-amber { background: #f59e0b; color: #78350f; }

    /* Interactive Stepper Navigation */
    .controls {
      width: 100%;
      max-width: 440px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 4px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s;
    }
    .btn:active {
      background: #e2e8f0;
    }
    .step-dots {
      display: flex;
      gap: 6px;
    }
    .dot-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .dot-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="svg-box">
      <svg viewBox="-140 -140 280 280">
        <defs>
          
          <marker id="arrow-start" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 10 2 L 2 5 L 10 8 z" fill="#e11d48"/>
          </marker>
          <marker id="arrow-end" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 0 2 L 8 5 L 0 8 z" fill="#e11d48"/>
          </marker>
        </defs>

        
        <circle cx="0" cy="0" r="100" fill="#ffffff" stroke="#e2e8f0" stroke-width="12" />

        
        <circle id="arc1" cx="0" cy="0" r="100" fill="none" stroke="#2563eb" stroke-width="12"
          stroke-dasharray="200 628.3" stroke-dashoffset="0"
          transform="rotate(-90)" opacity="0.15" style="transition: opacity 0.3s ease;" />

        
        <circle id="arc2" cx="0" cy="0" r="100" fill="none" stroke="#0284c7" stroke-width="12"
          stroke-dasharray="200 628.3" stroke-dashoffset="-200"
          transform="rotate(-90)" opacity="0.15" style="transition: opacity 0.3s ease;" />

        
        <circle id="arc3" cx="0" cy="0" r="100" fill="none" stroke="#0d9488" stroke-width="12"
          stroke-dasharray="200 628.3" stroke-dashoffset="-400"
          transform="rotate(-90)" opacity="0.15" style="transition: opacity 0.3s ease;" />

        
        <circle id="arcRem" cx="0" cy="0" r="100" fill="none" stroke="#f59e0b" stroke-width="12"
          stroke-dasharray="28.32 628.3" stroke-dashoffset="-600"
          transform="rotate(-90)" opacity="0.15" style="transition: opacity 0.3s ease;" />

        
        <line x1="0" y1="-92" x2="0" y2="-108" stroke="#1e2945" stroke-width="2" />
        <line x1="94" y1="-34.2" x2="101.5" y2="-41.8" stroke="#1e2945" stroke-width="2" />
        <line x1="58.8" y1="80.9" x2="63.5" y2="87.4" stroke="#1e2945" stroke-width="2" />
        <line x1="-58.8" y1="80.9" x2="-63.5" y2="87.4" stroke="#1e2945" stroke-width="2" />

        
        <g id="diamGroup" style="transition: opacity 0.3s ease;">
          <line x1="-96" y1="0" x2="96" y2="0" stroke="#e11d48" stroke-width="3" stroke-dasharray="4 4"
            marker-start="url(#arrow-start)" marker-end="url(#arrow-end)"/>
          <circle cx="0" cy="0" r="3" fill="#e11d48" />
          <rect x="-42" y="-12" width="84" height="24" rx="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" />
          <text x="0" y="5" text-anchor="middle" font-size="13" font-weight="700" fill="#e11d48">Diameter (d)</text>
        </g>

        
        <text id="lblArc1" x="90" y="-70" font-size="12" font-weight="700" fill="#2563eb" opacity="0.2">Stick 1</text>
        <text id="lblArc2" x="90" y="70" font-size="12" font-weight="700" fill="#0284c7" opacity="0.2">Stick 2</text>
        <text id="lblArc3" x="-105" y="45" font-size="12" font-weight="700" fill="#0d9488" opacity="0.2">Stick 3</text>
        <text id="lblArcRem" x="-45" y="-112" font-size="11" font-weight="700" fill="#d97706" opacity="0.2">+0.14</text>
      </svg>
    </div>

    
    <div class="rod-container">
      <div class="rod-labels">
        <span>Circumference Unrolled:</span>
        <span id="rodTotalLabel" style="font-weight: 700; color: #2563eb;">1 Diameter</span>
      </div>
      <div class="rod-track">
        <div id="rod1" class="rod-seg rod-1 active">1d</div>
        <div id="rod2" class="rod-seg rod-2">2d</div>
        <div id="rod3" class="rod-seg rod-3">3d</div>
        <div id="rodRem" class="rod-seg rod-rem">.14</div>
      </div>
    </div>

    
    <div class="eq-banner" id="eqText">
      <span>Circumference = </span>
      <span class="badge b-blue" id="stepBadge">1 Diameter</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="playBtn" aria-label="Auto play">▶ Auto</button>
    <div class="step-dots">
      <button class="dot-btn active" data-step="0">1</button>
      <button class="dot-btn" data-step="1">2</button>
      <button class="dot-btn" data-step="2">3</button>
      <button class="dot-btn" data-step="3">π</button>
    </div>
    <button class="btn" id="nextBtn" aria-label="Next step">Next →</button>
  </div>

  <script>
    const steps = [
      {
        name: "1 Diameter (1d)",
        badge: "1 × Diameter",
        badgeClass: "b-blue",
        activeArcs: ['arc1'],
        activeLabels: ['lblArc1'],
        activeRods: ['rod1']
      },
      {
        name: "2 Diameters (2d)",
        badge: "2 × Diameter",
        badgeClass: "b-sky",
        activeArcs: ['arc1', 'arc2'],
        activeLabels: ['lblArc1', 'lblArc2'],
        activeRods: ['rod1', 'rod2']
      },
      {
        name: "3 Diameters (3d)",
        badge: "3 × Diameter",
        badgeClass: "b-teal",
        activeArcs: ['arc1', 'arc2', 'arc3'],
        activeLabels: ['lblArc1', 'lblArc2', 'lblArc3'],
        activeRods: ['rod1', 'rod2', 'rod3']
      },
      {
        name: "3.14 Diameters (π)",
        badge: "3.14 × d ≈ π × d",
        badgeClass: "b-amber",
        activeArcs: ['arc1', 'arc2', 'arc3', 'arcRem'],
        activeLabels: ['lblArc1', 'lblArc2', 'lblArc3', 'lblArcRem'],
        activeRods: ['rod1', 'rod2', 'rod3', 'rodRem']
      }
    ];

    let currentStep = 0;
    let timer = null;

    const allArcs = ['arc1', 'arc2', 'arc3', 'arcRem'];
    const allLabels = ['lblArc1', 'lblArc2', 'lblArc3', 'lblArcRem'];
    const allRods = ['rod1', 'rod2', 'rod3', 'rodRem'];
    const dotButtons = document.querySelectorAll('.dot-btn');
    const playBtn = document.getElementById('playBtn');
    const nextBtn = document.getElementById('nextBtn');
    const rodTotalLabel = document.getElementById('rodTotalLabel');
    const stepBadge = document.getElementById('stepBadge');

    function renderStep(idx) {
      currentStep = idx;
      const s = steps[idx];

      // Update dots
      dotButtons.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      // Update SVG Arcs & Labels
      allArcs.forEach(id => {
        const el = document.getElementById(id);
        el.style.opacity = s.activeArcs.includes(id) ? "1" : "0.15";
      });

      allLabels.forEach(id => {
        const el = document.getElementById(id);
        el.style.opacity = s.activeLabels.includes(id) ? "1" : "0.2";
      });

      // Update Rod Segments
      allRods.forEach(id => {
        const el = document.getElementById(id);
        el.classList.toggle('active', s.activeRods.includes(id));
      });

      // Update Text Displays
      rodTotalLabel.textContent = s.name;
      stepBadge.textContent = s.badge;
      stepBadge.className = 'badge ' + s.badgeClass;
    }

    function goToNext() {
      const next = (currentStep + 1) % steps.length;
      renderStep(next);
    }

    function toggleAutoPlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = "▶ Auto";
      } else {
        playBtn.textContent = "⏸ Pause";
        timer = setInterval(goToNext, 3000);
      }
    }

    dotButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        if (timer) toggleAutoPlay();
        renderStep(parseInt(btn.getAttribute('data-step'), 10));
      });
    });

    nextBtn.addEventListener('click', () => {
      if (timer) toggleAutoPlay();
      goToNext();
    });

    playBtn.addEventListener('click', toggleAutoPlay);

    // Initialize initial state
    renderStep(0);
  </script>
</body>
</html>

We call this special number **pi** (written as the Greek letter **$\pi$**), and it is always about **3.14**.

Thousands of years ago, ancient builders in Egypt and Babylon noticed this exact pattern whenever they built round wheels and stone pillars.

Does this magic number change if we use a tiny coin or a giant Ferris wheel?

No matter how big or small a circle is, dividing the distance around by the distance across always equals **$\pi$**.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<title>Circumference to Diameter Ratio</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    gap: 10px;
  }

  .btn-group {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    justify-content: center;
  }

  .size-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1e2945;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }

  .size-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
  }

  .stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .unroll-card {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bar-track {
    position: relative;
    width: 100%;
    height: 28px;
    background: #f1f5f9;
    border-radius: 6px;
    display: flex;
    overflow: hidden;
    border: 1px solid #e2e8f0;
  }

  .d-segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    border-right: 1.5px solid #ffffff;
    transition: width 0.35s ease;
  }

  .seg-1 { background: #3b82f6; width: calc(100% / 3.14159); }
  .seg-2 { background: #0284c7; width: calc(100% / 3.14159); }
  .seg-3 { background: #0ea5e9; width: calc(100% / 3.14159); }
  .seg-rem { background: #f59e0b; width: calc(100% - 3 * (100% / 3.14159)); font-size: 11px; }

  .bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    padding: 0 2px;
  }

  .math-card {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
  }

  .fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    font-size: 16px;
  }

  .fraction .top {
    border-bottom: 2px solid #1e2945;
    padding: 0 4px 1px 4px;
    color: #0284c7;
  }

  .fraction .bot {
    padding: 1px 4px 0 4px;
    color: #ef4444;
  }

  .pi-badge {
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 19px;
  }
</style>
</head>
<body>

  <div class="btn-group">
    <button class="size-btn active" onclick="setSize(0)">Small</button>
    <button class="size-btn" onclick="setSize(1)">Medium</button>
    <button class="size-btn" onclick="setSize(2)">Large</button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 400 160">
      
      <circle id="circ" cx="200" cy="80" r="40" fill="#f0f9ff" stroke="#0284c7" stroke-width="4" stroke-dasharray="4 3" />
      
      
      <line id="d-line" x1="160" y1="80" x2="240" y2="80" stroke="#ef4444" stroke-width="3.5" stroke-linecap="round" />
      
      
      <circle id="d-p1" cx="160" cy="80" r="3.5" fill="#ef4444" />
      <circle id="d-p2" cx="240" cy="80" r="3.5" fill="#ef4444" />

      
      <text id="c-label" x="200" y="24" text-anchor="middle" font-size="14" font-weight="700" fill="#0284c7">C = 12.57</text>
      <text id="d-label" x="200" y="102" text-anchor="middle" font-size="14" font-weight="700" fill="#ef4444">d = 4.0</text>
    </svg>
  </div>

  <div class="unroll-card">
    <div class="bar-labels">
      <span style="color:#0284c7">Loop (C)</span>
      <span>3 × d + 0.14d</span>
    </div>
    <div class="bar-track">
      <div class="d-segment seg-1">1d</div>
      <div class="d-segment seg-2">2d</div>
      <div class="d-segment seg-3">3d</div>
      <div class="d-segment seg-rem">+0.14</div>
    </div>
  </div>

  <div class="math-card">
    <div class="fraction">
      <span class="top" id="top-val">12.57</span>
      <span class="bot" id="bot-val">4.00</span>
    </div>
    <span>=</span>
    <span>3.14159…</span>
    <span>=</span>
    <span class="pi-badge">π</span>
  </div>

<script>
  const data = [
    { r: 35, d: 3.0, c: 9.42, dPx: 70 },
    { r: 50, d: 5.0, c: 15.71, dPx: 100 },
    { r: 68, d: 7.0, c: 21.99, dPx: 136 }
  ];

  function setSize(idx) {
    const btns = document.querySelectorAll('.size-btn');
    btns.forEach((b, i) => b.classList.toggle('active', i === idx));

    const item = data[idx];
    const circ = document.getElementById('circ');
    const dLine = document.getElementById('d-line');
    const p1 = document.getElementById('d-p1');
    const p2 = document.getElementById('d-p2');
    const cLabel = document.getElementById('c-label');
    const dLabel = document.getElementById('d-label');
    const topVal = document.getElementById('top-val');
    const botVal = document.getElementById('bot-val');

    circ.setAttribute('r', item.r);
    const x1 = 200 - item.r;
    const x2 = 200 + item.r;

    dLine.setAttribute('x1', x1);
    dLine.setAttribute('x2', x2);
    p1.setAttribute('cx', x1);
    p2.setAttribute('cx', x2);

    cLabel.setAttribute('y', 80 - item.r - 8);
    cLabel.textContent = `C = ${item.c.toFixed(2)}`;

    dLabel.setAttribute('y', 80 + 20);
    dLabel.textContent = `d = ${item.d.toFixed(1)}`;

    topVal.textContent = item.c.toFixed(2);
    botVal.textContent = item.d.toFixed(2);
  }

  // Initialize
  setSize(1);
</script>

</body>
</html>

It is easy to think a bigger circle makes a bigger ratio, but because both the width and the loop grow together, the answer is always **$\pi$**.

Next time you see a round plate, try wrapping a piece of string around it and see the magic 3-and-a-bit rule for yourself!

math

Investigating the Ratio Pi from Circumference and Diameter. Demonstrate that pi is the constant ratio of circumference to diameter for any circle.

Radius, Diameter, Circumference & Pi

Approximating Pi - Investigating Circle Ratios and Bounds

Circumference of a Circle - CfE Fourth Level / National 4 Mathematics

Although the standard MTH 4-16b corresponds to CfE Fourth Level (early secondary / S1–S3), the pedagogical strategy begins with concrete, hands-on discovery: measuring real circular objects with flexible tape or string, tabulating $C$ and $d$, and calculating $\frac{C}{d}$ to observe convergence to ~3.14. This prepares learners to transition from concrete measurement to abstract algebraic modeling ($C = \pi d$).

Investigating the Ratio Pi from Circumference and Diameter

Measuring a Circle

The Magic Number: Three and a Bit

Every Circle Shares the Secret