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 zoom in on a picture on your phone? The picture gets bigger, but the shapes do not look squished or weird.

In math, when two shapes have the exact same shape but different sizes, we call them **similar figures**.

<!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; }
    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;
    }

    .canvas-container {
      width: 100%;
      max-width: 520px;
      aspect-ratio: 16 / 10;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 14px;
      background: #ffffff;
      padding: 8px 16px;
      border-radius: 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .btn {
      border: none;
      background: #f1f5f9;
      color: #1e2945;
      font-weight: 600;
      font-size: 14px;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn.active {
      background: #22b7ff;
      color: #ffffff;
    }

    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }

    input[type="range"] {
      width: 110px;
      accent-color: #22b7ff;
      cursor: pointer;
    }

    .stat-badge {
      position: absolute;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      pointer-events: none;
    }

    #badge-angle {
      top: 12px;
      left: 12px;
      background: #e0f2fe;
      color: #0369a1;
    }

    #badge-sides {
      top: 12px;
      right: 12px;
      background: #fef3c7;
      color: #b45309;
    }
  </style>
</head>
<body>

  <div class="canvas-container">
    <div class="stat-badge" id="badge-angle">Angles: Equal (✓)</div>
    <div class="stat-badge" id="badge-sides">Sides: 1.5×</div>

    <svg id="svg" viewBox="0 0 520 320">
      
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" stroke-width="1"/>
        </pattern>
      </defs>
      <rect width="520" height="320" fill="url(#grid)" />

      
      <g id="triA">
        <polygon points="60,260 170,260 140,150" fill="rgba(34, 183, 255, 0.12)" stroke="#22b7ff" stroke-width="3" stroke-linejoin="round"/>
        
        <path d="M 80 260 A 20 20 0 0 0 71 241" fill="none" stroke="#0284c7" stroke-width="2"/>
        <path d="M 152 260 A 18 18 0 0 1 161 243" fill="none" stroke="#ea580c" stroke-width="2"/>
        <path d="M 134 168 A 20 20 0 0 1 146 172" fill="none" stroke="#16a34a" stroke-width="2"/>
        
        
        <text x="115" y="278" font-size="13" font-weight="700" fill="#64748b" text-anchor="middle">4</text>
        <text x="88" y="200" font-size="13" font-weight="700" fill="#64748b" text-anchor="middle">5</text>
        <text x="165" y="200" font-size="13" font-weight="700" fill="#64748b" text-anchor="middle">4.2</text>
        <text x="115" y="225" font-size="14" font-weight="800" fill="#0284c7" text-anchor="middle">A</text>
      </g>

      
      <g id="triB">
        <polygon id="polyB" points="260,260 425,260 380,95" fill="rgba(245, 158, 11, 0.12)" stroke="#f59e0b" stroke-width="3" stroke-linejoin="round"/>
        
        <path id="arcB1" d="" fill="none" stroke="#0284c7" stroke-width="2"/>
        <path id="arcB2" d="" fill="none" stroke="#ea580c" stroke-width="2"/>
        <path id="arcB3" d="" fill="none" stroke="#16a34a" stroke-width="2"/>

        
        <text id="lblB-base" x="342" y="278" font-size="13" font-weight="700" fill="#b45309" text-anchor="middle">6</text>
        <text id="lblB-left" x="300" y="170" font-size="13" font-weight="700" fill="#b45309" text-anchor="middle">7.5</text>
        <text id="lblB-right" x="415" y="170" font-size="13" font-weight="700" fill="#b45309" text-anchor="middle">6.3</text>
        <text id="lblB-title" x="350" y="210" font-size="14" font-weight="800" fill="#d97706" text-anchor="middle">B</text>
      </g>
    </svg>
  </div>

  <div class="controls">
    <div class="slider-wrap">
      <span>Scale:</span>
      <input type="range" id="scaleSlider" min="0.8" max="2.0" step="0.1" value="1.5">
      <span id="scaleVal">1.5×</span>
    </div>
    <button class="btn active" id="btnSimilar">Similar</button>
    <button class="btn" id="btnDistort">Distort</button>
  </div>

  <script>
    const slider = document.getElementById('scaleSlider');
    const scaleVal = document.getElementById('scaleVal');
    const polyB = document.getElementById('polyB');
    const lblBase = document.getElementById('lblB-base');
    const lblLeft = document.getElementById('lblB-left');
    const lblRight = document.getElementById('lblB-right');
    const lblTitle = document.getElementById('lblB-title');
    const arcB1 = document.getElementById('arcB1');
    const arcB2 = document.getElementById('arcB2');
    const arcB3 = document.getElementById('arcB3');
    const badgeAngle = document.getElementById('badge-angle');
    const badgeSides = document.getElementById('badge-sides');
    const btnSimilar = document.getElementById('btnSimilar');
    const btnDistort = document.getElementById('btnDistort');

    let mode = 'similar';

    // Base Triangle A coordinates relative to its origin (60, 260)
    // p1 = (0, 0), p2 = (110, 0), p3 = (80, -110)
    const ox = 260;
    const oy = 260;

    function update() {
      const k = parseFloat(slider.value);
      scaleVal.textContent = k.toFixed(1) + '×';

      let wScale = k;
      let hScale = mode === 'distort' ? k * 0.45 : k;

      const p1x = ox;
      const p1y = oy;
      const p2x = ox + 110 * wScale;
      const p2y = oy;
      const p3x = ox + 80 * wScale;
      const p3y = oy - 110 * hScale;

      polyB.setAttribute('points', `${p1x},${p1y} ${p2x},${p2y} ${p3x},${p3y}`);

      // Side lengths
      const baseLen = (4 * wScale).toFixed(1);
      const side1Len = (5 * Math.hypot(80 * wScale, 110 * hScale) / Math.hypot(80, 110)).toFixed(1);
      const side2Len = (4.2 * Math.hypot(30 * wScale, 110 * hScale) / Math.hypot(30, 110)).toFixed(1);

      lblBase.textContent = baseLen.replace('.0', '');
      lblBase.setAttribute('x', (p1x + p2x) / 2);
      lblBase.setAttribute('y', oy + 18);

      lblLeft.textContent = side1Len.replace('.0', '');
      lblLeft.setAttribute('x', (p1x + p3x) / 2 - 16);
      lblLeft.setAttribute('y', (p1y + p3y) / 2);

      lblRight.textContent = side2Len.replace('.0', '');
      lblRight.setAttribute('x', (p2x + p3x) / 2 + 18);
      lblRight.setAttribute('y', (p2y + p3y) / 2);

      lblTitle.setAttribute('x', (p1x + p2x + p3x) / 3);
      lblTitle.setAttribute('y', (p1y + p2y + p3y) / 3 + 6);

      // Angle Arcs
      const a1 = Math.atan2(p3y - p1y, p3x - p1x);
      const r = 20;
      arcB1.setAttribute('d', `M ${p1x + r} ${p1y} A ${r} ${r} 0 0 0 ${p1x + r * Math.cos(a1)} ${p1y + r * Math.sin(a1)}`);

      const a2 = Math.atan2(p3y - p2y, p3x - p2x);
      arcB2.setAttribute('d', `M ${p2x - r} ${p2y} A ${r} ${r} 0 0 1 ${p2x + r * Math.cos(a2)} ${p2y + r * Math.sin(a2)}`);

      if (mode === 'similar') {
        badgeAngle.textContent = "Angles: Equal (✓)";
        badgeAngle.style.background = "#e0f2fe";
        badgeAngle.style.color = "#0369a1";
        badgeSides.textContent = `Sides: ${k.toFixed(1)}×`;
        badgeSides.style.background = "#fef3c7";
        badgeSides.style.color = "#b45309";
      } else {
        badgeAngle.textContent = "Angles: Changed (✗)";
        badgeAngle.style.background = "#fee2e2";
        badgeAngle.style.color = "#b91c1c";
        badgeSides.textContent = "Sides: Not Proportional";
        badgeSides.style.background = "#fee2e2";
        badgeSides.style.color = "#b91c1c";
      }
    }

    slider.addEventListener('input', update);

    btnSimilar.addEventListener('click', () => {
      mode = 'similar';
      btnSimilar.classList.add('active');
      btnDistort.classList.remove('active');
      update();
    });

    btnDistort.addEventListener('click', () => {
      mode = 'distort';
      btnDistort.classList.add('active');
      btnSimilar.classList.remove('active');
      update();
    });

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

