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

Look down at a kitchen floor or a brick sidewalk. Have you ever wondered how all those shapes fit together so neatly?

When flat shapes fit together side-by-side with **no gaps** and **no overlaps**, we make a **tiling pattern**.

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

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

  .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }

  .btn:hover {
    background: #f1f5f9;
  }

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

  .mode-btn.active.mode-tiling {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 2px 6px rgba(16,185,129,0.3);
  }
  .mode-btn.active.mode-gaps {
    background: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 2px 6px rgba(245,158,11,0.3);
  }
  .mode-btn.active.mode-overlaps {
    background: #ef4444;
    border-color: #ef4444;
    box-shadow: 0 2px 6px rgba(239,68,68,0.3);
  }

  .stage-box {
    width: 100%;
    max-width: 440px;
    height: 250px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

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

  .status-badge {
    position: absolute;
    bottom: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    pointer-events: none;
    transition: all 0.2s ease;
  }

  .badge-tiling { background: #d1fae5; color: #065f46; }
  .badge-gaps { background: #fef3c7; color: #92400e; }
  .badge-overlaps { background: #fee2e2; color: #991b1b; }
</style>
</head>
<body>

<div class="controls-row">
  <button class="btn shape-btn active" data-shape="hexagons">⬡ Hexagons</button>
  <button class="btn shape-btn" data-shape="squares">⬛ Squares</button>
  <button class="btn shape-btn" data-shape="triangles">🔺 Triangles</button>
</div>

<div class="controls-row">
  <button class="btn mode-btn mode-tiling active" data-mode="tiling">✓ Tiling</button>
  <button class="btn mode-btn mode-gaps" data-mode="gaps">✗ Gaps</button>
  <button class="btn mode-btn mode-overlaps" data-mode="overlaps">✗ Overlap</button>
</div>

<div class="stage-box">
  <svg id="canvas" viewBox="0 0 400 250"></svg>
  <div id="badge" class="status-badge badge-tiling">Edge-to-Edge</div>
</div>

<script>
  const colors = [
    '#38bdf8', '#fb7185', '#a78bfa',
    '#4ade80', '#fbbf24', '#2dd4bf', '#f472b6'
  ];

  let currentShape = 'hexagons';
  let currentMode = 'tiling';

  function getHexPoints(cx, cy, r) {
    const pts = [];
    for (let i = 0; i < 6; i++) {
      const angle = (Math.PI / 180) * (60 * i);
      pts.push(`${(cx + r * Math.cos(angle)).toFixed(1)},${(cy + r * Math.sin(angle)).toFixed(1)}`);
    }
    return pts.join(' ');
  }

  function getTriPoints(cx, cy, side, inverted) {
    const h = side * (Math.sqrt(3) / 2);
    const r = h / 3;
    const R = 2 * r;
    if (!inverted) {
      return `${cx},${cy - R} ${cx - side/2},${cy + r} ${cx + side/2},${cy + r}`;
    } else {
      return `${cx},${cy + R} ${cx - side/2},${cy - r} ${cx + side/2},${cy - r}`;
    }
  }

  function render() {
    const svg = document.getElementById('canvas');
    const badge = document.getElementById('badge');
    svg.innerHTML = '';

    badge.className = `status-badge badge-${currentMode}`;
    badge.textContent = currentMode === 'tiling' ? '✓ Edge-to-Edge' : (currentMode === 'gaps' ? '✗ Gaps' : '✗ Overlap');

    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

    if (currentShape === 'hexagons') {
      const r = 38;
      const dx = r * Math.sqrt(3);
      const dy = r * 1.5;
      const cx = 200, cy = 118;

      let gapMult = 1, shiftX = 0, shiftY = 0;
      if (currentMode === 'gaps') gapMult = 1.32;
      if (currentMode === 'overlaps') gapMult = 0.74;

      const offsets = [
        [0, 0],
        [dx * gapMult, 0],
        [-dx * gapMult, 0],
        [dx/2 * gapMult, dy * gapMult],
        [-dx/2 * gapMult, dy * gapMult],
        [dx/2 * gapMult, -dy * gapMult],
        [-dx/2 * gapMult, -dy * gapMult]
      ];

      offsets.forEach(([ox, oy], i) => {
        const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
        poly.setAttribute('points', getHexPoints(cx + ox, cy + oy, r));
        poly.setAttribute('fill', colors[i % colors.length]);
        poly.setAttribute('fill-opacity', currentMode === 'overlaps' ? '0.65' : '0.9');
        poly.setAttribute('stroke', '#ffffff');
        poly.setAttribute('stroke-width', currentMode === 'gaps' ? '2' : '2.5');
        poly.setAttribute('stroke-linejoin', 'round');
        g.appendChild(poly);
      });
    } else if (currentShape === 'squares') {
      const size = 52;
      const cx = 200, cy = 118;
      let step = size;
      if (currentMode === 'gaps') step = size + 16;
      if (currentMode === 'overlaps') step = size - 14;

      let idx = 0;
      for (let r = -1; r <= 1; r++) {
        for (let c = -1; c <= 1; c++) {
          const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          rect.setAttribute('x', cx + c * step - size/2);
          rect.setAttribute('y', cy + r * step - size/2);
          rect.setAttribute('width', size);
          rect.setAttribute('height', size);
          rect.setAttribute('rx', currentMode === 'gaps' ? '4' : '1');
          rect.setAttribute('fill', colors[idx % colors.length]);
          rect.setAttribute('fill-opacity', currentMode === 'overlaps' ? '0.65' : '0.9');
          rect.setAttribute('stroke', '#ffffff');
          rect.setAttribute('stroke-width', '2.5');
          g.appendChild(rect);
          idx++;
        }
      }
    } else if (currentShape === 'triangles') {
      const side = 68;
      const h = side * (Math.sqrt(3) / 2);
      const cx = 200, cy = 118;

      let spread = 1;
      if (currentMode === 'gaps') spread = 1.3;
      if (currentMode === 'overlaps') spread = 0.72;

      const tris = [
        { x: cx - side/2 * spread, y: cy - h/3 * spread, inv: false, color: colors[0] },
        { x: cx + side/2 * spread, y: cy - h/3 * spread, inv: false, color: colors[1] },
        { x: cx, y: cy + (h/2 - h/6) * spread, inv: true, color: colors[2] },
        { x: cx - side * spread, y: cy + (h/2 - h/6) * spread, inv: true, color: colors[3] },
        { x: cx + side * spread, y: cy + (h/2 - h/6) * spread, inv: true, color: colors[4] },
        { x: cx, y: cy - h/3 * spread - (h/3)*2 * (spread - 1), inv: true, color: colors[5] }
      ];

      tris.forEach(t => {
        const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
        poly.setAttribute('points', getTriPoints(t.x, t.y, side, t.inv));
        poly.setAttribute('fill', t.color);
        poly.setAttribute('fill-opacity', currentMode === 'overlaps' ? '0.65' : '0.9');
        poly.setAttribute('stroke', '#ffffff');
        poly.setAttribute('stroke-width', '2.5');
        poly.setAttribute('stroke-linejoin', 'round');
        g.appendChild(poly);
      });
    }

    svg.appendChild(g);
  }

  document.querySelectorAll('.shape-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.shape-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      currentShape = btn.dataset.shape;
      render();
    });
  });

  document.querySelectorAll('.mode-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      currentMode = btn.dataset.mode;
      render();
    });
  });

  render();
