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 closely at a zebra, a snail shell, or a picnic blanket?

They all have special designs called **patterns** where colors or shapes repeat again and again.

What is the easiest pattern you can spot on animals and clothes?

**Stripes** are lines of color that repeat side by side in a steady order.

<!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>Repeating Stripe Patterns</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      border-color: #22b7ff;
      color: #1e2945;
      background: #eef9ff;
    }

    /* Pattern Card */
    .pattern-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .stripes-view {
      width: 100%;
      height: 100px;
      border-radius: 8px;
      display: flex;
      overflow: hidden;
      border: 1px solid #d1d5db;
    }

    .stripe {
      flex: 1;
      height: 100%;
      transition: background 0.3s ease;
    }

    .stripe.target-slot {
      background: #f1f5f9;
      border: 2px dashed #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #94a3b8;
      font-weight: bold;
    }

    .labels-row {
      display: flex;
      width: 100%;
      justify-content: space-around;
    }

    .label-tag {
      flex: 1;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: #4b5563;
    }

    /* Interactive section */
    .question-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .prompt-text {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
    }

    .choices {
      display: flex;
      gap: 12px;
    }

    .choice-btn {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      border: 2px solid #d1d5db;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      transition: transform 0.1s ease, border-color 0.2s ease;
    }

    .choice-btn:active {
      transform: scale(0.95);
    }

    .choice-btn.correct {
      border-color: #10b981;
      outline: 2px solid #10b981;
    }

    .choice-btn.wrong {
      border-color: #ef4444;
      opacity: 0.6;
    }

    .feedback {
      font-size: 14px;
      font-weight: 700;
      min-height: 20px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .feedback.ok {
      color: #059669;
    }
  </style>
</head>
<body>
  <div class="main-container">
    <div class="tabs">
      <button class="tab-btn active" onclick="setPattern(0)">
        <span>🦓</span> Zebra
      </button>
      <button class="tab-btn" onclick="setPattern(1)">
        <span>🐝</span> Bee
      </button>
      <button class="tab-btn" onclick="setPattern(2)">
        <span>👕</span> Shirt
      </button>
    </div>

    <div class="pattern-card">
      <div class="stripes-view" id="stripesContainer"></div>
      <div class="labels-row" id="labelsContainer"></div>

      <div class="question-section">
        <span class="prompt-text">What comes next?</span>
        <div class="choices" id="choicesContainer"></div>
        <div class="feedback" id="feedback"></div>
      </div>
    </div>
  </div>

  <script>
    const patterns = [
      {
        name: "Zebra",
        unit: ["#1e293b", "#ffffff"],
        labels: ["A", "B", "A", "B", "A", "B", "A"],
        sequence: ["#1e293b", "#ffffff", "#1e293b", "#ffffff", "#1e293b", "#ffffff"],
        nextColor: "#1e293b",
        options: ["#1e293b", "#ffffff", "#e2e8f0"]
      },
      {
        name: "Bee",
        unit: ["#facc15", "#1e293b"],
        labels: ["A", "B", "A", "B", "A", "B", "A"],
        sequence: ["#facc15", "#1e293b", "#facc15", "#1e293b", "#facc15", "#1e293b"],
        nextColor: "#facc15",
        options: ["#1e293b", "#facc15", "#60a5fa"]
      },
      {
        name: "Shirt",
        unit: ["#3b82f6", "#ef4444", "#fbbf24"],
        labels: ["A", "B", "C", "A", "B", "C", "A"],
        sequence: ["#3b82f6", "#ef4444", "#fbbf24", "#3b82f6", "#ef4444", "#fbbf24"],
        nextColor: "#3b82f6",
        options: ["#ef4444", "#fbbf24", "#3b82f6"]
      }
    ];

    let currentIdx = 0;
    let answered = false;

    function render() {
      const p = patterns[currentIdx];
      const stripesEl = document.getElementById("stripesContainer");
      const labelsEl = document.getElementById("labelsContainer");
      const choicesEl = document.getElementById("choicesContainer");
      const feedbackEl = document.getElementById("feedback");

      feedbackEl.textContent = "";
      feedbackEl.className = "feedback";
      answered = false;

      // Render stripes
      stripesEl.innerHTML = "";
      p.sequence.forEach(color => {
        const stripe = document.createElement("div");
        stripe.className = "stripe";
        stripe.style.background = color;
        stripesEl.appendChild(stripe);
      });

      // Target slot
      const targetSlot = document.createElement("div");
      targetSlot.className = "stripe target-slot";
      targetSlot.id = "targetSlot";
      targetSlot.textContent = "?";
      stripesEl.appendChild(targetSlot);

      // Render labels
      labelsEl.innerHTML = "";
      p.labels.forEach((lbl, idx) => {
        const tag = document.createElement("div");
        tag.className = "label-tag";
        tag.textContent = idx === p.labels.length - 1 ? "?" : lbl;
        labelsEl.appendChild(tag);
      });

      // Render choices
      choicesEl.innerHTML = "";
      p.options.forEach(color => {
        const btn = document.createElement("button");
        btn.className = "choice-btn";
        btn.style.background = color;
        btn.onclick = () => checkAnswer(color, btn);
        choicesEl.appendChild(btn);
      });
    }

    function checkAnswer(color, btn) {
      if (answered) return;
      const p = patterns[currentIdx];
      const feedbackEl = document.getElementById("feedback");
      const targetSlot = document.getElementById("targetSlot");

      if (color === p.nextColor) {
        answered = true;
        btn.classList.add("correct");
        targetSlot.style.background = color;
        targetSlot.textContent = "";
        targetSlot.classList.remove("target-slot");
        feedbackEl.className = "feedback ok";
        feedbackEl.textContent = "✓ Pattern continues!";
      } else {
        btn.classList.add("wrong");
        setTimeout(() => btn.classList.remove("wrong"), 600);
      }
    }

    function setPattern(idx) {
      currentIdx = idx;
      document.querySelectorAll(".tab-btn").forEach((btn, i) => {
        btn.classList.toggle("active", i === idx);
      });
      render();
    }

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

A zebra shows a black, white, black, white pattern. A striped shirt repeats colors the exact same way!

What happens when a pattern curls round and round instead of going in straight lines?

A **spiral** is a curved line that winds around a center point, growing bigger and bigger.

<!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>Spiral Pattern</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;
      padding: 12px;
      min-height: 100vh;
      user-select: none;
    }

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

    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #0d9488;
      color: #ffffff;
      border-color: #0d9488;
      box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25);
    }

    .viewport {
      position: relative;
      width: 100%;
      max-width: 340px;
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 1px solid #eef2f6;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    svg {
      width: 100%;
      height: 100%;
      transform: scale(0.92);
    }

    .center-label {
      position: absolute;
      top: calc(50% + 14px);
      left: 50%;
      transform: translateX(-50%);
      font-size: 13px;
      font-weight: 700;
      color: #f97316;
      background: rgba(255, 255, 255, 0.95);
      padding: 2px 8px;
      border-radius: 10px;
      border: 1px solid #fed7aa;
      pointer-events: none;
    }

    .controls {
      width: 100%;
      max-width: 340px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
    }

    .slider-row {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .slider-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      min-width: 54px;
    }

    input[type="range"] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      outline: none;
      accent-color: #0d9488;
      cursor: pointer;
    }

    .play-btn {
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 600;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 14px;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s;
    }

    .play-btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" data-mode="spiral">🌀 Spiral</button>
    <button class="tab-btn" data-mode="nature">🐌 Nature</button>
    <button class="tab-btn" data-mode="art">🏛️ Stairs</button>
  </div>

  <div class="viewport">
    <svg id="stage" viewBox="0 0 300 300">
      <g id="gridLayer" opacity="0.15"></g>
      <g id="stairsLayer"></g>
      <g id="snailLayer"></g>
      <g id="spiralLayer"></g>
      <circle cx="150" cy="150" r="5" fill="#f97316" />
    </svg>
    <div class="center-label">Center</div>
  </div>

  <div class="controls">
    <div class="slider-row">
      <span class="slider-label">Growth</span>
      <input type="range" id="growthSlider" min="0.05" max="1" step="0.01" value="1">
    </div>
    <button class="play-btn" id="playBtn">▶ Auto Play</button>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const spiralLayer = document.getElementById('spiralLayer');
    const snailLayer = document.getElementById('snailLayer');
    const stairsLayer = document.getElementById('stairsLayer');
    const growthSlider = document.getElementById('growthSlider');
    const playBtn = document.getElementById('playBtn');
    const tabBtns = document.querySelectorAll('.tab-btn');

    let currentMode = 'spiral';
    let isPlaying = false;
    let animId = null;
    let growth = 1;

    const CX = 150, CY = 150;
    const TOTAL_TURNS = 3.2;
    const MAX_THETA = TOTAL_TURNS * 2 * Math.PI;
    const A = 6.2;

    function getSpiralPoint(t) {
      const theta = t * MAX_THETA;
      const r = A * theta;
      return {
        x: CX + r * Math.cos(theta),
        y: CY + r * Math.sin(theta),
        r: r,
        theta: theta
      };
    }

    function renderSpiral(progress) {
      spiralLayer.innerHTML = '';
      if (progress <= 0) return;

      const steps = Math.floor(progress * 180);
      let d = `M ${CX} ${CY}`;
      for (let i = 1; i <= steps; i++) {
        const p = getSpiralPoint(i / 180);
        d += ` L ${p.x.toFixed(2)} ${p.y.toFixed(2)}`;
      }

      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', d);
      path.setAttribute('fill', 'none');
      path.setAttribute('stroke', '#0d9488');
      path.setAttribute('stroke-width', '4.5');
      path.setAttribute('stroke-linecap', 'round');
      spiralLayer.appendChild(path);

      const endPt = getSpiralPoint(progress);
      const tip = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      tip.setAttribute('cx', endPt.x);
      tip.setAttribute('cy', endPt.y);
      tip.setAttribute('r', '6');
      tip.setAttribute('fill', '#0d9488');
      spiralLayer.appendChild(tip);
    }

    function renderSnail(progress) {
      snailLayer.innerHTML = '';
      if (currentMode !== 'nature') return;

      const count = Math.floor(progress * 24);
      for (let i = 1; i <= count; i++) {
        const t = i / 24;
        const p = getSpiralPoint(t);
        const nextP = getSpiralPoint(Math.min(1, t + 0.04));
        const seg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        seg.setAttribute('cx', p.x);
        seg.setAttribute('cy', p.y);
        seg.setAttribute('r', (p.r * 0.28 + 2).toFixed(1));
        seg.setAttribute('fill', '#fed7aa');
        seg.setAttribute('stroke', '#ea580c');
        seg.setAttribute('stroke-width', '1.5');
        seg.setAttribute('opacity', '0.85');
        snailLayer.appendChild(seg);
      }

      if (progress > 0.8) {
        const headPt = getSpiralPoint(progress);
        const head = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        head.setAttribute('x', headPt.x + 8);
        head.setAttribute('y', headPt.y + 6);
        head.setAttribute('font-size', '20');
        head.textContent = '🐌';
        snailLayer.appendChild(head);
      }
    }

    function renderStairs(progress) {
      stairsLayer.innerHTML = '';
      if (currentMode !== 'art') return;

      const numSteps = Math.floor(progress * 26);
      for (let i = 1; i <= numSteps; i++) {
        const t = i / 26;
        const p = getSpiralPoint(t);
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', CX);
        line.setAttribute('y1', CY);
        line.setAttribute('x2', p.x);
        line.setAttribute('y2', p.y);
        line.setAttribute('stroke', '#64748b');
        line.setAttribute('stroke-width', '2.5');
        line.setAttribute('stroke-dasharray', '3 2');
        stairsLayer.appendChild(line);

        const tread = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        tread.setAttribute('cx', p.x);
        tread.setAttribute('cy', p.y);
        tread.setAttribute('r', '3.5');
        tread.setAttribute('fill', '#0284c7');
        stairsLayer.appendChild(tread);
      }
    }

    function update() {
      renderSpiral(growth);
      renderSnail(growth);
      renderStairs(growth);
    }

    tabBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        tabBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentMode = btn.dataset.mode;
        update();
      });
    });

    growthSlider.addEventListener('input', (e) => {
      stopAutoPlay();
      growth = parseFloat(e.target.value);
      update();
    });

    function stopAutoPlay() {
      isPlaying = false;
      playBtn.textContent = '▶ Auto Play';
      if (animId) cancelAnimationFrame(animId);
    }

    function playLoop() {
      if (!isPlaying) return;
      growth += 0.007;
      if (growth > 1) {
        growth = 0.05;
      }
      growthSlider.value = growth;
      update();
      animId = requestAnimationFrame(playLoop);
    }

    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.textContent = '⏸ Pause';
        if (growth >= 1) growth = 0.05;
        playLoop();
      } else {
        stopAutoPlay();
      }
    });

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