How do we know for sure if two shapes are truly similar?

Every shape has corners called **angles**. In similar shapes, every corner on the small shape has the **exact same angle** as the corner on the big shape.

<!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; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      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;
    }

    .controls {
      display: flex;
      gap: 8px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 20px;
    }

    .btn-toggle {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-toggle.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

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

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

    .slider-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 320px;
      background: #ffffff;
      padding: 8px 16px;
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      border: 1px solid #e2e8f0;
    }

    .slider-row span {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      min-width: 36px;
    }

    input[type="range"] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
      height: 6px;
    }

    #small-group {
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .angle-tag {
      font-size: 11px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn-toggle active" id="btn-side" onclick="setMode('side')">Side by Side</button>
    <button class="btn-toggle" id="btn-overlay" onclick="setMode('overlay')">Overlay</button>
  </div>

  <div class="canvas-container">
    <svg viewBox="0 0 460 210">
      
      <g id="big-group">
        <polygon id="big-poly" points="240,185 430,185 352.5,50.8" fill="#f8fafc" stroke="#64748b" stroke-width="2.5" stroke-linejoin="round" />
        
        
        <g id="big-angles">
          
          <path id="arc-big-a" d="M 268 185 A 28 28 0 0 0 258 163.5" fill="rgba(2, 132, 199, 0.15)" stroke="#0284c7" stroke-width="2" />
          <text id="txt-big-a" x="272" y="172" class="angle-tag" fill="#0284c7">50°</text>

          
          <path id="arc-big-b" d="M 402 185 A 28 28 0 0 1 416 160.8" fill="rgba(16, 185, 129, 0.15)" stroke="#059669" stroke-width="2" />
          <text id="txt-big-b" x="398" y="172" class="angle-tag" fill="#059669">60°</text>

          
          <path id="arc-big-c" d="M 334.5 69 A 28 28 0 0 0 366.6 75.3" fill="rgba(217, 119, 6, 0.15)" stroke="#d97706" stroke-width="2" />
          <text id="txt-big-c" x="352.5" y="80" class="angle-tag" fill="#d97706">70°</text>
        </g>
      </g>

      
      <g id="small-group" transform="translate(0, 0)">
        <polygon points="40,185 145,185 102.2,110.8" fill="rgba(2, 132, 199, 0.08)" stroke="#0284c7" stroke-width="2.5" stroke-linejoin="round" />
        
        
        
        <path d="M 64 185 A 24 24 0 0 0 55.4 166.6" fill="rgba(2, 132, 199, 0.25)" stroke="#0284c7" stroke-width="2" />
        <text x="68" y="173" class="angle-tag" fill="#0284c7">50°</text>

        
        <path d="M 121 185 A 24 24 0 0 1 133 164.2" fill="rgba(16, 185, 129, 0.25)" stroke="#059669" stroke-width="2" />
        <text x="117" y="173" class="angle-tag" fill="#059669">60°</text>

        
        <path d="M 86.8 126.4 A 24 24 0 0 0 114.3 131.8" fill="rgba(217, 119, 6, 0.25)" stroke="#d97706" stroke-width="2" />
        <text x="102.2" y="136" class="angle-tag" fill="#d97706">70°</text>
      </g>
    </svg>
  </div>

  <div class="slider-row">
    <input type="range" id="scale-slider" min="1.1" max="2.0" step="0.05" value="1.8" oninput="updateScale(this.value)">
    <span id="scale-val">1.8×</span>
  </div>

  <script>
    let mode = 'side';
    let currentScale = 1.8;

    function setMode(newMode) {
      mode = newMode;
      document.getElementById('btn-side').classList.toggle('active', mode === 'side');
      document.getElementById('btn-overlay').classList.toggle('active', mode === 'overlay');
      
      const smallGroup = document.getElementById('small-group');
      if (mode === 'overlay') {
        smallGroup.setAttribute('transform', 'translate(200, 0)');
      } else {
        smallGroup.setAttribute('transform', 'translate(0, 0)');
      }
    }

    function updateScale(val) {
      currentScale = parseFloat(val);
      document.getElementById('scale-val').textContent = currentScale.toFixed(1) + '×';

      const baseLen = 105 * currentScale;
      const xA = 240, yA = 185;
      const xB = xA + baseLen;
      const yB = 185;
      
      const bLen = (baseLen / Math.sin(70 * Math.PI / 180)) * Math.sin(60 * Math.PI / 180);
      const xC = xA + bLen * Math.cos(50 * Math.PI / 180);
      const yC = yA - bLen * Math.sin(50 * Math.PI / 180);

      document.getElementById('big-poly').setAttribute('points', `${xA},${yA} ${xB},${yB} ${xC.toFixed(1)},${yC.toFixed(1)}`);

      // Angle B update
      const r = 28;
      const arcBx1 = xB - r;
      const arcBx2 = xB + r * Math.cos(120 * Math.PI / 180);
      const arcBy2 = yB - r * Math.sin(120 * Math.PI / 180);
      document.getElementById('arc-big-b').setAttribute('d', `M ${arcBx1} ${yB} A ${r} ${r} 0 0 1 ${arcBx2.toFixed(1)} ${arcBy2.toFixed(1)}`);
      document.getElementById('txt-big-b').setAttribute('x', (xB - 32).toFixed(1));

      // Angle C update
      const caAngle = 130 * Math.PI / 180;
      const cbAngle = 60 * Math.PI / 180;
      const arcCx1 = xC - r * Math.cos(50 * Math.PI / 180);
      const arcCy1 = yC + r * Math.sin(50 * Math.PI / 180);
      const arcCx2 = xC + r * Math.cos(60 * Math.PI / 180);
      const arcCy2 = yC + r * Math.sin(60 * Math.PI / 180);
      document.getElementById('arc-big-c').setAttribute('d', `M ${arcCx1.toFixed(1)} ${arcCy1.toFixed(1)} A ${r} ${r} 0 0 0 ${arcCx2.toFixed(1)} ${arcCy2.toFixed(1)}`);
      document.getElementById('txt-big-c').setAttribute('x', xC.toFixed(1));
      document.getElementById('txt-big-c').setAttribute('y', (yC + 28).toFixed(1));
    }
  </script>
</body>
</html>

Even though the big triangle has longer sides, its corners are not wider or sharper — they open up the exact same amount.

What about the straight edges of the shapes?

## Rule 2: Growing by the Same Multiplier

When a shape grows into a similar shape, **every side grows** by multiplying by the exact same number.

If you double one side, you must double every other side too! We say the sides are **in proportion**.

<!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; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .k-badge {
      font-size: 15px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .btn-group {
      display: flex;
      gap: 6px;
    }

    .btn {
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .btn:hover {
      background: #f1f5f9;
    }

    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .stage {
      width: 100%;
      max-width: 540px;
      height: 250px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      position: relative;
      overflow: hidden;
      display: flex;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

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

    .side-label {
      font-size: 12px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    .side-a { fill: #0284c7; }
    .side-b { fill: #d97706; }
    .side-c { fill: #7c3aed; }

    .ratio-bar {
      display: flex;
      gap: 12px;
      justify-content: center;
      align-items: center;
      margin-top: 8px;
      flex-wrap: wrap;
      font-size: 14px;
      font-weight: 600;
    }

    .ratio-pill {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 4px 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .pill-a { border-left: 4px solid #0284c7; }
    .pill-b { border-left: 4px solid #d97706; }
    .pill-c { border-left: 4px solid #7c3aed; }
  </style>
</head>
<body>

  <div class="controls">
    <div class="k-badge" id="kDisplay">Scale Factor k = 2</div>
    <div class="btn-group">
      <button class="btn" onclick="setScale(1.5)">k = 1.5</button>
      <button class="btn active" onclick="setScale(2)">k = 2</button>
      <button class="btn" onclick="setScale(2.5)">k = 2.5</button>
      <button class="btn" onclick="setScale(3)">k = 3</button>
    </div>
  </div>

  <div class="stage">
    <svg viewBox="0 0 540 250">
      
      <g transform="translate(45, 175)">
        <polygon points="0,0 100,0 0,-75" fill="#f0f9ff" stroke="#0284c7" stroke-width="2" stroke-linejoin="round"/>
        
        <path d="M 0,-12 L 12,-12 L 12,0" fill="none" stroke="#94a3b8" stroke-width="1.5"/>
        
        <text x="50" y="16" class="side-label side-a">4</text>
        <text x="-16" y="-37" class="side-label side-b">3</text>
        <text x="58" y="-45" class="side-label side-c">5</text>
        <text x="50" y="-85" font-size="11" font-weight="700" fill="#94a3b8" text-anchor="middle">ORIGINAL</text>
      </g>

      
      <g transform="translate(180, 115)">
        <text x="18" y="-10" font-size="13" font-weight="700" fill="#0284c7" text-anchor="middle" id="arrowLabel">× 2</text>
        <path d="M 0,0 L 36,0 M 26,-5 L 36,0 L 26,5" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round"/>
      </g>

      
      <g id="scaledGroup" transform="translate(245, 195)">
        <polygon id="polyB" points="0,0 200,0 0,-150" fill="#f0fdf4" stroke="#16a34a" stroke-width="2" stroke-linejoin="round"/>
        <path id="angleB" d="M 0,-12 L 12,-12 L 12,0" fill="none" stroke="#94a3b8" stroke-width="1.5"/>
        
        <text id="lblBase" x="100" y="16" class="side-label side-a">8</text>
        <text id="lblHeight" x="-18" y="-75" class="side-label side-b">6</text>
        <text id="lblHyp" x="110" y="-85" class="side-label side-c">10</text>
        <text id="lblTitle" x="100" y="-160" font-size="11" font-weight="700" fill="#16a34a" text-anchor="middle">SIMILAR</text>
      </g>
    </svg>
  </div>

  <div class="ratio-bar">
    <div class="ratio-pill pill-a" id="ratioA">8 ÷ 4 = 2</div>
    <div class="ratio-pill pill-b" id="ratioB">6 ÷ 3 = 2</div>
    <div class="ratio-pill pill-c" id="ratioC">10 ÷ 5 = 2</div>
  </div>

  <script>
    const baseW = 50;  // 4 units = 50px base unit (12.5px/unit)
    const baseH = 37.5; // 3 units = 37.5px

    function setScale(k) {
      // Update buttons
      document.querySelectorAll('.btn').forEach(b => {
        b.classList.toggle('active', b.textContent.includes(k.toString()));
      });

      document.getElementById('kDisplay').textContent = `Scale Factor k = ${k}`;
      document.getElementById('arrowLabel').textContent = `× ${k}`;

      // Calculate scaled dimensions
      const sideA = (4 * k);
      const sideB = (3 * k);
      const sideC = (5 * k);

      // SVG dimensions (base unit = 25px per unit scaled nicely to fit)
      const u = 16;
      const w = 4 * k * u;
      const h = 3 * k * u;

      // Update scaled polygon
      const poly = document.getElementById('polyB');
      poly.setAttribute('points', `0,0 ${w},0 0,-${h}`);

      // Update label positions and values
      const lblBase = document.getElementById('lblBase');
      lblBase.setAttribute('x', (w / 2).toString());
      lblBase.textContent = Number.isInteger(sideA) ? sideA : sideA.toFixed(1);

      const lblHeight = document.getElementById('lblHeight');
      lblHeight.setAttribute('y', (-h / 2).toString());
      lblHeight.textContent = Number.isInteger(sideB) ? sideB : sideB.toFixed(1);

      const lblHyp = document.getElementById('lblHyp');
      lblHyp.setAttribute('x', (w / 2 + 10).toString());
      lblHyp.setAttribute('y', (-h / 2 - 10).toString());
      lblHyp.textContent = Number.isInteger(sideC) ? sideC : sideC.toFixed(1);

      const lblTitle = document.getElementById('lblTitle');
      lblTitle.setAttribute('x', (w / 2).toString());
      lblTitle.setAttribute('y', (-h - 10).toString());

      // Update ratio pills
      document.getElementById('ratioA').textContent = `${lblBase.textContent} ÷ 4 = ${k}`;
      document.getElementById('ratioB').textContent = `${lblHeight.textContent} ÷ 3 = ${k}`;
      document.getElementById('ratioC').textContent = `${lblHyp.textContent} ÷ 5 = ${k}`;
    }

    // Initialize k=2
    setScale(2);
  </script>
</body>
</html>

This constant ratio between matching sides is called the **linear scale factor ($k$)**.

You can find $k$ by dividing any transformed side by its corresponding starting side:

$$k = \frac{\text{New Length}}{\text{Original Length}} = \frac{A'B'}{AB} = \frac{B'C'}{BC}$$

Every single pair of matching sides must produce this exact same value.

This constant multiplier is called the **linear scale factor** ($k$).

All pairs of corresponding side lengths must share this same ratio: $$k = \frac{\text{New Length}}{\text{Original Length}} = \frac{A'B'}{AB} = \frac{B'C'}{BC}$$

What happens if only one side gets longer, but the other sides stay the same?

A common mistake is thinking two shapes are similar just because they are both triangles or both rectangles.

If you stretch a picture sideways like a funny carnival mirror, the corners change and the sides do not grow evenly — so it is **not similar**.

<!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>Defining Similarity</title>
<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: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .nav {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 480px;
  }

  .btn {
    flex: 1;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #4b5563;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }

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

  .canvas-card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 8px;
  }

  svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .shape-orig {
    fill: rgba(34, 183, 255, 0.12);
    stroke: #22b7ff;
    stroke-width: 2.5;
  }

  .shape-mod {
    stroke-width: 2.5;
    transition: d 0.35s ease, fill 0.35s ease, stroke 0.35s ease;
  }

  .similar {
    fill: rgba(16, 185, 129, 0.12);
    stroke: #10b981;
  }

  .not-similar {
    fill: rgba(239, 68, 68, 0.12);
    stroke: #ef4444;
  }

  .badge-similar {
    fill: #10b981;
  }

  .badge-not-similar {
    fill: #ef4444;
  }

  .txt-main {
    font-size: 13px;
    font-weight: 700;
    fill: #1e2945;
  }

  .txt-mult {
    font-size: 12px;
    font-weight: 700;
    transition: fill 0.35s ease;
  }

  .txt-angle {
    font-size: 11px;
    font-weight: 600;
    fill: #4b5563;
  }

  .arc {
    fill: none;
    stroke-width: 2;
    transition: d 0.35s ease, stroke 0.35s ease;
  }
</style>
</head>
<body>

<div class="nav">
  <button id="btnSimilar" class="btn active" onclick="setMode(true)">Uniform Scale</button>
  <button id="btnDistort" class="btn" onclick="setMode(false)">Carnival Stretch</button>
</div>

<div class="canvas-card">
  <svg viewBox="0 0 460 250">
    
    <line x1="225" y1="15" x2="225" y2="235" stroke="#f1f5f9" stroke-width="2" stroke-dasharray="4,4" />

    
    <g transform="translate(15, 10)">
      <text x="90" y="24" text-anchor="middle" class="txt-main">Original</text>

      
      <polygon points="45,190 145,190 45,90" class="shape-orig" />
      
      
      <path d="M 45 178 L 57 178 L 57 190" fill="none" stroke="#22b7ff" stroke-width="1.5" />
      
      
      <path d="M 45 110 A 20 20 0 0 0 59 104" fill="none" stroke="#22b7ff" stroke-width="1.5" />
      <text x="65" y="115" class="txt-angle">45°</text>

      
      <text x="95" y="208" text-anchor="middle" class="txt-main">3</text>
      <text x="30" y="145" text-anchor="middle" class="txt-main">3</text>
    </g>

    
    <g transform="translate(235, 10)">
      
      <g id="badgeGroup" transform="translate(105, 18)">
        <rect id="badgeBg" x="-55" y="-14" width="110" height="26" rx="13" class="badge-similar" />
        <text id="badgeTxt" x="0" y="4" text-anchor="middle" fill="#ffffff" font-size="12" font-weight="700">Similar ✓</text>
      </g>

      
      <path id="transShape" d="M 25 190 L 185 190 L 25 30 Z" class="shape-mod similar" />

      
      <path d="M 25 178 L 37 178 L 37 190" fill="none" stroke="#9ca3af" stroke-width="1.5" />

      
      <path id="transArc" d="M 25 50 A 20 20 0 0 0 39 44" class="arc" stroke="#10b981" />
      <text id="transAngleTxt" x="46" y="55" class="txt-angle">45°</text>

      
      <g transform="translate(105, 208)">
        <text id="lblBase" x="0" y="0" text-anchor="middle" class="txt-mult" fill="#10b981">6 (×2)</text>
      </g>
      <g transform="translate(10, 115)">
        <text id="lblHeight" x="0" y="0" text-anchor="middle" class="txt-mult" fill="#10b981">6 (×2)</text>
      </g>
    </g>
  </svg>
</div>

<script>
  let isSimilar = true;

  function setMode(similar) {
    isSimilar = similar;
    
    document.getElementById('btnSimilar').classList.toggle('active', similar);
    document.getElementById('btnDistort').classList.toggle('active', !similar);

    const shape = document.getElementById('transShape');
    const badgeBg = document.getElementById('badgeBg');
    const badgeTxt = document.getElementById('badgeTxt');
    const arc = document.getElementById('transArc');
    const angleTxt = document.getElementById('transAngleTxt');
    const lblBase = document.getElementById('lblBase');
    const lblHeight = document.getElementById('lblHeight');

    if (similar) {
      shape.setAttribute('d', 'M 25 190 L 185 190 L 25 30 Z');
      shape.setAttribute('class', 'shape-mod similar');
      
      badgeBg.setAttribute('class', 'badge-similar');
      badgeTxt.textContent = 'Similar ✓';
      
      arc.setAttribute('d', 'M 25 50 A 20 20 0 0 0 39 44');
      arc.setAttribute('stroke', '#10b981');
      angleTxt.textContent = '45°';
      angleTxt.setAttribute('y', '55');

      lblBase.textContent = '6 (×2)';
      lblBase.setAttribute('fill', '#10b981');

      lblHeight.textContent = '6 (×2)';
      lblHeight.setAttribute('fill', '#10b981');
      lblHeight.parentElement.setAttribute('transform', 'translate(10, 115)');
    } else {
      shape.setAttribute('d', 'M 25 190 L 185 190 L 25 110 Z');
      shape.setAttribute('class', 'shape-mod not-similar');
      
      badgeBg.setAttribute('class', 'badge-not-similar');
      badgeTxt.textContent = 'Not Similar ✗';
      
      arc.setAttribute('d', 'M 25 130 A 20 20 0 0 0 43 119');
      arc.setAttribute('stroke', '#ef4444');
      angleTxt.textContent = '63°';
      angleTxt.setAttribute('y', '135');

      lblBase.textContent = '6 (×2)';
      lblBase.setAttribute('fill', '#10b981');

      lblHeight.textContent = '3 (×1)';
      lblHeight.setAttribute('fill', '#ef4444');
      lblHeight.parentElement.setAttribute('transform', 'translate(10, 155)');
    }
  }
</script>
</body>
</html>

Next time you look at two shapes, check their corners and see if all their sides grew by the same multiplier!

math

Defining Similarity in Geometric Figures. Understand that similar figures have corresponding angles equal and corresponding sides in proportion.

Scale Factors and Similar Shapes (CfE Fourth Level / National 5)

Intro to Triangle Similarity and Proportional Reasoning

Similar Shapes and Scale Factor Investigations

Curriculum for Excellence (CfE) benchmark MTH 4-17b is set at Fourth Level (secondary school, typically S1–S3 / ages 12–15). Effective pedagogical practice begins with concrete and dynamic visual transformations (dilations) to demonstrate that scaling preserves angles while stretching side lengths by a common multiplier. Teachers should explicitly contrast multiplicative scaling with additive distortions and use non-examples (e.g., rectangles vs. squares) to reinforce that similarity requires both equal corresponding angles and proportional corresponding sides.

Defining Similarity in Geometric Figures

Rule 1: Matching Corners

Rule 2: Growing by the Same Multiplier