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

What happens when you cut the middle out of a big square piece of paper? You get a picture frame with a hole in the center!

The **area** is the total number of flat square tiles that fit inside a shape.

This method is the **Subtractive Area Strategy**: to find the area of a border, path, or frame, subtract the inner shape from the outer shape using $A_{\text{border}} = A_{\text{outer}} - A_{\text{inner}}$.

<!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>Subtractive Area Strategy</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    height: 100%;
    min-height: 380px;
    user-select: none;
  }
  .controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 420px;
  }
  .step-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
  }
  .step-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
  }
  .stage-area {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .dim-line {
    stroke: #64748b;
    stroke-width: 1.5;
  }
  .dim-text {
    font-size: 14px;
    fill: #1e2945;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: middle;
  }
  .math-bar {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    font-size: 16px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .shape-outer {
    transition: fill 0.35s ease, stroke 0.35s ease;
  }
  .shape-inner {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease, fill 0.35s ease;
    transform-origin: 210px 110px;
  }
</style>
</head>
<body>

<div class="controls">
  <button class="step-btn active" data-step="0">1. Outer</button>
  <button class="step-btn" data-step="1">2. Inner</button>
  <button class="step-btn" data-step="2">3. Border</button>
</div>

<div class="stage-area">
  <svg viewBox="0 0 420 220" preserveAspectRatio="xMidYMid meet">
    
    <defs>
      <marker id="arrow" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
        <path d="M 0 1.5 L 4.5 3 L 0 4.5 z" fill="#64748b" />
      </marker>
    </defs>

    
    <rect id="outerRect" class="shape-outer" x="80" y="30" width="260" height="160" rx="4" fill="#22b7ff" stroke="#0099e6" stroke-width="2" />

    
    <rect id="innerRect" class="shape-inner" x="145" y="70" width="130" height="80" rx="2" fill="#22b7ff" stroke="#ffffff" stroke-width="2" stroke-dasharray="4" />

    
    <g id="outerDims" opacity="1" style="transition: opacity 0.3s ease;">
      
      <line class="dim-line" x1="80" y1="18" x2="340" y2="18" marker-start="url(#arrow)" marker-end="url(#arrow)" />
      <rect x="190" y="9" width="40" height="18" fill="#ffffff" rx="4" />
      <text class="dim-text" x="210" y="18">10 cm</text>

      
      <line class="dim-line" x1="65" y1="30" x2="65" y2="190" marker-start="url(#arrow)" marker-end="url(#arrow)" />
      <rect x="42" y="99" width="36" height="18" fill="#ffffff" rx="4" />
      <text class="dim-text" x="60" y="108">8 cm</text>
    </g>

    
    <g id="innerDims" opacity="0" style="transition: opacity 0.3s ease;">
      
      <line class="dim-line" x1="145" y1="165" x2="275" y2="165" marker-start="url(#arrow)" marker-end="url(#arrow)" />
      <rect x="195" y="156" width="30" height="18" fill="#ffffff" rx="4" />
      <text class="dim-text" x="210" y="165">6 cm</text>

      
      <line class="dim-line" x1="290" y1="70" x2="290" y2="150" marker-start="url(#arrow)" marker-end="url(#arrow)" />
      <rect x="295" y="101" width="30" height="18" fill="#ffffff" rx="4" />
      <text class="dim-text" x="310" y="110">4 cm</text>
    </g>
  </svg>
</div>

<div class="math-bar" id="mathBar"></div>

<script>
  const mathBar = document.getElementById('mathBar');
  const outerRect = document.getElementById('outerRect');
  const innerRect = document.getElementById('innerRect');
  const outerDims = document.getElementById('outerDims');
  const innerDims = document.getElementById('innerDims');
  const buttons = document.querySelectorAll('.step-btn');

  const formulas = [
    "A_{\\text{outer}} = 10 \\times 8 = 80\\text{ cm}^2",
    "A_{\\text{inner}} = 6 \\times 4 = 24\\text{ cm}^2",
    "A_{\\text{border}} = 80 - 24 = 56\\text{ cm}^2"
  ];

  function renderStep(index) {
    buttons.forEach((b, i) => b.classList.toggle('active', i === index));
    katex.render(formulas[index], mathBar, { displayMode: true, throwOnError: false });

    if (index === 0) {
      outerRect.setAttribute('fill', '#22b7ff');
      innerRect.setAttribute('fill', '#22b7ff');
      innerRect.setAttribute('stroke', '#ffffff');
      innerRect.setAttribute('stroke-dasharray', '4');
      innerRect.style.transform = 'scale(1)';
      innerRect.style.opacity = '0';
      outerDims.style.opacity = '1';
      innerDims.style.opacity = '0';
    } else if (index === 1) {
      outerRect.setAttribute('fill', '#e0f2fe');
      innerRect.setAttribute('fill', '#ffffff');
      innerRect.setAttribute('stroke', '#0284c7');
      innerRect.setAttribute('stroke-dasharray', 'none');
      innerRect.style.transform = 'scale(1)';
      innerRect.style.opacity = '1';
      outerDims.style.opacity = '0.4';
      innerDims.style.opacity = '1';
    } else if (index === 2) {
      outerRect.setAttribute('fill', '#22b7ff');
      innerRect.setAttribute('fill', '#f8fafc');
      innerRect.setAttribute('stroke', '#cbd5e1');
      innerRect.setAttribute('stroke-dasharray', 'none');
      innerRect.style.transform = 'scale(0.96)';
      innerRect.style.opacity = '1';
      outerDims.style.opacity = '1';
      innerDims.style.opacity = '1';
    }
  }

  let currentStep = 0;
  renderStep(0);

  buttons.forEach((btn) => {
    btn.addEventListener('click', () => {
      currentStep = parseInt(btn.dataset.step, 10);
      renderStep(currentStep);
    });
  });

  setInterval(() => {
    currentStep = (currentStep + 1) % 3;
    renderStep(currentStep);
  }, 4000);
</script>

</body>
</html>

Can we use this same take-away trick to build a path around a sandbox?

Imagine a big playground space that is 5 squares long and 5 squares wide, making 25 tiles in all.

A sandbox sits right in the middle and takes up a 3-by-3 block of 9 tiles.

<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
  }
  .wrapper {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .nav-tabs {
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: center;
  }
  .tab-btn {
    flex: 1;
    max-width: 120px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #4b5563;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
  }
  .tab-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
  }
  .grid-container {
    position: relative;
    width: 220px;
    height: 220px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 4px;
    padding: 6px;
    background: #f1f5f9;
    border-radius: 12px;
  }
  .cell {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  }
  /* States */
  /* Step 0: Total 5x5 */
  .state-0 .cell {
    background: #93c5fd;
    color: #1e3a8a;
  }
  /* Step 1: Inner 3x3 */
  .state-1 .cell.border-cell {
    background: #e2e8f0;
    color: #94a3b8;
    opacity: 0.45;
  }
  .state-1 .cell.inner-cell {
    background: #fcd34d;
    color: #78350f;
  }
  /* Step 2: Difference Frame */
  .state-2 .cell.border-cell {
    background: #22b7ff;
    color: #ffffff;
  }
  .state-2 .cell.inner-cell {
    background: #e2e8f0;
    color: #94a3b8;
    opacity: 0.35;
  }

  .math-display {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #1e2945;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    width: 100%;
    padding: 8px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
  }
</style>
</head>
<body>

<div class="wrapper">
  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setStep(0)">1. Total</button>
    <button class="tab-btn" onclick="setStep(1)">2. Sandbox</button>
    <button class="tab-btn" onclick="setStep(2)">3. Path</button>
  </div>

  <div id="grid" class="grid-container state-0"></div>

  <div class="math-display" id="equation"></div>

  <div class="legend">
    <div class="legend-item">
      <div class="legend-swatch" id="swatch-1" style="background:#93c5fd;"></div>
      <span id="label-1">Outer Space (5 × 5)</span>
    </div>
  </div>
</div>

<script>
  const gridEl = document.getElementById('grid');
  const eqEl = document.getElementById('equation');
  const swatchEl = document.getElementById('swatch-1');
  const labelEl = document.getElementById('label-1');
  const buttons = document.querySelectorAll('.tab-btn');

  // Build 5x5 grid
  for (let r = 0; r < 5; r++) {
    for (let c = 0; c < 5; c++) {
      const cell = document.createElement('div');
      cell.classList.add('cell');
      const isInner = (r >= 1 && r <= 3 && c >= 1 && c <= 3);
      if (isInner) {
        cell.classList.add('inner-cell');
      } else {
        cell.classList.add('border-cell');
      }
      gridEl.appendChild(cell);
    }
  }

  const steps = [
    {
      state: 'state-0',
      tex: '\\text{Total Area} = 5 \\times 5 = 25',
      swatch: '#93c5fd',
      label: 'Outer: 25 tiles'
    },
    {
      state: 'state-1',
      tex: '\\text{Sandbox Area} = 3 \\times 3 = 9',
      swatch: '#fcd34d',
      label: 'Sandbox: 9 tiles'
    },
    {
      state: 'state-2',
      tex: '\\text{Path Area} = 25 - 9 = 16',
      swatch: '#22b7ff',
      label: 'Path Frame: 16 tiles'
    }
  ];

  let currentStep = 0;
  let autoTimer = null;

  function renderStep(idx) {
    currentStep = idx;
    gridEl.className = 'grid-container ' + steps[idx].state;
    buttons.forEach((btn, i) => {
      btn.classList.toggle('active', i === idx);
    });

    if (window.katex) {
      katex.render(steps[idx].tex, eqEl, { throwOnError: false });
    } else {
      eqEl.textContent = steps[idx].tex;
    }

    swatchEl.style.background = steps[idx].swatch;
    labelEl.textContent = steps[idx].label;
  }

  function setStep(idx) {
    clearInterval(autoTimer);
    renderStep(idx);
    startAutoLoop();
  }

  function startAutoLoop() {
    autoTimer = setInterval(() => {
      currentStep = (currentStep + 1) % steps.length;
      renderStep(currentStep);
    }, 4000);
  }

  // Initial render
  renderStep(0);
  startAutoLoop();
</script>

</body>
</html>

We take the whole space of 25 tiles and subtract the 9 sandbox tiles: $25 - 9 = 16$ stone tiles for our path.

Why not just count each side of the path one by one?

When people count sides one at a time, they often count the corner tiles twice by accident.

<!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">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
  body {
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 100%;
    user-select: none;
  }

  .nav {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 24px;
  }
  .tab-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .stage {
    position: relative;
    width: 270px;
    height: 225px;
    margin: 8px auto;
  }

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

  .cell {
    border-radius: 6px;
    background: #e2e8f0;
    transition: all 0.35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    position: relative;
  }

  /* States */
  .cell.outer-fill { background: #93c5fd; color: #1e3a8a; }
  .cell.inner-hole { background: #f8fafc; border: 2px dashed #94a3b8; color: #94a3b8; }
  .cell.frame-fill { background: #22c55e; color: #ffffff; }

  .cell.side-tile { background: #e0f2fe; }
  .cell.corner-trap {
    background: #fee2e2;
    border: 2px solid #ef4444;
    color: #ef4444;
  }
  .cell.corner-trap::after {
    content: "×2";
    font-size: 11px;
    font-weight: 800;
  }

  /* Dimension side labels */
  .dim {
    position: absolute;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dim-top { top: -20px; left: 0; width: 100%; }
  .dim-left { left: -22px; top: 0; height: 100%; }

  .math-card {
    margin-top: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .tag {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 13px;
  }
  .tag-green { background: #dcfce7; color: #15803d; }
  .tag-red { background: #fee2e2; color: #b91c1c; }
  .tag-blue { background: #dbeafe; color: #1d4ed8; }

  .stepper {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }
  .step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .step-dot.active {
    background: #22c55e;
    transform: scale(1.3);
  }
</style>
</head>
<body>

<div class="nav">
  <button class="tab-btn active" id="btnSubtract" onclick="setMode('subtract')">Outer − Inner</button>
  <button class="tab-btn" id="btnTrap" onclick="setMode('trap')">Corner Trap</button>
</div>

<div class="stage">
  <div class="dim dim-top">6</div>
  <div class="dim dim-left">5</div>
  <div class="grid" id="grid"></div>
</div>

<div class="math-card" id="mathOutput">
  
</div>

<div class="stepper" id="stepper">
  <div class="step-dot active" onclick="setStep(0)"></div>
  <div class="step-dot" onclick="setStep(1)"></div>
  <div class="step-dot" onclick="setStep(2)"></div>
</div>

<script>
  const COLS = 6;
  const ROWS = 5;
  const gridEl = document.getElementById('grid');
  const mathOutput = document.getElementById('mathOutput');
  const stepper = document.getElementById('stepper');

  let mode = 'subtract'; // 'subtract' | 'trap'
  let subStep = 0;
  let timer = null;

  // Build cells
  const cells = [];
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      const el = document.createElement('div');
      el.className = 'cell';
      gridEl.appendChild(el);
      const isInner = (r > 0 && r < ROWS - 1 && c > 0 && c < COLS - 1);
      const isCorner = (r === 0 || r === ROWS - 1) && (c === 0 || c === COLS - 1);
      cells.push({ el, r, c, isInner, isCorner });
    }
  }

  function isCorner(r, c) {
    return (r === 0 || r === ROWS - 1) && (c === 0 || c === COLS - 1);
  }

  function render() {
    cells.forEach(c => {
      c.el.className = 'cell';
      c.el.textContent = '';
    });

    if (mode === 'subtract') {
      stepper.style.display = 'flex';
      document.querySelectorAll('.step-dot').forEach((dot, idx) => {
        dot.classList.toggle('active', idx === subStep);
      });

      if (subStep === 0) {
        cells.forEach(c => c.el.classList.add('outer-fill'));
        mathOutput.innerHTML = `<span class="tag tag-blue">Outer</span> 6 × 5 = 30`;
      } else if (subStep === 1) {
        cells.forEach(c => {
          if (c.isInner) {
            c.el.classList.add('inner-hole');
          } else {
            c.el.classList.add('outer-fill');
          }
        });
        mathOutput.innerHTML = `<span class="tag tag-blue">30</span> − <span class="tag" style="background:#f1f5f9;color:#64748b">Inner 4 × 3 = 12</span>`;
      } else {
        cells.forEach(c => {
          if (c.isInner) {
            c.el.classList.add('inner-hole');
          } else {
            c.el.classList.add('frame-fill');
          }
        });
        mathOutput.innerHTML = `<span class="tag tag-green">Border Area</span> 30 − 12 = 18`;
      }
    } else {
      stepper.style.display = 'none';
      cells.forEach(c => {
        if (c.isCorner) {
          c.el.classList.add('corner-trap');
        } else if (!c.isInner) {
          c.el.classList.add('side-tile');
        }
      });
      mathOutput.innerHTML = `6 + 6 + 5 + 5 = 22 <span class="tag tag-red">−4 Corners = 18</span>`;
    }
  }

  function setMode(newMode) {
    mode = newMode;
    document.getElementById('btnSubtract').classList.toggle('active', mode === 'subtract');
    document.getElementById('btnTrap').classList.toggle('active', mode === 'trap');
    subStep = 0;
    resetTimer();
    render();
  }

  function setStep(idx) {
    subStep = idx;
    resetTimer();
    render();
  }

  function autoPlay() {
    if (mode === 'subtract') {
      subStep = (subStep + 1) % 3;
      render();
    }
  }

  function resetTimer() {
    clearInterval(timer);
    if (mode === 'subtract') {
      timer = setInterval(autoPlay, 3200);
    }
  }

  render();
  resetTimer();
</script>

</body>
</html>

Subtracting the inner hole from the big shape is fast, easy, and keeps your count exact every time.

When **uniform borders** of width $w$ surround an inner rectangle of length $l$ and width $b$, the border adds width to both sides.

This **outer dimension calculation** gives $L_{\text{outer}} = l + 2w$ and $W_{\text{outer}} = b + 2w$.

Conversely, an **inner dimension calculation** subtracts the border from both sides of the **outer bounds**: $l_{\text{inner}} = L_{\text{outer}} - 2w$ and $w_{\text{inner}} = W_{\text{outer}} - 2w$.

The subtractive strategy also works for circular borders called **concentric rings** (or an annulus).

For an outer radius $R$ and inner radius $r$, the shaded area between circles is $A = \pi R^2 - \pi r^2 = \pi (R^2 - r^2)$.

Always maintain **unit consistency** by converting every dimension into the same linear unit before calculating areas.

Your final border area must always be written in square units, such as $\text{cm}^2$ or $\text{m}^2$.

When adding **uniform borders** of width $w$ around an inner rectangle ($l \times b$), the border extends on both sides.

For an **Outer Dimension Calculation**, add the border twice: $L_{\text{outer}} = l + 2w$ and $W_{\text{outer}} = b + 2w$.

When a path is cut inside, an **Inner Dimension Calculation** starts from the **outer bounds** and subtracts both margins: $l_{\text{inner}} = L_{\text{outer}} - 2w$ and $w_{\text{inner}} = W_{\text{outer}} - 2w$.

<!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>Calculating Shaded Border Area</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
    }

    .nav-tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
      margin-bottom: 8px;
    }

    .tab-btn {
      flex: 1;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

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

    .svg-container {
      width: 100%;
      max-width: 440px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 250px;
      overflow: visible;
    }

    .math-card {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 10px;
      padding: 10px 14px;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      margin-top: 6px;
    }

    .dim-line {
      stroke: #64748b;
      stroke-width: 1.5;
    }

    .arrow {
      fill: #64748b;
    }

    .label-text {
      font-size: 12px;
      font-weight: 600;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .margin-highlight {
      fill: #fef3c7;
      stroke: #f59e0b;
      stroke-dasharray: 4;
      stroke-width: 1.5;
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" id="tab0" onclick="setStep(0)">1. Outer</button>
    <button class="tab-btn" id="tab1" onclick="setStep(1)">2. Margins (−2w)</button>
    <button class="tab-btn" id="tab2" onclick="setStep(2)">3. Border Area</button>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 380 210">
      <defs>
        <marker id="arr-start" markerWidth="6" markerHeight="6" refX="2" refY="3" orient="auto">
          <path d="M5,1 L1,3 L5,5" fill="none" stroke="#64748b" stroke-width="1.2" />
        </marker>
        <marker id="arr-end" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <path d="M1,1 L5,3 L1,5" fill="none" stroke="#64748b" stroke-width="1.2" />
        </marker>
        <marker id="arr-blue-start" markerWidth="6" markerHeight="6" refX="2" refY="3" orient="auto">
          <path d="M5,1 L1,3 L5,5" fill="none" stroke="#0284c7" stroke-width="1.2" />
        </marker>
        <marker id="arr-blue-end" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <path d="M1,1 L5,3 L1,5" fill="none" stroke="#0284c7" stroke-width="1.2" />
        </marker>
      </defs>

      
      <rect id="outerRect" x="65" y="35" width="250" height="150" rx="4"
            fill="#e0f2fe" stroke="#0284c7" stroke-width="2" />

      
      <g id="marginBands" style="display: none;">
        
        <rect x="65" y="35" width="35" height="150" fill="#fef3c7" opacity="0.7"/>
        
        <rect x="280" y="35" width="35" height="150" fill="#fef3c7" opacity="0.7"/>
        
        <rect x="100" y="35" width="180" height="30" fill="#fde68a" opacity="0.7"/>
        
        <rect x="100" y="155" width="180" height="30" fill="#fde68a" opacity="0.7"/>

        
        <text x="82.5" y="110" class="label-text" fill="#b45309" font-size="11">w</text>
        <text x="297.5" y="110" class="label-text" fill="#b45309" font-size="11">w</text>
        <text x="190" y="50" class="label-text" fill="#b45309" font-size="11">w</text>
        <text x="190" y="170" class="label-text" fill="#b45309" font-size="11">w</text>
      </g>

      
      <rect id="innerRect" x="100" y="65" width="180" height="90" rx="2"
            fill="#ffffff" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4"
            style="display: none;" />

      
      <g id="outerDims">
        <line x1="65" y1="20" x2="315" y2="20" class="dim-line" marker-start="url(#arr-start)" marker-end="url(#arr-end)" />
        <line x1="65" y1="16" x2="65" y2="30" stroke="#cbd5e1" stroke-width="1"/>
        <line x1="315" y1="16" x2="315" y2="30" stroke="#cbd5e1" stroke-width="1"/>
        <text x="190" y="12" class="label-text">L = 10 m</text>

        
        <line x1="45" y1="35" x2="45" y2="185" class="dim-line" marker-start="url(#arr-start)" marker-end="url(#arr-end)" />
        <line x1="40" y1="35" x2="55" y2="35" stroke="#cbd5e1" stroke-width="1"/>
        <line x1="40" y1="185" x2="55" y2="185" stroke="#cbd5e1" stroke-width="1"/>
        <text x="25" y="110" class="label-text">W = 7 m</text>
      </g>

      
      <g id="innerDims" style="display: none;">
        
        <line x1="100" y1="80" x2="280" y2="80" stroke="#0284c7" stroke-width="1.5" marker-start="url(#arr-blue-start)" marker-end="url(#arr-blue-end)"/>
        <text x="190" y="93" class="label-text" fill="#0284c7">l = 10 − 2(1) = 8 m</text>

        
        <line x1="260" y1="65" x2="260" y2="155" stroke="#0284c7" stroke-width="1.5" marker-start="url(#arr-blue-start)" marker-end="url(#arr-blue-end)"/>
        <text x="190" y="125" class="label-text" fill="#0284c7">w = 7 − 2(1) = 5 m</text>
      </g>
    </svg>
  </div>

  
  <div class="math-card" id="mathCard"></div>

  <script>
    const steps = [
      {
        outerFill: '#bae6fd',
        outerStroke: '#0284c7',
        showMargins: false,
        showInner: false,
        showInnerDims: false,
        math: 'A_{\\text{outer}} = 10 \\times 7 = 70\\text{ m}^2'
      },
      {
        outerFill: '#f8fafc',
        outerStroke: '#94a3b8',
        showMargins: true,
        showInner: true,
        showInnerDims: true,
        math: 'A_{\\text{inner}} = (10 - 2) \\times (7 - 2) = 8 \\times 5 = 40\\text{ m}^2'
      },
      {
        outerFill: '#22b7ff',
        outerStroke: '#0284c7',
        showMargins: false,
        showInner: true,
        showInnerDims: false,
        math: 'A_{\\text{border}} = 70 - 40 = 30\\text{ m}^2'
      }
    ];

    let currentStep = 0;

    function renderMath(latex) {
      const el = document.getElementById('mathCard');
      if (window.katex) {
        katex.render(latex, el, { displayMode: true, throwOnError: false });
      } else {
        el.textContent = latex;
      }
    }

    function setStep(index) {
      currentStep = index;
      const s = steps[index];

      // Update Tabs
      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Update SVG elements
      const outer = document.getElementById('outerRect');
      outer.setAttribute('fill', s.outerFill);
      outer.setAttribute('stroke', s.outerStroke);

      document.getElementById('marginBands').style.display = s.showMargins ? 'inline' : 'none';
      document.getElementById('innerRect').style.display = s.showInner ? 'inline' : 'none';
      document.getElementById('innerDims').style.display = s.showInnerDims ? 'inline' : 'none';

      // Update Formula
      renderMath(s.math);
    }

    // Auto initialization
    window.addEventListener('DOMContentLoaded', () => {
      setStep(0);
    });
  </script>
</body>
</html>

The subtractive strategy works for curved shapes too, like an annulus formed by two **concentric rings** sharing the same center.

For an outer radius $R$ and inner radius $r$, the shaded ring area is $A = \pi R^2 - \pi r^2 = \pi (R^2 - r^2)$.

<!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>Shaded Ring Area</title>
<link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
<script src="{{VENDOR_CDN}}/katex.min.js"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    gap: 12px;
  }
  .controls {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 500px;
  }
  .control-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    font-weight: 600;
  }
  input[type="range"] {
    width: 90px;
    accent-color: #22b7ff;
    cursor: pointer;
  }
  .diagram-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 520px;
  }
  .shape-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 90px;
  }
  .symbol {
    font-size: 24px;
    font-weight: 700;
    color: #64748b;
  }
  svg {
    width: 100%;
    max-width: 130px;
    height: 130px;
  }
  .math-card {
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 16px;
    text-align: center;
    width: 100%;
    max-width: 480px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .val-badge {
    color: #0284c7;
    font-weight: 700;
    min-width: 16px;
    display: inline-block;
  }
</style>
</head>
<body>

  <div class="controls">
    <div class="control-group">
      <span><span style="color:#0284c7;">R</span> = <span id="rBigVal" class="val-badge">6</span></span>
      <input type="range" id="rBig" min="4" max="8" value="6" step="1">
    </div>
    <div class="control-group">
      <span><span style="color:#e11d48;">r</span> = <span id="rSmallVal" class="val-badge">3</span></span>
      <input type="range" id="rSmall" min="1" max="5" value="3" step="1">
    </div>
  </div>

  <div class="diagram-row">
    
    <div class="shape-box">
      <svg viewBox="0 0 130 130">
        <circle id="outerOnly" cx="65" cy="65" r="50" fill="#bae6fd" stroke="#0284c7" stroke-width="2.5" />
        <line id="lineR1" x1="65" y1="65" x2="115" y2="65" stroke="#0284c7" stroke-width="2" stroke-dasharray="3,2" />
        <circle cx="65" cy="65" r="3" fill="#0284c7" />
        <text id="txtR1" x="90" y="58" font-size="13" font-weight="bold" fill="#0284c7" text-anchor="middle">R</text>
      </svg>
    </div>

    <div class="symbol">−</div>

    
    <div class="shape-box">
      <svg viewBox="0 0 130 130">
        <circle id="innerOnly" cx="65" cy="65" r="25" fill="#fecdd3" stroke="#e11d48" stroke-width="2.5" />
        <line id="lineR2" x1="65" y1="65" x2="90" y2="65" stroke="#e11d48" stroke-width="2" stroke-dasharray="3,2" />
        <circle cx="65" cy="65" r="3" fill="#e11d48" />
        <text id="txtR2" x="77" y="58" font-size="13" font-weight="bold" fill="#e11d48" text-anchor="middle">r</text>
      </svg>
    </div>

    <div class="symbol">=</div>

    
    <div class="shape-box">
      <svg viewBox="0 0 130 130">
        
        <circle id="ringOuter" cx="65" cy="65" r="50" fill="#38bdf8" stroke="#0284c7" stroke-width="2.5" />
        <circle id="ringInner" cx="65" cy="65" r="25" fill="#ffffff" stroke="#e11d48" stroke-width="2" stroke-dasharray="3,2" />
        <line id="ringLineR" x1="65" y1="65" x2="100.3" y2="29.6" stroke="#0284c7" stroke-width="1.8" stroke-dasharray="2,2" />
        <line id="ringLineRSmall" x1="65" y1="65" x2="82.7" y2="82.7" stroke="#e11d48" stroke-width="1.8" stroke-dasharray="2,2" />
        <circle cx="65" cy="65" r="3" fill="#1e2945" />
        <text id="txtRingR" x="92" y="42" font-size="12" font-weight="bold" fill="#0284c7">R</text>
        <text id="txtRingRSmall" x="78" y="80" font-size="12" font-weight="bold" fill="#e11d48">r</text>
      </svg>
    </div>
  </div>

  <div class="math-card" id="mathOutput"></div>

  <script>
    const rBigInput = document.getElementById('rBig');
    const rSmallInput = document.getElementById('rSmall');
    const rBigVal = document.getElementById('rBigVal');
    const rSmallVal = document.getElementById('rSmallVal');
    const mathOutput = document.getElementById('mathOutput');

    const outerOnly = document.getElementById('outerOnly');
    const innerOnly = document.getElementById('innerOnly');
    const ringOuter = document.getElementById('ringOuter');
    const ringInner = document.getElementById('ringInner');

    const lineR1 = document.getElementById('lineR1');
    const txtR1 = document.getElementById('txtR1');
    const lineR2 = document.getElementById('lineR2');
    const txtR2 = document.getElementById('txtR2');

    const ringLineR = document.getElementById('ringLineR');
    const txtRingR = document.getElementById('txtRingR');
    const ringLineRSmall = document.getElementById('ringLineRSmall');
    const txtRingRSmall = document.getElementById('txtRingRSmall');

    function update() {
      let R = parseInt(rBigInput.value, 10);
      let r = parseInt(rSmallInput.value, 10);

      if (r >= R) {
        r = R - 1;
        rSmallInput.value = r;
      }

      rBigVal.textContent = R;
      rSmallVal.textContent = r;

      const scale = 7;
      const pixR = R * scale;
      const pixr = r * scale;
      const cx = 65, cy = 65;

      outerOnly.setAttribute('r', pixR);
      lineR1.setAttribute('x2', cx + pixR);
      txtR1.setAttribute('x', cx + pixR / 2);

      innerOnly.setAttribute('r', pixr);
      lineR2.setAttribute('x2', cx + pixr);
      txtR2.setAttribute('x', cx + pixr / 2);

      ringOuter.setAttribute('r', pixR);
      ringInner.setAttribute('r', pixr);

      const rad45 = Math.PI / 4;
      const cos45 = Math.cos(rad45);
      const sin45 = Math.sin(rad45);

      ringLineR.setAttribute('x2', cx + pixR * cos45);
      ringLineR.setAttribute('y2', cy - pixR * sin45);
      txtRingR.setAttribute('x', cx + (pixR * 0.65) * cos45 + 3);
      txtRingR.setAttribute('y', cy - (pixR * 0.65) * sin45);

      ringLineRSmall.setAttribute('x2', cx + pixr * cos45);
      ringLineRSmall.setAttribute('y2', cy + pixr * sin45);
      txtRingRSmall.setAttribute('x', cx + (pixr * 0.6) * cos45 + 3);
      txtRingRSmall.setAttribute('y', cy + (pixr * 0.6) * sin45 + 10);

      const diff = R * R - r * r;
      const approx = (diff * Math.PI).toFixed(1);

      const latex = `A = \\pi(${R}^2 - ${r}^2) = \\pi(${R*R} - ${r*r}) = ${diff}\\pi \\approx ${approx}`;

      if (window.katex) {
        katex.render(latex, mathOutput, { throwOnError: false });
      } else {
        mathOutput.textContent = `A = π(${R}² - ${r}²) = π(${R*R} - ${r*r}) = ${diff}π ≈ ${approx}`;
      }
    }

    rBigInput.addEventListener('input', update);
    rSmallInput.addEventListener('input', update);

    update();
  </script>
</body>
</html>

Before multiplying lengths and widths, maintain **unit consistency** by converting all linear measurements to the exact same unit.

After computing your outer and inner areas, always write the final border area in square units, such as $\text{cm}^2$ or $\text{m}^2$.

math

Calculating Shaded Border and Frame Areas. Compute area of picture frames, garden paths, and concentric rings by subtracting inner areas.

Third Level Maths: Area of Compound 2D Shapes (CfE MTH 3-11b)

Area of Shaded Region Between Shapes and Concentric Rings

Picture Frames and Border Area Investigation

Pedagogical progression begins with concrete paper-cutting models (cutting an inner rectangle out of card to show subtraction), advancing to dual-method verification (subtractive vs. partitioning into rectangular strips), and culminating in algebraic generalization for rings and multi-layered composite borders aligned with CfE MTH 3-11b.

Calculating Shaded Border and Frame Areas

The Take-Away Trick

Stepping Stone Path

Watch the Corners!