A snail shell winds in a spiral as it grows. People use that same spiral shape to build curvy staircases.

What kind of pattern do you get when straight lines cross each other to make squares?

**Checks** are square boxes of alternating colors placed side by side like a checkerboard grid.

<!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;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

    .main-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      width: 100%;
      max-width: 380px;
    }

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

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

    .tab-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .grid-container {
      width: 220px;
      height: 220px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 4px;
      padding: 6px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(30, 41, 69, 0.08);
    }

    .cell {
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: all 0.35s ease;
      cursor: pointer;
    }

    .cell.dark {
      background-color: #1e2945;
      color: #ffffff;
    }

    .cell.light {
      background-color: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #64748b;
    }

    .cell.dimmed {
      opacity: 0.12;
      transform: scale(0.92);
    }

    .indicators {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .play-btn {
      border: none;
      background: #ffffff;
      color: #1e2945;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      transition: background 0.2s ease;
    }

    .play-btn:hover {
      background: #f8fafc;
    }

    .dots {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .dot.active {
      background: #22b7ff;
      width: 18px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    <div class="btn-group">
      <button class="tab-btn active" data-step="0">Row 1</button>
      <button class="tab-btn" data-step="1">Row 2</button>
      <button class="tab-btn" data-step="2">Full Grid</button>
    </div>

    <div class="grid-container" id="grid">
      
      <div class="cell dark" data-row="0">■</div>
      <div class="cell light" data-row="0">□</div>
      <div class="cell dark" data-row="0">■</div>
      <div class="cell light" data-row="0">□</div>

      <div class="cell light" data-row="1">□</div>
      <div class="cell dark" data-row="1">■</div>
      <div class="cell light" data-row="1">□</div>
      <div class="cell dark" data-row="1">■</div>

      <div class="cell dark" data-row="2">■</div>
      <div class="cell light" data-row="2">□</div>
      <div class="cell dark" data-row="2">■</div>
      <div class="cell light" data-row="2">□</div>

      <div class="cell light" data-row="3">□</div>
      <div class="cell dark" data-row="3">■</div>
      <div class="cell light" data-row="3">□</div>
      <div class="cell dark" data-row="3">■</div>
    </div>

    <div class="indicators">
      <button class="play-btn" id="playBtn" aria-label="Toggle autoplay">⏸</button>
      <div class="dots">
        <div class="dot active" data-step="0"></div>
        <div class="dot" data-step="1"></div>
        <div class="dot" data-step="2"></div>
      </div>
    </div>
  </div>

  <script>
    const cells = document.querySelectorAll('.cell');
    const tabs = document.querySelectorAll('.tab-btn');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');

    let currentStep = 0;
    let playing = true;
    let timer = null;

    function applyStep(step) {
      currentStep = step;

      tabs.forEach((tab, i) => tab.classList.toggle('active', i === step));
      dots.forEach((dot, i) => dot.classList.toggle('active', i === step));

      cells.forEach(cell => {
        const row = parseInt(cell.dataset.row, 10);
        if (step === 0) {
          cell.classList.toggle('dimmed', row !== 0);
        } else if (step === 1) {
          cell.classList.toggle('dimmed', row > 1);
        } else {
          cell.classList.remove('dimmed');
        }
      });
    }

    function nextStep() {
      applyStep((currentStep + 1) % 3);
    }

    function startAuto() {
      stopAuto();
      playing = true;
      playBtn.textContent = '⏸';
      timer = setInterval(nextStep, 3000);
    }

    function stopAuto() {
      playing = false;
      playBtn.textContent = '▶';
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    tabs.forEach((tab, i) => {
      tab.addEventListener('click', () => {
        stopAuto();
        applyStep(i);
      });
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        stopAuto();
        applyStep(i);
      });
    });

    playBtn.addEventListener('click', () => {
      if (playing) {
        stopAuto();
      } else {
        nextStep();
        startAuto();
      }
    });

    // Interactive square toggle on tap
    cells.forEach(cell => {
      cell.addEventListener('click', () => {
        stopAuto();
        if (cell.classList.contains('dark')) {
          cell.classList.remove('dark');
          cell.classList.add('light');
          cell.textContent = '□';
        } else {
          cell.classList.remove('light');
          cell.classList.add('dark');
          cell.textContent = '■';
        }
      });
    });

    // Initialize
    applyStep(0);
    startAuto();
  </script>
</body>
</html>

When dark and light squares take turns across rows and columns, they make a neat check pattern.

Ready to test your pattern detective eyes?

<!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>Patterns in Nature and Art</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  
  :root {
    --primary: #22b7ff;
    --text: #1e2945;
    --border: #e2e8f0;
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --accent-sym: #ec4899;
    --accent-tes: #f59e0b;
    --accent-spi: #8b5cf6;
    --accent-str: #10b981;
  }

  body {
    background-color: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

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

  .tab-btn {
    flex: 1;
    min-width: 90px;
    padding: 8px 6px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

  .tab-btn.active {
    background: #1e2945;
    color: #ffffff;
    border-color: #1e2945;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .stage {
    width: 100%;
    max-width: 480px;
    height: 250px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pattern-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  .pattern-view.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* SVG Graphics Styling */
  svg {
    max-width: 90%;
    max-height: 75%;
  }

  .badge-tag {
    position: absolute;
    bottom: 12px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    background: #f1f5f9;
  }

  /* Overlay toggle states */
  .pattern-line {
    transition: stroke-dashoffset 0.6s ease, opacity 0.3s ease;
  }

  .hidden-rule {
    opacity: 0.15;
  }

  .active-rule {
    opacity: 1;
  }

  /* Controls */
  .controls {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    max-width: 480px;
    justify-content: center;
  }

  .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .btn-action:active {
    background: #f1f5f9;
  }

  .btn-highlight {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
  }
</style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" data-index="0">🦋 Symmetry</button>
    <button class="tab-btn" data-index="1">🧱 Tessellation</button>
    <button class="tab-btn" data-index="2">🐚 Spiral</button>
    <button class="tab-btn" data-index="3">🦓 Repeating</button>
  </div>

  
  <div class="stage">
    
    
    <div class="pattern-view active" id="view-0">
      <svg viewBox="0 0 200 160" width="200" height="160">
        
        <g fill="#ec4899" fill-opacity="0.85">
          <ellipse cx="65" cy="65" rx="35" ry="25" transform="rotate(-25 65 65)"/>
          <ellipse cx="75" cy="105" rx="25" ry="18" transform="rotate(20 75 105)"/>
          <circle cx="60" cy="60" r="8" fill="#fbcfe8"/>
          <circle cx="72" cy="105" r="5" fill="#fbcfe8"/>
        </g>
        
        <g fill="#ec4899" fill-opacity="0.85">
          <ellipse cx="135" cy="65" rx="35" ry="25" transform="rotate(25 135 65)"/>
          <ellipse cx="125" cy="105" rx="25" ry="18" transform="rotate(-20 125 105)"/>
          <circle cx="140" cy="60" r="8" fill="#fbcfe8"/>
          <circle cx="128" cy="105" r="5" fill="#fbcfe8"/>
        </g>
        
        <ellipse cx="100" cy="80" rx="4" ry="32" fill="#334155"/>
        <circle cx="100" cy="46" r="6" fill="#334155"/>
        
        <path d="M98,42 Q85,25 78,28 M102,42 Q115,25 122,28" fill="none" stroke="#334155" stroke-width="2" stroke-linecap="round"/>
        
        <line class="pattern-line active-rule" x1="100" y1="15" x2="100" y2="145" stroke="#ec4899" stroke-width="3" stroke-dasharray="6,4"/>
        <text x="108" y="28" fill="#ec4899" font-size="10" font-weight="700" class="pattern-line active-rule">Mirror Line</text>
      </svg>
      <div class="badge-tag" style="color:#ec4899">Reflection</div>
    </div>

    
    <div class="pattern-view" id="view-1">
      <svg viewBox="0 0 240 160" width="240" height="160">
        <defs>
          <polygon id="hex" points="0,-22 19,-11 19,11 0,22 -19,11 -19,-11" stroke-width="2.5"/>
        </defs>
        <g stroke="#f59e0b" fill="#fef3c7" fill-opacity="0.9">
          
          <use href="#hex" x="60" y="40"/>
          <use href="#hex" x="120" y="40"/>
          <use href="#hex" x="180" y="40"/>
          
          <use href="#hex" x="30" y="75"/>
          <use href="#hex" x="90" y="75"/>
          <use href="#hex" x="150" y="75"/>
          <use href="#hex" x="210" y="75"/>
          
          <use href="#hex" x="60" y="110"/>
          <use href="#hex" x="120" y="110"/>
          <use href="#hex" x="180" y="110"/>
        </g>
        
        <g class="pattern-line active-rule" fill="none" stroke="#b45309" stroke-width="2" stroke-dasharray="4,2">
          <use href="#hex" x="120" y="40"/>
          <use href="#hex" x="90" y="75"/>
          <use href="#hex" x="150" y="75"/>
        </g>
      </svg>
      <div class="badge-tag" style="color:#b45309">No Gaps · Tiles</div>
    </div>

    
    <div class="pattern-view" id="view-2">
      <svg viewBox="0 0 200 160" width="200" height="160">
        
        <path d="M100,85 A4,4 0 0,1 104,89 A8,8 0 0,1 96,97 A16,16 0 0,1 84,81 A26,26 0 0,1 110,55 A42,42 0 0,1 152,97 A64,64 0 0,1 88,161 A88,88 0 0,1 0,73" fill="none" stroke="#e2e8f0" stroke-width="14" stroke-linecap="round"/>
        <path d="M100,85 A4,4 0 0,1 104,89 A8,8 0 0,1 96,97 A16,16 0 0,1 84,81 A26,26 0 0,1 110,55 A42,42 0 0,1 152,97" fill="none" stroke="#ddd6fe" stroke-width="8" stroke-linecap="round"/>
        
        <path class="pattern-line active-rule" d="M100,85 A4,4 0 0,1 104,89 A8,8 0 0,1 96,97 A16,16 0 0,1 84,81 A26,26 0 0,1 110,55 A42,42 0 0,1 152,97" fill="none" stroke="#8b5cf6" stroke-width="3.5" stroke-linecap="round"/>
        
        <circle class="pattern-line active-rule" cx="100" cy="85" r="3" fill="#8b5cf6"/>
        <circle class="pattern-line active-rule" cx="104" cy="89" r="3.5" fill="#8b5cf6"/>
        <circle class="pattern-line active-rule" cx="96" cy="97" r="4" fill="#8b5cf6"/>
        <circle class="pattern-line active-rule" cx="84" cy="81" r="4.5" fill="#8b5cf6"/>
        <circle class="pattern-line active-rule" cx="110" cy="55" r="5" fill="#8b5cf6"/>
        <circle class="pattern-line active-rule" cx="152" cy="97" r="5.5" fill="#8b5cf6"/>
      </svg>
      <div class="badge-tag" style="color:#8b5cf6">Expanding Curve</div>
    </div>

    
    <div class="pattern-view" id="view-3">
      <svg viewBox="0 0 240 160" width="240" height="160">
        
        <g stroke="#334155" stroke-width="2">
          <circle cx="45" cy="80" r="18" fill="#10b981"/>
          <circle cx="75" cy="80" r="18" fill="#3b82f6"/>
          <circle cx="105" cy="80" r="18" fill="#10b981"/>
          <circle cx="135" cy="80" r="18" fill="#3b82f6"/>
          <circle cx="165" cy="80" r="18" fill="#10b981"/>
          <circle cx="195" cy="80" r="18" fill="#3b82f6"/>
        </g>
        
        <circle cx="200" cy="74" r="2.5" fill="#1e2945"/>
        <circle cx="207" cy="74" r="2.5" fill="#1e2945"/>
        <path d="M199,85 Q204,90 209,85" fill="none" stroke="#1e2945" stroke-width="2" stroke-linecap="round"/>
        
        <g class="pattern-line active-rule" font-size="12" font-weight="800" text-anchor="middle">
          <text x="45" y="84" fill="#ffffff">A</text>
          <text x="75" y="84" fill="#ffffff">B</text>
          <text x="105" y="84" fill="#ffffff">A</text>
          <text x="135" y="84" fill="#ffffff">B</text>
          <text x="165" y="84" fill="#ffffff">A</text>
          <text x="195" y="84" fill="#ffffff">B</text>
          
          <path d="M35,115 L85,115 M60,115 L60,123" stroke="#10b981" stroke-width="2" fill="none"/>
          <text x="60" y="137" fill="#10b981" font-size="11">Unit</text>
          <path d="M95,115 L145,115 M120,115 L120,123" stroke="#10b981" stroke-width="2" fill="none"/>
          <text x="120" y="137" fill="#10b981" font-size="11">Unit</text>
        </g>
      </svg>
      <div class="badge-tag" style="color:#10b981">A - B Repeat</div>
    </div>

  </div>

  
  <div class="controls">
    <button class="btn-action" id="toggleOverlayBtn">✦ Rule Overlay</button>
    <button class="btn-action btn-highlight" id="nextBtn">Next Pattern →</button>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab-btn');
    const views = document.querySelectorAll('.pattern-view');
    const toggleBtn = document.getElementById('toggleOverlayBtn');
    const nextBtn = document.getElementById('nextBtn');
    
    let currentIndex = 0;
    let overlayVisible = true;

    function showPattern(index) {
      currentIndex = index;
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === index);
      });
      views.forEach((view, i) => {
        view.classList.toggle('active', i === index);
      });
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        showPattern(parseInt(tab.dataset.index, 10));
      });
    });

    nextBtn.addEventListener('click', () => {
      const nextIndex = (currentIndex + 1) % tabs.length;
      showPattern(nextIndex);
    });

    toggleBtn.addEventListener('click', () => {
      overlayVisible = !overlayVisible;
      document.querySelectorAll('.pattern-line').forEach(el => {
        el.classList.toggle('active-rule', overlayVisible);
        el.classList.toggle('hidden-rule', !overlayVisible);
      });
      toggleBtn.style.opacity = overlayVisible ? '1' : '0.7';
    });
  </script>
</body>
</html>

Next time you take a walk, look closely at tree leaves, animal coats, brick walls, and floor tiles to see which pattern is hiding there!

math

Spotting Patterns in Nature and Art. Identify repeating stripes, spirals, and checks on animal coats, plants, fabric, and architecture.

Patterns and Sequences - Early & First Level Mathematics and Numeracy

Pattern Making and Investigating Patterns in the Environment

Cool Patterns in Nature: Stripes, Spirals, and Symmetry

Pedagogical strategy for P1 (Early Level CfE): Utilize a Concrete-Pictorial-Abstract (CPA) approach coupled with outdoor learning and expressive arts. Begin with an outdoor 'pattern scavenger hunt' in the school grounds or local park to find natural spirals (pinecones, shells, snails) and stripes/checks (bark textures, brick paths, tartan clothing). Encourage tactile engagement (finger tracing, clay coil spirals, and weaving paper ribbons) and vocal rhythmic chanting of repeating units (e.g., 'stripe, stripe, check!') to develop foundational algebraic and spatial thinking before progressing to First Level abstract extensions.

Spotting Patterns in Nature and Art

Repeating Stripes

Repeating Spirals