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 fold a paper butterfly right down the middle?

Both wings match up perfectly! That folding crease is called a **line of symmetry**.

<!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>Lines of Symmetry</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: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .shape-nav {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .nav-btn {
      flex: 1 1 calc(50% - 6px);
      min-width: 75px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      color: #6b7280;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .nav-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }
    .stage {
      position: relative;
      width: 100%;
      max-width: 300px;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
      margin: 8px 0;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .shape-poly {
      fill: #e8f7ff;
      stroke: #22b7ff;
      stroke-width: 3;
      stroke-linejoin: round;
      transition: all 0.35s ease;
    }
    .sym-line {
      stroke: #ff4081;
      stroke-width: 2.5;
      stroke-dasharray: 6 5;
      stroke-linecap: round;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .sym-line.visible {
      opacity: 1;
    }
    .count-badge {
      font-size: 15px;
      font-weight: 700;
      color: #ff4081;
      background: #fff0f5;
      padding: 6px 16px;
      border-radius: 20px;
      border: 1px solid #ffd1df;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>

  <div class="shape-nav">
    <button class="nav-btn active" onclick="selectShape(0)">Square</button>
    <button class="nav-btn" onclick="selectShape(1)">Rectangle</button>
    <button class="nav-btn" onclick="selectShape(2)">Equilateral</button>
    <button class="nav-btn" onclick="selectShape(3)">Isosceles</button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 260 220" id="diagramSvg">
      <polygon id="shape" class="shape-poly" points="50,30 210,30 210,190 50,190" />
      <g id="linesGroup"></g>
    </svg>
  </div>

  <div class="count-badge" id="badge">
    <span>✦</span> <span id="countText">4 Lines</span>
  </div>

  <script>
    const shapes = [
      {
        name: "Square",
        count: "4 Lines",
        points: "50,30 210,30 210,190 50,190",
        lines: [
          [130, 10, 130, 210], // V
          [30, 110, 230, 110], // H
          [35, 15, 225, 205],  // D1
          [35, 205, 225, 15]   // D2
        ]
      },
      {
        name: "Rectangle",
        count: "2 Lines",
        points: "40,55 220,55 220,165 40,165",
        lines: [
          [130, 30, 130, 190], // V
          [20, 110, 240, 110]  // H
        ]
      },
      {
        name: "Equilateral",
        count: "3 Lines",
        points: "130,25 40,181 220,181",
        lines: [
          [130, 10, 130, 200],   // Top to base
          [25, 190, 185, 95],    // Bottom-left to right side
          [235, 190, 75, 95]     // Bottom-right to left side
        ]
      },
      {
        name: "Isosceles",
        count: "1 Line",
        points: "130,25 60,185 200,185",
        lines: [
          [130, 10, 130, 200]   // Vertical only
        ]
      }
    ];

    let currentIndex = 0;
    let autoTimer = null;

    function renderShape(idx) {
      const data = shapes[idx];
      const poly = document.getElementById('shape');
      const linesGroup = document.getElementById('linesGroup');
      const badgeText = document.getElementById('countText');

      poly.setAttribute('points', data.points);
      badgeText.textContent = data.count;

      linesGroup.innerHTML = '';
      data.lines.forEach((coords) => {
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', coords[0]);
        line.setAttribute('y1', coords[1]);
        line.setAttribute('x2', coords[2]);
        line.setAttribute('y2', coords[3]);
        line.setAttribute('class', 'sym-line');
        linesGroup.appendChild(line);
      });

      // Animate lines appearing
      setTimeout(() => {
        const lines = linesGroup.querySelectorAll('.sym-line');
        lines.forEach((l, i) => {
          setTimeout(() => l.classList.add('visible'), i * 150);
        });
      }, 50);

      const buttons = document.querySelectorAll('.nav-btn');
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
    }

    function selectShape(idx) {
      currentIndex = idx;
      renderShape(currentIndex);
      resetAutoPlay();
    }

    function resetAutoPlay() {
      if (autoTimer) clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        currentIndex = (currentIndex + 1) % shapes.length;
        renderShape(currentIndex);
      }, 4000);
    }

    renderShape(0);
    resetAutoPlay();
  </script>
</body>
</html>

A line of symmetry can go up-and-down (vertical), left-to-right (horizontal), or slanted like a slide.

Can we fold 3-sided shapes called triangles in more than one way?

Different triangles have different numbers of fold lines depending on their side lengths.

<!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>Lines of Symmetry</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: space-between;
    padding: 12px;
    min-height: 100vh;
  }
  .nav-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    width: 100%;
    max-width: 480px;
  }
  .nav-btn {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #1e2945;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .nav-btn.active {
    background: #22b7ff;
    border-color: #22b7ff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
  }
  .stage {
    width: 100%;
    max-width: 320px;
    height: 240px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 8px 0;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .sym-line {
    stroke: #9c27b0;
    stroke-width: 2.5;
    stroke-dasharray: 6, 6;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .sym-line.visible {
    opacity: 1;
  }
  .shape-path {
    fill: rgba(34, 183, 255, 0.15);
    stroke: #22b7ff;
    stroke-width: 3;
    stroke-linejoin: round;
  }
  .tick-mark {
    stroke: #ff9800;
    stroke-width: 2.5;
    stroke-linecap: round;
  }
  .info-badge {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #9c27b0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  }
  .highlight {
    color: #1e2945;
  }
</style>
</head>
<body>

<div class="nav-group">
  <button class="nav-btn active" onclick="setShape(0)">Equilateral</button>
  <button class="nav-btn" onclick="setShape(1)">Isosceles</button>
  <button class="nav-btn" onclick="setShape(2)">Scalene</button>
  <button class="nav-btn" onclick="setShape(3)">Square</button>
  <button class="nav-btn" onclick="setShape(4)">Rectangle</button>
</div>

<div class="stage">
  <svg viewBox="0 0 300 240" id="svgCanvas"></svg>
</div>

<div class="info-badge" id="countBadge">3 Lines of Symmetry</div>

<script>
const shapes = [
  {
    name: 'Equilateral',
    count: '3 Lines of Symmetry',
    polygon: '150,30 46,210 254,210',
    ticks: [
      { x1: 93, y1: 116, x2: 103, y2: 124 },
      { x1: 197, y1: 124, x2: 207, y2: 116 },
      { x1: 150, y1: 204, x2: 150, y2: 216 }
    ],
    lines: [
      { x1: 150, y1: 15, x2: 150, y2: 225 },
      { x1: 35, y1: 216, x2: 210, y2: 115 },
      { x1: 265, y1: 216, x2: 90, y2: 115 }
    ]
  },
  {
    name: 'Isosceles',
    count: '1 Line of Symmetry',
    polygon: '150,30 75,210 225,210',
    ticks: [
      { x1: 107, y1: 117, x2: 118, y2: 123 },
      { x1: 182, y1: 123, x2: 193, y2: 117 }
    ],
    lines: [
      { x1: 150, y1: 15, x2: 150, y2: 225 }
    ]
  },
  {
    name: 'Scalene',
    count: '0 Lines of Symmetry',
    polygon: '100,40 45,210 265,190',
    ticks: [],
    lines: []
  },
  {
    name: 'Square',
    count: '4 Lines of Symmetry',
    polygon: '65,35 235,35 235,205 65,205',
    ticks: [
      { x1: 150, y1: 30, x2: 150, y2: 40 },
      { x1: 230, y1: 120, x2: 240, y2: 120 },
      { x1: 150, y1: 200, x2: 150, y2: 210 },
      { x1: 60, y1: 120, x2: 70, y2: 120 }
    ],
    lines: [
      { x1: 150, y1: 15, x2: 150, y2: 225 },
      { x1: 45, y1: 120, x2: 255, y2: 120 },
      { x1: 48, y1: 18, x2: 252, y2: 222 },
      { x1: 252, y1: 18, x2: 48, y2: 222 }
    ]
  },
  {
    name: 'Rectangle',
    count: '2 Lines of Symmetry',
    polygon: '45,60 255,60 255,180 45,180',
    ticks: [
      { x1: 150, y1: 55, x2: 150, y2: 65 },
      { x1: 150, y1: 175, x2: 150, y2: 185 },
      { x1: 40, y1: 117, x2: 50, y2: 117 },
      { x1: 40, y1: 123, x2: 50, y2: 123 },
      { x1: 250, y1: 117, x2: 260, y2: 117 },
      { x1: 250, y1: 123, x2: 260, y2: 123 }
    ],
    lines: [
      { x1: 150, y1: 40, x2: 150, y2: 200 },
      { x1: 25, y1: 120, x2: 275, y2: 120 }
    ]
  }
];

let currentIndex = 0;

function render(idx) {
  const s = shapes[idx];
  const svg = document.getElementById('svgCanvas');
  
  let ticksHtml = s.ticks.map(t => 
    `<line class="tick-mark" x1="${t.x1}" y1="${t.y1}" x2="${t.x2}" y2="${t.y2}" />`
  ).join('');

  let linesHtml = s.lines.map(l => 
    `<line class="sym-line visible" x1="${l.x1}" y1="${l.y1}" x2="${l.x2}" y2="${l.y2}" />`
  ).join('');

  svg.innerHTML = `
    <polygon class="shape-path" points="${s.polygon}" />
    ${ticksHtml}
    ${linesHtml}
  `;

  document.getElementById('countBadge').textContent = s.count;

  const btns = document.querySelectorAll('.nav-btn');
  btns.forEach((btn, i) => {
    btn.classList.toggle('active', i === idx);
  });
}

function setShape(idx) {
  currentIndex = idx;
  render(idx);
}

render(0);
</script>
</body>
</html>

An **equilateral triangle** has all equal sides, so it has **3 lines of symmetry**.

An **isosceles triangle** has only two equal sides, so it has just **1 line of symmetry**.

What about 4-sided shapes like squares and rectangles?

A **quadrilateral** is any flat shape with 4 straight sides.

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

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

  .tab-btn {
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .tab-btn .count {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 8px;
    background: #eef2ff;
    color: #4f46e5;
  }

  .tab-btn.active {
    border-color: #7c4dff;
    color: #7c4dff;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(124, 77, 255, 0.15);
  }

  .tab-btn.active .count {
    background: #7c4dff;
    color: #ffffff;
  }

  .stage {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
  }

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

  .sym-line {
    stroke-dasharray: 6 5;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: opacity 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
    cursor: pointer;
  }

  .sym-line.inactive {
    opacity: 0.15;
    stroke: #94a3b8;
  }

  .sym-line.active {
    opacity: 1;
    stroke-width: 3.5;
  }

  .line-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 420px;
  }

  .line-toggle {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
  }

  .line-toggle .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .line-toggle.active {
    border-color: currentColor;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .line-toggle.dimmed {
    opacity: 0.45;
  }

  .badge-total {
    font-size: 14px;
    font-weight: 700;
    color: #1e2945;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
  }
</style>
</head>
<body>

  
  <div class="tabs" role="tablist">
    <button class="tab-btn active" onclick="selectShape(0)">
      <span>Square</span>
      <span class="count">4 lines</span>
    </button>
    <button class="tab-btn" onclick="selectShape(1)">
      <span>Rectangle</span>
      <span class="count">2 lines</span>
    </button>
    <button class="tab-btn" onclick="selectShape(2)">
      <span>Equilateral Δ</span>
      <span class="count">3 lines</span>
    </button>
    <button class="tab-btn" onclick="selectShape(3)">
      <span>Isosceles Δ</span>
      <span class="count">1 line</span>
    </button>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 260 260" id="symSvg">
      
    </svg>
  </div>

  
  <div class="line-btn-row" id="lineButtons">
    
  </div>

  <div class="badge-total" id="badgeTotal">
    <span id="badgeText">4 Lines of Symmetry</span>
  </div>

<script>
const shapes = [
  {
    name: "Square",
    fill: "rgba(124, 77, 255, 0.12)",
    stroke: "#7c4dff",
    render: `<polygon points="50,50 210,50 210,210 50,210" rx="8" fill="rgba(124, 77, 255, 0.12)" stroke="#7c4dff" stroke-width="3" stroke-linejoin="round"/>`,
    lines: [
      { name: "Vertical", color: "#e11d48", x1: 130, y1: 25, x2: 130, y2: 235 },
      { name: "Horizontal", color: "#2563eb", x1: 25, y1: 130, x2: 235, y2: 130 },
      { name: "Diagonal 1", color: "#059669", x1: 30, y1: 30, x2: 230, y2: 230 },
      { name: "Diagonal 2", color: "#d97706", x1: 230, y1: 30, x2: 30, y2: 230 }
    ]
  },
  {
    name: "Rectangle",
    fill: "rgba(0, 191, 165, 0.12)",
    stroke: "#00bfa5",
    render: `<polygon points="35,75 225,75 225,185 35,185" fill="rgba(0, 191, 165, 0.12)" stroke="#00bfa5" stroke-width="3" stroke-linejoin="round"/>`,
    lines: [
      { name: "Vertical", color: "#e11d48", x1: 130, y1: 45, x2: 130, y2: 215 },
      { name: "Horizontal", color: "#2563eb", x1: 15, y1: 130, x2: 245, y2: 130 }
    ]
  },
  {
    name: "Equilateral Triangle",
    fill: "rgba(255, 112, 67, 0.12)",
    stroke: "#ff7043",
    render: `<polygon points="130,42 225,206 35,206" fill="rgba(255, 112, 67, 0.12)" stroke="#ff7043" stroke-width="3" stroke-linejoin="round"/>`,
    lines: [
      { name: "Top-Down", color: "#e11d48", x1: 130, y1: 20, x2: 130, y2: 230 },
      { name: "Left-Slope", color: "#2563eb", x1: 18, y1: 216, x2: 200, y2: 110 },
      { name: "Right-Slope", color: "#059669", x1: 242, y1: 216, x2: 60, y2: 110 }
    ]
  },
  {
    name: "Isosceles Triangle",
    fill: "rgba(14, 165, 233, 0.12)",
    stroke: "#0ea5e9",
    render: `<polygon points="130,35 205,215 55,215" fill="rgba(14, 165, 233, 0.12)" stroke="#0ea5e9" stroke-width="3" stroke-linejoin="round"/>`,
    lines: [
      { name: "Vertical", color: "#e11d48", x1: 130, y1: 15, x2: 130, y2: 235 }
    ]
  }
];

let currentShapeIdx = 0;
let activeLineIdx = -1; // -1 means ALL visible

function selectShape(idx) {
  currentShapeIdx = idx;
  activeLineIdx = -1;
  document.querySelectorAll('.tab-btn').forEach((btn, i) => {
    btn.classList.toggle('active', i === idx);
  });
  renderStage();
}

function filterLine(idx) {
  if (activeLineIdx === idx) {
    activeLineIdx = -1; // toggle back to all
  } else {
    activeLineIdx = idx;
  }
  renderStage();
}

function renderStage() {
  const shape = shapes[currentShapeIdx];
  const svg = document.getElementById('symSvg');
  const lineButtons = document.getElementById('lineButtons');
  const badgeText = document.getElementById('badgeText');

  const count = shape.lines.length;
  badgeText.innerHTML = `${count} Line${count > 1 ? 's' : ''} of Symmetry`;

  // Draw shape + lines
  let linesMarkup = '';
  shape.lines.forEach((l, i) => {
    const isAct = (activeLineIdx === -1 || activeLineIdx === i);
    const cls = isAct ? 'sym-line active' : 'sym-line inactive';
    linesMarkup += `<line x1="${l.x1}" y1="${l.y1}" x2="${l.x2}" y2="${l.y2}" stroke="${l.color}" class="${cls}" onclick="filterLine(${i})"/>`;
  });

  svg.innerHTML = shape.render + linesMarkup;

  // Build Filter Buttons
  let btnMarkup = `<button class="line-toggle ${activeLineIdx === -1 ? 'active' : 'dimmed'}" style="color: #1e2945;" onclick="filterLine(-1)">
    <span>All (${count})</span>
  </button>`;

  shape.lines.forEach((l, i) => {
    const isAct = (activeLineIdx === i);
    const isDim = (activeLineIdx !== -1 && !isAct);
    btnMarkup += `
      <button class="line-toggle ${isAct ? 'active' : ''} ${isDim ? 'dimmed' : ''}" style="color: ${l.color};" onclick="filterLine(${i})">
        <span class="dot" style="background: ${l.color}"></span>
        <span>${l.name}</span>
      </button>
    `;
  });

  lineButtons.innerHTML = btnMarkup;
}

// Initial render
renderStage();
</script>

</body>
</html>

A **square** has 4 lines of symmetry: vertical, horizontal, and two slanted corner lines.

Many people think a rectangle can also fold diagonally corner-to-corner, but let's see what happens if you try!

<!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;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn {
      background: #ffffff;
      border: 1.5px solid #d1d5db;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }
    .stage-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      width: 100%;
      max-width: 380px;
      padding: 16px 12px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .svg-container {
      width: 100%;
      max-width: 320px;
      height: 200px;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .action-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 10px;
      padding: 0 4px;
    }
    .fold-btn {
      background: #f3f4f6;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .fold-btn:active {
      background: #e5e7eb;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      transition: all 0.2s ease;
    }
    .badge.success {
      background: #e8f5e9;
      color: #2e7d32;
    }
    .badge.fail {
      background: #ffebee;
      color: #c62828;
    }
    .poly-base {
      fill: #e0f2fe;
      stroke: #0284c7;
      stroke-width: 2;
      stroke-linejoin: round;
    }
    .poly-fold {
      fill: #38bdf8;
      fill-opacity: 0.6;
      stroke: #0369a1;
      stroke-width: 2;
      stroke-linejoin: round;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), fill 0.3s ease, stroke 0.3s ease;
    }
    .poly-fold.mismatch {
      fill: #f87171;
      fill-opacity: 0.55;
      stroke: #dc2626;
    }
    .sym-line {
      stroke: #e11d48;
      stroke-width: 2;
      stroke-dasharray: 5 4;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="tab-v" onclick="setMode('v')">↕ Vertical</button>
    <button class="btn" id="tab-h" onclick="setMode('h')">↔ Horizontal</button>
    <button class="btn" id="tab-d" onclick="setMode('d')">⤢ Diagonal</button>
  </div>

  <div class="stage-card">
    <div class="svg-container">
      <svg viewBox="40 20 220 180" id="fold-svg">
        
        <rect x="70" y="50" width="160" height="100" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 3" rx="2" />
        
        
        <polygon id="base-poly" class="poly-base" points="70,50 150,50 150,150 70,150" />
        
        
        <polygon id="fold-poly" class="poly-fold" points="150,50 230,50 230,150 150,150" />
        
        
        <line id="crease-line" class="sym-line" x1="150" y1="30" x2="150" y2="170" />
      </svg>
    </div>

    <div class="action-row">
      <button class="fold-btn" id="fold-toggle" onclick="toggleFold()">Fold</button>
      <div class="badge success" id="status-badge">✓ Match</div>
    </div>
  </div>

  <script>
    let mode = 'v';
    let isFolded = false;

    const basePoly = document.getElementById('base-poly');
    const foldPoly = document.getElementById('fold-poly');
    const creaseLine = document.getElementById('crease-line');
    const foldBtn = document.getElementById('fold-toggle');
    const badge = document.getElementById('status-badge');

    // Rectangle coords: (70,50) to (230,150) -> Center: (150,100), Width: 160, Height: 100
    const configs = {
      v: {
        base: "70,50 150,50 150,150 70,150",
        foldUnfolded: "150,50 230,50 230,150 150,150",
        foldFolded: "150,50 70,50 70,150 150,150",
        line: { x1: 150, y1: 30, x2: 150, y2: 170 },
        match: true
      },
      h: {
        base: "70,100 230,100 230,150 70,150",
        foldUnfolded: "70,50 230,50 230,100 70,100",
        foldFolded: "70,150 230,150 230,100 70,100",
        line: { x1: 50, y1: 100, x2: 250, y2: 100 },
        match: true
      },
      d: {
        base: "70,50 230,150 70,150",
        foldUnfolded: "70,50 230,50 230,150",
        // Diagonal AC reflection of B(230,50) is (140.1, 193.8)
        foldFolded: "70,50 140.1,193.8 230,150",
        line: { x1: 50, y1: 37.5, x2: 250, y2: 162.5 },
        match: false
      }
    };

    function updateView() {
      const cfg = configs[mode];
      
      document.querySelectorAll('.controls .btn').forEach(b => b.classList.remove('active'));
      document.getElementById('tab-' + mode).classList.add('active');

      basePoly.setAttribute('points', cfg.base);
      creaseLine.setAttribute('x1', cfg.line.x1);
      creaseLine.setAttribute('y1', cfg.line.y1);
      creaseLine.setAttribute('x2', cfg.line.x2);
      creaseLine.setAttribute('y2', cfg.line.y2);

      foldPoly.setAttribute('points', isFolded ? cfg.foldFolded : cfg.foldUnfolded);
      foldBtn.textContent = isFolded ? 'Unfold' : 'Fold';

      if (isFolded) {
        if (cfg.match) {
          foldPoly.classList.remove('mismatch');
          badge.className = 'badge success';
          badge.textContent = '✓ Symmetry';
        } else {
          foldPoly.classList.add('mismatch');
          badge.className = 'badge fail';
          badge.textContent = '✗ Overhang!';
        }
      } else {
        foldPoly.classList.remove('mismatch');
        badge.className = 'badge ' + (cfg.match ? 'success' : 'fail');
        badge.textContent = cfg.match ? '✓ Line' : '✗ Not Line';
      }
    }

    function setMode(newMode) {
      mode = newMode;
      isFolded = true;
      updateView();
    }

    function toggleFold() {
      isFolded = !isFolded;
      updateView();
    }

    // Initialize folded to clearly show outcome immediately
    isFolded = true;
    updateView();
  </script>
</body>
</html>

Because the corners stick out, a **rectangle** only has **2 lines of symmetry** (up-down and side-to-side).

Whenever you test a shape, picture folding it in half along every direction to see if both sides match exactly!

math

Identifying All Lines of Symmetry in Triangles and Quadrilaterals. Find and draw all vertical, horizontal, and slanted lines of symmetry in various 2D polygons.

Lines of Symmetry in 2D Shapes (Curriculum for Excellence / KS2-KS3 Mathematics)

Identifying Symmetrical Figures and Drawing Lines of Symmetry

Symmetry Challenge: Investigating Line and Rotational Symmetry in Polygons

To develop deep mastery of line symmetry across triangles and quadrilaterals, start with concrete tactile manipulation (paper folding and Mira mirrors) before transitioning to semi-concrete grid drawing and abstract classification. Explicitly address the common diagonal rectangle trap by having students physically fold a standard paper sheet along its diagonal to observe that the corners fail to coincide. Use systematic searching routines (top-to-bottom vertices, opposite edge midpoints, and corner diagonals) to ensure all vertical, horizontal, and slanted axes are identified without omission or double counting.

Identifying All Lines of Symmetry in Triangles and Quadrilaterals

Lines of Symmetry in Triangles

Lines of Symmetry in 4-Sided Shapes