</script>

</body>
</html>

The straight side of a flat shape is called an **edge**. To make a pattern, shapes must touch **edge-to-edge** like puzzle pieces.

What is the simplest shape we can use to cover a whole floor?

Squares are super tilers! Because every edge is straight and equal, squares line up row by row to fill any space.

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

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

    .tab-btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .tab-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: 440px;
      height: 250px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px dashed #cbd5e1;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .tile-shape {
      transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.4s ease;
      cursor: pointer;
    }

    .gap-highlight {
      fill: #fecdd3;
      stroke: #f43f5e;
      stroke-width: 1.5;
      stroke-dasharray: 3 3;
      transition: opacity 0.5s ease;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 440px;
      padding: 0 4px;
    }

    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }

    .badge-success {
      background: #dcfce7;
      color: #15803d;
    }

    .badge-alert {
      background: #ffe4e6;
      color: #be123c;
    }

    .action-btn {
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      background: #1e2945;
      color: #ffffff;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .action-btn:active {
      opacity: 0.8;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" id="tab-squares">🟦 Squares</button>
    <button class="tab-btn" id="tab-triangles">🔺 Triangles</button>
    <button class="tab-btn" id="tab-circles">⚪ Circles</button>
  </div>

  
  <div class="stage">
    <svg id="canvas" viewBox="0 0 360 220"></svg>
  </div>

  
  <div class="controls">
    <div class="badge badge-success" id="status-badge">
      <span id="badge-icon">✓</span>
      <span id="badge-text">Tiles Perfectly</span>
    </div>
    <button class="action-btn" id="toggle-btn">
      <span id="btn-icon">✦</span>
      <span id="btn-text">Separate</span>
    </button>
  </div>

  <script>
    const canvas = document.getElementById('canvas');
    const badge = document.getElementById('status-badge');
    const badgeIcon = document.getElementById('badge-icon');
    const badgeText = document.getElementById('badge-text');
    const toggleBtn = document.getElementById('toggle-btn');
    const btnText = document.getElementById('btn-text');

    const tabs = {
      squares: document.getElementById('tab-squares'),
      triangles: document.getElementById('tab-triangles'),
      circles: document.getElementById('tab-circles')
    };

    let currentMode = 'squares';
    let isPacked = true;

    const colors = ['#38bdf8', '#818cf8', '#34d399', '#fbbf24', '#f472b6', '#a78bfa'];

    function drawSquares() {
      canvas.innerHTML = '';
      const size = 48;
      const rows = 3;
      const cols = 5;
      const startX = 60;
      const startY = 38;

      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
          g.setAttribute('class', 'tile-shape');

          const x = startX + c * size;
          const y = startY + r * size;

          const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          rect.setAttribute('x', x);
          rect.setAttribute('y', y);
          rect.setAttribute('width', size - 1.5);
          rect.setAttribute('height', size - 1.5);
          rect.setAttribute('rx', '3');
          rect.setAttribute('fill', colors[(r * cols + c) % colors.length]);
          rect.setAttribute('stroke', '#ffffff');
          rect.setAttribute('stroke-width', '1.5');

          g.appendChild(rect);
          canvas.appendChild(g);

          // Store offset animation data
          const offsetX = (c - (cols - 1) / 2) * 16;
          const offsetY = (r - (rows - 1) / 2) * 16;
          g.dataset.ox = offsetX;
          g.dataset.oy = offsetY;
        }
      }
    }

    function drawTriangles() {
      canvas.innerHTML = '';
      const s = 58; // side length
      const h = s * (Math.sqrt(3) / 2); // ~50.2
      const rows = 3;
      const cols = 6;
      const startX = 40;
      const startY = 35;

      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
          g.setAttribute('class', 'tile-shape');

          const isUp = (r + c) % 2 === 0;
          const xBase = startX + c * (s / 2);
          const yBase = startY + r * h;

          let points = '';
          if (isUp) {
            points = `${xBase},${yBase + h} ${xBase + s},${yBase + h} ${xBase + s/2},${yBase}`;
          } else {
            points = `${xBase},${yBase} ${xBase + s},${yBase} ${xBase + s/2},${yBase + h}`;
          }

          const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
          poly.setAttribute('points', points);
          poly.setAttribute('fill', colors[(r * cols + c) % colors.length]);
          poly.setAttribute('stroke', '#ffffff');
          poly.setAttribute('stroke-width', '1.5');
          poly.setAttribute('stroke-linejoin', 'round');

          g.appendChild(poly);
          canvas.appendChild(g);

          const offsetX = (c - (cols - 1) / 2) * 14;
          const offsetY = (r - (rows - 1) / 2) * 18 + (isUp ? -6 : 6);
          g.dataset.ox = offsetX;
          g.dataset.oy = offsetY;
        }
      }
    }

    function drawCircles() {
      canvas.innerHTML = '';
      const r = 24;
      const rows = 3;
      const cols = 5;
      const startX = 64;
      const startY = 42;

      // Add gap highlights first (behind circles)
      for (let row = 0; row < rows - 1; row++) {
        for (let col = 0; col < cols - 1; col++) {
          const cx = startX + col * (r * 2) + r;
          const cy = startY + row * (r * 2) + r;

          const gapPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
          // Shape representing the interstitial gap between 4 touching circles
          const d = `M ${cx},${cy - r} 
                     A ${r} ${r} 0 0 1 ${cx + r},${cy} 
                     A ${r} ${r} 0 0 1 ${cx},${cy + r} 
                     A ${r} ${r} 0 0 1 ${cx - r},${cy} 
                     A ${r} ${r} 0 0 1 ${cx},${cy - r} Z`;
          gapPath.setAttribute('d', d);
          gapPath.setAttribute('class', 'gap-highlight');
          gapPath.setAttribute('id', `gap-${row}-${col}`);
          canvas.appendChild(gapPath);
        }
      }

      for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
          const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
          g.setAttribute('class', 'tile-shape');

          const cx = startX + col * (r * 2);
          const cy = startY + row * (r * 2);

          const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
          circle.setAttribute('cx', cx);
          circle.setAttribute('cy', cy);
          circle.setAttribute('r', r - 1);
          circle.setAttribute('fill', colors[(row * cols + col) % colors.length]);
          circle.setAttribute('stroke', '#ffffff');
          circle.setAttribute('stroke-width', '1.5');

          g.appendChild(circle);
          canvas.appendChild(g);

          const offsetX = (col - (cols - 1) / 2) * 14;
          const offsetY = (row - (rows - 1) / 2) * 14;
          g.dataset.ox = offsetX;
          g.dataset.oy = offsetY;
        }
      }
    }

    function applyTransforms() {
      const shapes = document.querySelectorAll('.tile-shape');
      shapes.forEach(shape => {
        if (!isPacked) {
          const ox = shape.dataset.ox || 0;
          const oy = shape.dataset.oy || 0;
          shape.style.transform = `translate(${ox}px, ${oy}px)`;
        } else {
          shape.style.transform = 'translate(0px, 0px)';
        }
      });

      const gaps = document.querySelectorAll('.gap-highlight');
      gaps.forEach(gap => {
        gap.style.opacity = isPacked ? '1' : '0.2';
      });

      btnText.textContent = isPacked ? 'Separate' : 'Tile Together';
    }

    function updateView() {
      if (currentMode === 'squares') {
        drawSquares();
        badge.className = 'badge badge-success';
        badgeIcon.textContent = '✓';
        badgeText.textContent = 'Tiles Perfectly';
      } else if (currentMode === 'triangles') {
        drawTriangles();
        badge.className = 'badge badge-success';
        badgeIcon.textContent = '✓';
        badgeText.textContent = 'Flipped & Locked';
      } else if (currentMode === 'circles') {
        drawCircles();
        badge.className = 'badge badge-alert';
        badgeIcon.textContent = '✕';
        badgeText.textContent = 'Leaves Gaps!';
      }
      applyTransforms();
    }

    function setMode(mode) {
      currentMode = mode;
      Object.keys(tabs).forEach(k => {
        tabs[k].classList.toggle('active', k === mode);
      });
      isPacked = true;
      updateView();
    }

    tabs.squares.addEventListener('click', () => setMode('squares'));
    tabs.triangles.addEventListener('click', () => setMode('triangles'));
    tabs.circles.addEventListener('click', () => setMode('circles'));

    toggleBtn.addEventListener('click', () => {
      isPacked = !isPacked;
      applyTransforms();
    });

    // Initial render
    updateView();
  </script>
