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

Have you ever looked through a magnifying glass and watched a tiny bug suddenly look huge?

When we make a shape bigger while keeping its exact shape, we call it an **enlargement**.

The magic number that tells us how many times bigger to make each side is called the **scale factor**.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      background: #ffffff;
      padding: 4px;
      border-radius: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .btn-sf {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .btn-sf.active {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
    .stage {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
    }
    .shape-orig {
      fill: rgba(100, 116, 139, 0.12);
      stroke: #64748b;
      stroke-width: 2;
      stroke-dasharray: 4 3;
    }
    .shape-enlarged {
      fill: rgba(34, 183, 255, 0.2);
      stroke: #22b7ff;
      stroke-width: 2.5;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .dim-label {
      font-size: 13px;
      font-weight: 600;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
      transition: all 0.4s ease;
    }
    .math-banner {
      display: flex;
      justify-content: space-around;
      width: 100%;
      max-width: 480px;
      margin-top: 10px;
      gap: 8px;
    }
    .math-chip {
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      flex: 1;
      text-align: center;
    }
    .highlight {
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn-sf active" data-sf="2">Scale Factor 2</button>
    <button class="btn-sf" data-sf="3">Scale Factor 3</button>
    <button class="btn-sf" data-sf="4">Scale Factor 4</button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 320 200" id="diagram">
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#edf2f7" stroke-width="1"/>
        </pattern>
      </defs>

      
      <rect x="10" y="10" width="300" height="180" fill="url(#grid)" stroke="#cbd5e1" stroke-width="1" rx="4" />

      
      <rect x="30" y="30" width="40" height="20" class="shape-orig" />
      <text x="50" y="22" class="dim-label" style="fill:#64748b; font-size:11px;">2</text>
      <text x="22" y="40" class="dim-label" style="fill:#64748b; font-size:11px;">1</text>
      <text x="50" y="40" class="dim-label" style="fill:#64748b; font-size:10px;">Original</text>

      
      <rect id="enlargedRect" x="90" y="30" width="80" height="40" class="shape-enlarged" />

      
      
      <line id="topLine" x1="90" y1="22" x2="170" y2="22" stroke="#0284c7" stroke-width="1.5" marker-end="url(#arrow)" />
      <text id="labelW" x="130" y="14" class="dim-label highlight">4</text>

      
      <line id="leftLine" x1="82" y1="30" x2="82" y2="70" stroke="#0284c7" stroke-width="1.5" />
      <text id="labelH" x="72" y="50" class="dim-label highlight">2</text>
    </svg>
  </div>

  <div class="math-banner">
    <div class="math-chip">
      Width: 2 × <span id="chipSfW" class="highlight">2</span> = <span id="calcW" class="highlight">4</span>
    </div>
    <div class="math-chip">
      Height: 1 × <span id="chipSfH" class="highlight">2</span> = <span id="calcH" class="highlight">2</span>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.btn-sf');
    const enlargedRect = document.getElementById('enlargedRect');
    const labelW = document.getElementById('labelW');
    const labelH = document.getElementById('labelH');
    const topLine = document.getElementById('topLine');
    const leftLine = document.getElementById('leftLine');
    const chipSfW = document.getElementById('chipSfW');
    const chipSfH = document.getElementById('chipSfH');
    const calcW = document.getElementById('calcW');
    const calcH = document.getElementById('calcH');

    const UNIT = 20; // 20px per grid unit
    const START_X = 90;
    const START_Y = 30;
    const BASE_W = 2;
    const BASE_H = 1;

    function setScaleFactor(sf) {
      const wUnits = BASE_W * sf;
      const hUnits = BASE_H * sf;
      const pxW = wUnits * UNIT;
      const pxH = hUnits * UNIT;

      // Update enlarged rectangle
      enlargedRect.setAttribute('width', pxW);
      enlargedRect.setAttribute('height', pxH);

      // Update dimension lines & positions
      topLine.setAttribute('x2', START_X + pxW);
      labelW.setAttribute('x', START_X + pxW / 2);
      labelW.textContent = wUnits;

      leftLine.setAttribute('y2', START_Y + pxH);
      labelH.setAttribute('y', START_Y + pxH / 2);
      labelH.textContent = hUnits;

      // Update calculation text
      chipSfW.textContent = sf;
      chipSfH.textContent = sf;
      calcW.textContent = wUnits;
      calcH.textContent = hUnits;
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        setScaleFactor(parseInt(btn.getAttribute('data-sf'), 10));
      });
    });
  </script>
</body>
</html>

How do we find the new length of every side when a shape grows?

The starting shape is called the **object**, and the enlarged shape is called the **image**.

To find each **Image Length** (or **New Length**), we multiply the **Object Length** (or **Original Length**) by the linear scale factor $k$:
$$\text{Image Length} = \text{Object Length} \times k$$

We find side lengths by applying the **scale factor** ($k$) uniformly as a multiplicative relationship:

$$\text{New Length} = \text{Original Length} \times k$$

$$\text{Image Length} = \text{Object Length} \times k$$

When the **scale factor** is 2, we take the original side length and double it.

If a square has sides that are 3 blocks long, each new side becomes $3 + 3 = 6$ blocks long.

<!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="1:1">
  <title>Scale Factor Enlargement</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    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: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      justify-content: center;
      width: 100%;
      max-width: 360px;
    }
    .btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 15px;
      font-weight: 600;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #4b5563;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      text-align: center;
    }
    .btn:active {
      background: #f3f4f6;
    }
    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
    .formula-bar {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 6px 14px;
      margin-bottom: 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .formula-bar .factor {
      color: #0284c7;
    }
    .formula-bar .result {
      color: #16a34a;
    }
    .diagram-svg {
      width: 100%;
      max-width: 340px;
      height: auto;
      display: block;
    }
    .grid-bg {
      fill: #ffffff;
      stroke: #e5e7eb;
      stroke-width: 1;
    }
    .grid-line {
      stroke: #e5e7eb;
      stroke-width: 1;
    }
    .orig-shape {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 2;
      stroke-dasharray: 4 4;
    }
    .scaled-shape {
      fill: rgba(34, 183, 255, 0.18);
      stroke: #0284c7;
      stroke-width: 2.5;
      transition: width 0.35s ease, height 0.35s ease;
    }
    .dim-line {
      stroke: #0284c7;
      stroke-width: 1.5;
      transition: x2 0.35s ease, y2 0.35s ease;
    }
    .dim-tick {
      stroke: #0284c7;
      stroke-width: 1.5;
      transition: x1 0.35s ease, x2 0.35s ease, y1 0.35s ease, y2 0.35s ease;
    }
    .dim-text {
      font-size: 14px;
      font-weight: 700;
      fill: #0284c7;
      text-anchor: middle;
      dominant-baseline: middle;
      transition: x 0.35s ease, y 0.35s ease;
    }
    .orig-text {
      font-size: 12px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
      dominant-baseline: middle;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn" data-scale="1" onclick="setScale(1)">Scale ×1</button>
    <button class="btn active" data-scale="2" onclick="setScale(2)">Scale ×2</button>
    <button class="btn" data-scale="3" onclick="setScale(3)">Scale ×3</button>
  </div>

  <div class="formula-bar" id="formula">
    <span>3</span> × <span class="factor">2</span> = <span class="result">6 blocks</span>
  </div>

  <svg class="diagram-svg" viewBox="0 0 340 340" aria-label="Scale factor visual grid">
    
    <rect x="40" y="40" width="260" height="260" class="grid-bg" />
    
    
    
    <line x1="66" y1="40" x2="66" y2="300" class="grid-line" />
    <line x1="92" y1="40" x2="92" y2="300" class="grid-line" />
    <line x1="118" y1="40" x2="118" y2="300" class="grid-line" />
    <line x1="144" y1="40" x2="144" y2="300" class="grid-line" />
    <line x1="170" y1="40" x2="170" y2="300" class="grid-line" />
    <line x1="196" y1="40" x2="196" y2="300" class="grid-line" />
    <line x1="222" y1="40" x2="222" y2="300" class="grid-line" />
    <line x1="248" y1="40" x2="248" y2="300" class="grid-line" />
    <line x1="274" y1="40" x2="274" y2="300" class="grid-line" />

    
    <line x1="40" y1="66" x2="300" y2="66" class="grid-line" />
    <line x1="40" y1="92" x2="300" y2="92" class="grid-line" />
    <line x1="40" y1="118" x2="300" y2="118" class="grid-line" />
    <line x1="40" y1="144" x2="300" y2="144" class="grid-line" />
    <line x1="40" y1="170" x2="300" y2="170" class="grid-line" />
    <line x1="40" y1="196" x2="300" y2="196" class="grid-line" />
    <line x1="40" y1="222" x2="300" y2="222" class="grid-line" />
    <line x1="40" y1="248" x2="300" y2="248" class="grid-line" />
    <line x1="40" y1="274" x2="300" y2="274" class="grid-line" />

    
    <rect id="scaledBox" x="40" y="40" width="156" height="156" class="scaled-shape" />

    
    <rect x="40" y="40" width="78" height="78" class="orig-shape" />
    <text x="79" y="79" class="orig-text">3 × 3</text>

    
    <line id="topDim" x1="40" y1="24" x2="196" y2="24" class="dim-line" />
    <line x1="40" y1="18" x2="40" y2="30" class="dim-tick" />
    <line id="topTickR" x1="196" y1="18" x2="196" y2="30" class="dim-tick" />
    <text id="topLabel" x="118" y="14" class="dim-text">6</text>

    
    <line id="leftDim" x1="24" y1="40" x2="24" y2="196" class="dim-line" />
    <line x1="18" y1="40" x2="30" y2="40" class="dim-tick" />
    <line id="leftTickB" x1="18" y1="196" x2="30" y2="196" class="dim-tick" />
    <text id="leftLabel" x="12" y="118" class="dim-text">6</text>
  </svg>

  <script>
    const ORIGIN = 40;
    const CELL_SIZE = 26;
    const BASE_UNITS = 3;

    function setScale(factor) {
      const units = BASE_UNITS * factor;
      const sizePx = units * CELL_SIZE;
      const endPos = ORIGIN + sizePx;
      const midPos = ORIGIN + (sizePx / 2);

      // Update button styles
      document.querySelectorAll('.btn').forEach(b => {
        b.classList.toggle('active', parseInt(b.dataset.scale, 10) === factor);
      });

      // Update Formula
      document.getElementById('formula').innerHTML = 
        `<span>3</span> × <span class="factor">${factor}</span> = <span class="result">${units} blocks</span>`;

      // Update Box
      const box = document.getElementById('scaledBox');
      box.setAttribute('width', sizePx);
      box.setAttribute('height', sizePx);

      // Update Top Dimension
      document.getElementById('topDim').setAttribute('x2', endPos);
      document.getElementById('topTickR').setAttribute('x1', endPos);
      document.getElementById('topTickR').setAttribute('x2', endPos);
      const topLabel = document.getElementById('topLabel');
      topLabel.setAttribute('x', midPos);
      topLabel.textContent = units;

      // Update Left Dimension
      document.getElementById('leftDim').setAttribute('y2', endPos);
      document.getElementById('leftTickB').setAttribute('y1', endPos);
      document.getElementById('leftTickB').setAttribute('y2', endPos);
      const leftLabel = document.getElementById('leftLabel');
      leftLabel.setAttribute('y', midPos);
      leftLabel.textContent = units;
    }
  </script>
</body>
</html>

What if we choose an even bigger magic number, like 3?

A **scale factor** of 3 means each side must grow 3 times as long.

If a rectangle is 2 blocks long and 1 block tall, the new length is $2 + 2 + 2 = 6$ blocks, and the new height is $1 + 1 + 1 = 3$ blocks.

<!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>Scale Factor Enlargement</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }
    .ctrl-label {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }
    .btn-group {
      display: flex;
      gap: 4px;
    }
    .sf-btn {
      background: #f1f5f9;
      border: 1px solid transparent;
      color: #334155;
      padding: 5px 12px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .sf-btn.active {
      background: #f59e0b;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
    }
    .display-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
      flex: 1;
      min-height: 260px;
    }
    .shape-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
      position: relative;
    }
    .orig-card {
      width: 120px;
      height: 220px;
    }
    .enlarged-card {
      flex: 1;
      max-width: 320px;
      height: 220px;
    }
    .badge {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 6px;
    }
    .grid-container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      position: relative;
    }
    .rect-wrapper {
      position: relative;
      display: inline-block;
    }
    .grid-shape {
      display: grid;
      background: #fef3c7;
      border: 2px solid #f59e0b;
      border-radius: 4px;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    .grid-cell {
      border: 1px dashed rgba(245, 158, 11, 0.45);
      box-sizing: border-box;
    }
    .dim-label {
      position: absolute;
      font-size: 13px;
      font-weight: 700;
      color: #b45309;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    .dim-top {
      top: -20px;
      left: 0;
      width: 100%;
      text-align: center;
    }
    .dim-right {
      top: 0;
      right: -24px;
      height: 100%;
      text-align: center;
    }
    .calc-row {
      display: flex;
      gap: 16px;
      background: #ffffff;
      padding: 6px 16px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }
    .calc-item span {
      color: #f59e0b;
      font-weight: 800;
    }
  </style>
</head>
<body>

  <div class="controls">
    <span class="ctrl-label">Scale Factor:</span>
    <div class="btn-group">
      <button class="sf-btn" onclick="setScale(1)">×1</button>
      <button class="sf-btn" onclick="setScale(2)">×2</button>
      <button class="sf-btn active" onclick="setScale(3)">×3</button>
      <button class="sf-btn" onclick="setScale(4)">×4</button>
    </div>
  </div>

  <div class="display-area">
    
    <div class="shape-card orig-card">
      <span class="badge">Original</span>
      <div class="grid-container">
        <div class="rect-wrapper">
          <div class="dim-label dim-top">2</div>
          <div class="grid-shape" style="grid-template-columns: repeat(2, 22px); grid-template-rows: repeat(1, 22px); width: 44px; height: 22px;">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="dim-label dim-right">1</div>
        </div>
      </div>
    </div>

    
    <div class="shape-card enlarged-card">
      <span class="badge" id="enlarged-title">Enlarged (×3)</span>
      <div class="grid-container">
        <div class="rect-wrapper" id="enlarged-wrapper">
          <div class="dim-label dim-top" id="lbl-w">6</div>
          <div class="grid-shape" id="enlarged-grid"></div>
          <div class="dim-label dim-right" id="lbl-h">3</div>
        </div>
      </div>
    </div>
  </div>

  <div class="calc-row">
    <div class="calc-item" id="calc-w">Width: 2 × <span>3</span> = 6</div>
    <div class="calc-item" id="calc-h">Height: 1 × <span>3</span> = 3</div>
  </div>

  <script>
    let currentScale = 3;

    function setScale(k) {
      currentScale = k;
      document.querySelectorAll('.sf-btn').forEach((btn, idx) => {
        btn.classList.toggle('active', idx + 1 === k);
      });

      const w = 2 * k;
      const h = 1 * k;
      
      // Calculate unit cell size based on scale to fit container comfortably
      const cellSize = k === 4 ? 24 : (k === 3 ? 28 : 34);

      document.getElementById('enlarged-title').textContent = `Enlarged (×${k})`;
      document.getElementById('lbl-w').textContent = w;
      document.getElementById('lbl-h').textContent = h;

      const grid = document.getElementById('enlarged-grid');
      grid.style.gridTemplateColumns = `repeat(${w}, ${cellSize}px)`;
      grid.style.gridTemplateRows = `repeat(${h}, ${cellSize}px)`;
      grid.style.width = `${w * cellSize}px`;
      grid.style.height = `${h * cellSize}px`;

      grid.innerHTML = '';
      const totalCells = w * h;
      for (let i = 0; i < totalCells; i++) {
        const cell = document.createElement('div');
        cell.className = 'grid-cell';
        grid.appendChild(cell);
      }

      document.getElementById('calc-w').innerHTML = `Width: 2 × <span>${k}</span> = ${w}`;
      document.getElementById('calc-h').innerHTML = `Height: 1 × <span>${k}</span> = ${h}`;
    }

    // Initial render
    setScale(3);
  </script>
</body>
</html>

Remember: you must multiply **every side** by the scale factor, or the shape will stretch out of shape!

Count the units on any shape you see, pick a whole number scale factor, and see how big it can grow.

math

Understanding Scale Factors Greater Than One for Enlargement. Identify and apply positive whole number scale factors to enlarge side lengths of 2D shapes.

Scale Drawings, Enlargements, and Similarity (Curriculum for Excellence Third Level / KS3)

Interpreting Scale Factors in Scale Drawings and 2D Dilations

Introduction to Enlargements with Positive Integer Scale Factors

Pedagogical mastery of linear enlargement requires transitioning students from additive thinking (common in early measurement) to robust multiplicative reasoning. Begin with tactile grid-counting and unit-block arrays where students physically build enlarged shapes, reinforcing that every single side must be multiplied by the same factor $k$. Emphasize the invariance of angles using dynamic geometry software (e.g., GeoGebra) to demonstrate that scaling preserves shape characteristics without warping angles.

Understanding Scale Factors Greater Than One for Enlargement

Doubling with Scale Factor 2