</body>
</html>

Triangles can tile too! When you flip every other triangle upside down, their straight edges lock together perfectly.

Squares and triangles work great alone, but what happens when we mix two different shapes together?

To **alternate** means to take turns in a repeating order. We can place a square, then a triangle, then another square!

<!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>Alternating Shapes Tiling</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;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }
  .controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    z-index: 10;
  }
  .btn-step {
    flex: 1;
    min-width: 75px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 2px solid transparent;
    background: #ffffff;
    color: #6b7280;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
  }
  .btn-step.active {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #22b7ff;
  }
  .stage-wrapper {
    position: relative;
    width: 100%;
    max-width: 440px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
  }
  svg {
    width: 100%;
    height: auto;
    max-height: 280px;
    overflow: visible;
  }
  .shape {
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform-origin: center;
  }
  .shape.hidden {
    opacity: 0;
    pointer-events: none;
  }
  .seam {
    transition: opacity 0.3s ease, stroke-dashoffset 0.6s ease;
    stroke-dasharray: 6 4;
  }
  .seam.hidden {
    opacity: 0;
  }
  .edge-mark {
    transition: opacity 0.3s ease;
  }
  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #0284c7;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
</style>
</head>
<body>

  <div class="status-badge" id="statusBadge">
    <span>⬛ Square</span>
  </div>

  <div class="stage-wrapper">
    <svg viewBox="0 0 340 220" aria-label="Alternating shape tiling">
      <defs>
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.15"/>
        </filter>
      </defs>

      
      <g id="shape1" class="shape" filter="url(#glow)">
        <polygon points="65,80 125,80 125,140 65,140" fill="#38bdf8" stroke="#0284c7" stroke-width="3" stroke-linejoin="round"/>
        <text x="95" y="115" fill="#ffffff" font-size="14" font-weight="bold" text-anchor="middle">1</text>
      </g>

      
      <line id="seam1" class="seam hidden" x1="125" y1="80" x2="125" y2="140" stroke="#16a34a" stroke-width="4"/>
      
      <g id="tick1" class="edge-mark hidden" stroke="#16a34a" stroke-width="2.5">
        <line x1="121" y1="108" x2="129" y2="108"/>
        <line x1="121" y1="112" x2="129" y2="112"/>
      </g>

      
      <g id="shape2" class="shape hidden" filter="url(#glow)">
        <polygon points="125,80 176.96,110 125,140" fill="#fb923c" stroke="#ea580c" stroke-width="3" stroke-linejoin="round"/>
        <text x="142" y="114" fill="#ffffff" font-size="14" font-weight="bold" text-anchor="middle">2</text>
      </g>

      
      <line id="seam2" class="seam hidden" x1="125" y1="140" x2="176.96" y2="110" stroke="#16a34a" stroke-width="4"/>
      <g id="tick2" class="edge-mark hidden" stroke="#16a34a" stroke-width="2.5">
        <line x1="148" y1="128" x2="154" y2="122"/>
        <line x1="150" y1="131" x2="156" y2="125"/>
      </g>

      
      <g id="shape3" class="shape hidden" filter="url(#glow)">
        <polygon points="125,140 176.96,110 206.96,161.96 155,191.96" fill="#38bdf8" stroke="#0284c7" stroke-width="3" stroke-linejoin="round"/>
        <text x="166" y="155" fill="#ffffff" font-size="14" font-weight="bold" text-anchor="middle">3</text>
      </g>

      
      <line id="seam3" class="seam hidden" x1="176.96" y1="110" x2="206.96" y2="161.96" stroke="#16a34a" stroke-width="4"/>
      <g id="tick3" class="edge-mark hidden" stroke="#16a34a" stroke-width="2.5">
        <line x1="188" y1="133" x2="196" y2="138"/>
        <line x1="190" y1="136" x2="198" y2="141"/>
      </g>

      
      <g id="shape4" class="shape hidden" filter="url(#glow)">
        <polygon points="176.96,110 206.96,161.96 243.92,122" fill="#fb923c" stroke="#ea580c" stroke-width="3" stroke-linejoin="round"/>
        <text x="207" y="134" fill="#ffffff" font-size="14" font-weight="bold" text-anchor="middle">4</text>
      </g>
    </svg>
  </div>

  <div class="controls">
    <button class="btn-step active" onclick="setStep(0)">1. Square</button>
    <button class="btn-step" onclick="setStep(1)">2. Triangle</button>
    <button class="btn-step" onclick="setStep(2)">3. Square</button>
    <button class="btn-step" onclick="setStep(3)">4. Triangle</button>
  </div>

<script>
  const steps = [
    { label: '⬛ Square', shapes: [1], seams: [], ticks: [] },
    { label: '🔺 + Triangle', shapes: [1, 2], seams: [1], ticks: [1] },
    { label: '⬛ + Square', shapes: [1, 2, 3], seams: [1, 2], ticks: [2] },
    { label: '🔺 + Triangle', shapes: [1, 2, 3, 4], seams: [1, 2, 3], ticks: [3] }
  ];

  let currentStep = 0;
  let autoTimer = null;

  function updateVisuals() {
    const s = steps[currentStep];
    document.getElementById('statusBadge').innerHTML = s.label;

    document.querySelectorAll('.btn-step').forEach((btn, idx) => {
      btn.classList.toggle('active', idx === currentStep);
    });

    for (let i = 1; i <= 4; i++) {
      const el = document.getElementById('shape' + i);
      if (s.shapes.includes(i)) {
        el.classList.remove('hidden');
      } else {
        el.classList.add('hidden');
      }
    }

    for (let i = 1; i <= 3; i++) {
      const seam = document.getElementById('seam' + i);
      const tick = document.getElementById('tick' + i);
      if (s.seams.includes(i)) {
        seam.classList.remove('hidden');
      } else {
        seam.classList.add('hidden');
      }
      if (s.ticks.includes(i)) {
        tick.classList.remove('hidden');
      } else {
        tick.classList.add('hidden');
      }
    }
  }

  function setStep(idx) {
    currentStep = idx;
    updateVisuals();
    restartTimer();
  }

  function restartTimer() {
    clearInterval(autoTimer);
    autoTimer = setInterval(() => {
      currentStep = (currentStep + 1) % steps.length;
      updateVisuals();
    }, 3200);
  }

  updateVisuals();
  restartTimer();
</script>
</body>
</html>

As long as the touching edges are the exact same length, the two shapes lock together without leaving any holes.

Be careful with round shapes! Circles have curved sides, so putting them side-by-side always leaves open gaps.

Next time you take a walk outside, look down at the sidewalk to spot the shapes locked under your shoes!

math

Creating Tiling Patterns With Different Shapes. Arrange identical or alternating geometric shapes edge-to-edge to create continuous tiling patterns.

Early Years Pattern and Shape Investigations

2D Shapes and Tessellation Patterns (Early & First Level)

Interactive Tessellation Creator

Teaching tiling at Early Level (P1) should be rooted in tactile play and physical manipulation before abstract representation. Begin with physical pattern blocks, foam shapes, or paper cutouts where children can physically feel edges aligning. Scaffold exploration by first testing single shapes (e.g., 'Will only squares cover the table? Can circles do it? Why not?') to highlight the concept of edges and gaps. Progressively introduce 2-shape alternating patterns ($ABAB$), guiding pupils to describe the repeating core rule and explicitly check for no gaps and no overlaps.

Creating Tiling Patterns With Different Shapes

Tiling with One Shape

Alternating Two Shapes