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

Imagine spinning a pinwheel or a toy spinner. If you close your eyes and open them midway, can you tell it moved?

When you turn a shape around its center point, it might fit into its starting outline before completing a whole spin. The number of times it matches in one full 360-degree turn is its **order of rotational 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="4:3">
  <title>Rotational Symmetry</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    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;
    }

    .app {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Shape selector tabs */
    .tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }
    .tab-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #3b82f6;
      box-shadow: 0 2px 4px rgba(59,130,246,0.25);
    }

    /* Canvas stage */
    .stage {
      position: relative;
      width: 240px;
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dial-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Info summary badge */
    .info-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .info-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .info-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .info-value {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
    }
    .match-highlight {
      color: #10b981;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }
    .slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    .slider {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      outline: none;
      -webkit-appearance: none;
      cursor: pointer;
    }
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #3b82f6;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      cursor: pointer;
    }
    .slider::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #3b82f6;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      cursor: pointer;
    }

    .btn-row {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .action-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .action-btn:hover {
      background: #f1f5f9;
    }
    .action-btn.primary {
      background: #3b82f6;
      color: #ffffff;
      border-color: #3b82f6;
    }
    .action-btn.primary:hover {
      background: #2563eb;
    }

    /* Match chips */
    .match-dots {
      display: flex;
      gap: 6px;
      justify-content: center;
      align-items: center;
    }
    .chip {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #94a3b8;
      border: 1px solid #e2e8f0;
      transition: all 0.2s ease;
    }
    .chip.active {
      background: #d1fae5;
      color: #065f46;
      border-color: #10b981;
    }
  </style>
</head>
<body>
  <div class="app">
    
    <div class="tabs">
      <button class="tab-btn active" data-shape="triangle">Equilateral △</button>
      <button class="tab-btn" data-shape="square">Square ▢</button>
      <button class="tab-btn" data-shape="rectangle">Rectangle ▭</button>
      <button class="tab-btn" data-shape="hexagon">Hexagon ⬡</button>
    </div>

    
    <div class="stage">
      <svg class="dial-svg" viewBox="-120 -120 240 240">
        
        <circle cx="0" cy="0" r="105" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="3,3" />
        
        
        <g id="dialTicks"></g>

        
        <polygon id="ghostShape" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-dasharray="5,4" />

        
        <g id="rotatingGroup">
          <polygon id="solidShape" fill="rgba(59, 130, 246, 0.25)" stroke="#3b82f6" stroke-width="2.5" />
          
          <circle id="vertexDot" cx="0" cy="0" r="5.5" fill="#f59e0b" stroke="#ffffff" stroke-width="1.5" />
        </g>

        
        <circle cx="0" cy="0" r="3.5" fill="#1e2945" />
      </svg>
    </div>

    
    <div class="info-bar">
      <div class="info-item">
        <span class="info-label">Angle</span>
        <span class="info-value" id="angleVal">0°</span>
      </div>
      <div class="info-item">
        <span class="info-label">Matches</span>
        <div class="match-dots" id="matchDots"></div>
      </div>
      <div class="info-item">
        <span class="info-label">Order</span>
        <span class="info-value" id="orderVal">3</span>
      </div>
    </div>

    
    <div class="controls">
      <div class="slider-row">
        <input type="range" class="slider" id="angleSlider" min="0" max="360" value="0" step="1">
      </div>
      <div class="btn-row">
        <button class="action-btn primary" id="spinBtn">▶ Spin 360°</button>
        <button class="action-btn" id="nextMatchBtn">Next Match →</button>
        <button class="action-btn" id="resetBtn">↺ Reset</button>
      </div>
    </div>
  </div>

  <script>
    const shapes = {
      triangle: {
        name: 'Triangle',
        order: 3,
        stepAngle: 120,
        // Equilateral triangle centered at (0,0)
        points: (function() {
          const r = 75;
          const pts = [];
          for (let i = 0; i < 3; i++) {
            const a = -Math.PI / 2 + (i * 2 * Math.PI / 3);
            pts.push([Math.round(r * Math.cos(a)), Math.round(r * Math.sin(a))]);
          }
          return pts;
        })()
      },
      square: {
        name: 'Square',
        order: 4,
        stepAngle: 90,
        points: [[-60, -60], [60, -60], [60, 60], [-60, 60]]
      },
      rectangle: {
        name: 'Rectangle',
        order: 2,
        stepAngle: 180,
        points: [[-80, -45], [80, -45], [80, 45], [-80, 45]]
      },
      hexagon: {
        name: 'Hexagon',
        order: 6,
        stepAngle: 60,
        points: (function() {
          const r = 70;
          const pts = [];
          for (let i = 0; i < 6; i++) {
            const a = -Math.PI / 2 + (i * 2 * Math.PI / 6);
            pts.push([Math.round(r * Math.cos(a)), Math.round(r * Math.sin(a))]);
          }
          return pts;
        })()
      }
    };

    let currentShapeKey = 'triangle';
    let currentAngle = 0;
    let animId = null;

    const ghostShape = document.getElementById('ghostShape');
    const solidShape = document.getElementById('solidShape');
    const rotatingGroup = document.getElementById('rotatingGroup');
    const vertexDot = document.getElementById('vertexDot');
    const angleSlider = document.getElementById('angleSlider');
    const angleVal = document.getElementById('angleVal');
    const orderVal = document.getElementById('orderVal');
    const matchDots = document.getElementById('matchDots');
    const dialTicks = document.getElementById('dialTicks');
    const spinBtn = document.getElementById('spinBtn');
    const nextMatchBtn = document.getElementById('nextMatchBtn');
    const resetBtn = document.getElementById('resetBtn');
    const tabBtns = document.querySelectorAll('.tab-btn');

    function ptsToString(pts) {
      return pts.map(p => p.join(',')).join(' ');
    }

    function initShape(key) {
      currentShapeKey = key;
      const shp = shapes[key];
      const ptsStr = ptsToString(shp.points);
      ghostShape.setAttribute('points', ptsStr);
      solidShape.setAttribute('points', ptsStr);

      // Place the vertex dot at point 0
      vertexDot.setAttribute('cx', shp.points[0][0]);
      vertexDot.setAttribute('cy', shp.points[0][1]);

      orderVal.textContent = shp.order;

      // Render dial tick marks
      dialTicks.innerHTML = '';
      for (let m = 1; m <= shp.order; m++) {
        const deg = (shp.stepAngle * m) % 360;
        const rad = (deg - 90) * Math.PI / 180;
        const x1 = Math.cos(rad) * 100;
        const y1 = Math.sin(rad) * 100;
        const x2 = Math.cos(rad) * 110;
        const y2 = Math.sin(rad) * 110;

        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', x1);
        line.setAttribute('y1', y1);
        line.setAttribute('x2', x2);
        line.setAttribute('y2', y2);
        line.setAttribute('stroke', '#cbd5e1');
        line.setAttribute('stroke-width', '2');
        dialTicks.appendChild(line);
      }

      // Render match chips
      matchDots.innerHTML = '';
      for (let i = 1; i <= shp.order; i++) {
        const chip = document.createElement('span');
        chip.className = 'chip';
        chip.id = `chip-${i}`;
        chip.textContent = `${i * shp.stepAngle}°`;
        matchDots.appendChild(chip);
      }

      setAngle(0);
    }

    function setAngle(deg) {
      currentAngle = deg;
      angleSlider.value = deg;
      angleVal.textContent = `${Math.round(deg)}°`;
      rotatingGroup.setAttribute('transform', `rotate(${deg})`);

      const shp = shapes[currentShapeKey];
      let matchesHit = 0;

      for (let i = 1; i <= shp.order; i++) {
        const targetDeg = i * shp.stepAngle;
        const chip = document.getElementById(`chip-${i}`);
        if (chip) {
          if (deg >= targetDeg - 1.5) {
            chip.classList.add('active');
            matchesHit++;
          } else {
            chip.classList.remove('active');
          }
        }
      }

      // Visual feedback when shape is currently matching
      const isExactMatch = (deg > 0 && Math.abs(deg % shp.stepAngle) < 1.5) || deg === 0;
      if (isExactMatch && deg > 0) {
        solidShape.setAttribute('fill', 'rgba(16, 185, 129, 0.35)');
        solidShape.setAttribute('stroke', '#10b981');
      } else {
        solidShape.setAttribute('fill', 'rgba(59, 130, 246, 0.25)');
        solidShape.setAttribute('stroke', '#3b82f6');
      }
    }

    // Tab switcher
    tabBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        stopSpin();
        tabBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        initShape(btn.dataset.shape);
      });
    });

    // Slider interaction
    angleSlider.addEventListener('input', (e) => {
      stopSpin();
      setAngle(parseFloat(e.target.value));
    });

    // Spin animation (full 360 degree smooth rotation)
    function stopSpin() {
      if (animId) {
        cancelAnimationFrame(animId);
        animId = null;
        spinBtn.textContent = '▶ Spin 360°';
      }
    }

    function startSpin() {
      if (animId) {
        stopSpin();
        return;
      }
      setAngle(0);
      spinBtn.textContent = '⏸ Pause';

      let start = null;
      const duration = 3600; // 3.6s for 360 deg

      function step(timestamp) {
        if (!start) start = timestamp;
        const elapsed = timestamp - start;
        const progress = Math.min(elapsed / duration, 1);
        setAngle(progress * 360);

        if (progress < 1) {
          animId = requestAnimationFrame(step);
        } else {
          stopSpin();
        }
      }

      animId = requestAnimationFrame(step);
    }

    spinBtn.addEventListener('click', startSpin);

    // Next match step button
    nextMatchBtn.addEventListener('click', () => {
      stopSpin();
      const shp = shapes[currentShapeKey];
      const step = shp.stepAngle;
      let next = Math.floor((currentAngle + 1) / step) * step + step;
      if (next > 360) next = step;
      animateTo(next);
    });

    // Smooth single step transition
    function animateTo(targetAngle) {
      const fromAngle = currentAngle;
      let start = null;
      const duration = 500;

      function step(timestamp) {
        if (!start) start = timestamp;
        const elapsed = timestamp - start;
        const progress = Math.min(elapsed / duration, 1);
        // ease out cubic
        const ease = 1 - Math.pow(1 - progress, 3);
        setAngle(fromAngle + (targetAngle - fromAngle) * ease);

        if (progress < 1) {
          requestAnimationFrame(step);
        }
      }
      requestAnimationFrame(step);
    }

    // Reset button
    resetBtn.addEventListener('click', () => {
      stopSpin();
      setAngle(0);
    });

    // Initialize
    initShape('triangle');
  </script>
</body>
</html>

What happens if every side and corner of a shape is identical?

A **regular polygon** is a flat shape where every side is the exact same length and all corner angles are equal. Because all sides are identical, a regular polygon has an order of rotational symmetry equal to its number of 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="4:3">
<title>Order of Rotational Symmetry</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    color: #1e2945;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Shape selection tabs */
  .tabs {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 420px;
    justify-content: center;
  }
  .tab-btn {
    flex: 1;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
  }
  .tab-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 2px 4px rgba(37,99,235,0.2);
  }

  /* Visual Stage */
  .stage-wrap {
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    margin: 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Stats / Badges */
  .info-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }
  .pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .pill .val {
    color: #2563eb;
    font-size: 15px;
  }

  /* Action Buttons */
  .controls {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
  .btn {
    flex: 1;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease, opacity 0.15s ease;
  }
  .btn-rotate {
    background: #2563eb;
    color: #ffffff;
  }
  .btn-rotate:active {
    background: #1d4ed8;
  }
  .btn-reset {
    background: #e2e8f0;
    color: #475569;
    flex: 0 0 auto;
  }
  .btn-reset:active {
    background: #cbd5e1;
  }

  /* Match indicator pulse */
  .match-banner {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #22c55e;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }
  .match-banner.show {
    opacity: 1;
    transform: scale(1);
  }
</style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" onclick="selectShape(3)">3 Sides</button>
    <button class="tab-btn" onclick="selectShape(4)">4 Sides</button>
    <button class="tab-btn" onclick="selectShape(5)">5 Sides</button>
    <button class="tab-btn" onclick="selectShape(6)">6 Sides</button>
  </div>

  
  <div class="stage-wrap">
    <div id="matchTag" class="match-banner">✓ Match!</div>
    <svg viewBox="0 0 240 240">
      
      <polygon id="ghostShape" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-dasharray="5 4" opacity="0.65" />
      
      
      <g id="rotGroup" style="transform-origin: 120px 120px; transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);">
        <polygon id="polyShape" fill="#dbeafe" stroke="#2563eb" stroke-width="2.5" stroke-linejoin="round" />
        
        <circle id="trackDot" r="6" fill="#f59e0b" stroke="#ffffff" stroke-width="2" />
      </g>

      
      <circle cx="120" cy="120" r="3" fill="#1e2945" />
    </svg>
  </div>

  
  <div class="info-row">
    <div class="pill">Rotation: <span id="degVal" class="val">0°</span></div>
    <div class="pill">Matches: <span id="matchVal" class="val">1 / 3</span></div>
    <div class="pill">Order: <span id="orderVal" class="val">3</span></div>
  </div>

  
  <div class="controls">
    <button class="btn btn-rotate" onclick="stepRotate()">↻ Rotate Step</button>
    <button class="btn btn-reset" onclick="resetRotation()" title="Reset">↺</button>
  </div>

<script>
  let sides = 3;
  let stepIndex = 0;
  const cx = 120, cy = 120, r = 78;

  function getPolygonPoints(n) {
    const pts = [];
    for (let i = 0; i < n; i++) {
      const angle = (-90 + (i * 360) / n) * (Math.PI / 180);
      const x = cx + r * Math.cos(angle);
      const y = cy + r * Math.sin(angle);
      pts.push(`${x.toFixed(1)},${y.toFixed(1)}`);
    }
    return pts.join(' ');
  }

  function updateShape() {
    const pts = getPolygonPoints(sides);
    document.getElementById('polyShape').setAttribute('points', pts);
    document.getElementById('ghostShape').setAttribute('points', pts);
    
    // Position tracking dot on the first vertex
    const firstAngle = -90 * (Math.PI / 180);
    const dotX = cx + r * Math.cos(firstAngle);
    const dotY = cy + r * Math.sin(firstAngle);
    const dot = document.getElementById('trackDot');
    dot.setAttribute('cx', dotX.toFixed(1));
    dot.setAttribute('cy', dotY.toFixed(1));

    document.getElementById('orderVal').textContent = sides;
    resetRotation();
  }

  function selectShape(n) {
    sides = n;
    const btns = document.querySelectorAll('.tab-btn');
    btns.forEach((btn, idx) => {
      btn.classList.toggle('active', idx === (n - 3));
    });
    updateShape();
  }

  function stepRotate() {
    stepIndex = (stepIndex + 1) % (sides + 1);
    if (stepIndex === 0) stepIndex = 1;

    const stepAngle = 360 / sides;
    const currentAngle = (stepIndex - 1) * stepAngle;
    const targetAngle = stepIndex * stepAngle;

    const group = document.getElementById('rotGroup');
    group.style.transform = `rotate(${targetAngle}deg)`;

    document.getElementById('degVal').textContent = `${Math.round(targetAngle)}°`;
    document.getElementById('matchVal').textContent = `${stepIndex} / ${sides}`;

    // Flash match badge
    const tag = document.getElementById('matchTag');
    tag.classList.add('show');
    setTimeout(() => tag.classList.remove('show'), 650);

    // If completed a full 360° turn, reset rotation seamlessly
    if (stepIndex === sides) {
      setTimeout(() => {
        group.style.transition = 'none';
        group.style.transform = 'rotate(0deg)';
        group.offsetHeight; // force reflow
        group.style.transition = 'transform 0.45s cubic-bezier(0.25, 1, 0.5, 1)';
      }, 480);
    }
  }

  function resetRotation() {
    stepIndex = 0;
    const group = document.getElementById('rotGroup');
    group.style.transition = 'none';
    group.style.transform = 'rotate(0deg)';
    group.offsetHeight;
    group.style.transition = 'transform 0.45s cubic-bezier(0.25, 1, 0.5, 1)';
    
    document.getElementById('degVal').textContent = '0°';
    document.getElementById('matchVal').textContent = `0 / ${sides}`;
  }

  // Initial setup
  updateShape();
</script>
</body>
</html>

Does this rule work if the sides are not all the same length?

An **irregular polygon** has sides or angles that are not all equal. A rectangle has 4 sides, but it only matches its outline 2 times during a full spin.

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

    .selector-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 480px;
    }

    .shape-btn {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .shape-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 0 0 1px #3b82f6;
    }

    .stage {
      position: relative;
      width: 240px;
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 0;
    }

    .svg-stage {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 380px;
    }

    .btn-action {
      background: #3b82f6;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn-action:active {
      background: #2563eb;
    }

    .slider-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .angle-slider {
      width: 100%;
      height: 6px;
      accent-color: #3b82f6;
      cursor: pointer;
    }

    .angle-val {
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      text-align: center;
    }

    .results-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 380px;
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      border: 1px solid #e5e7eb;
    }

    .matches-list {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .match-pill {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      border: 1.5px solid #d1d5db;
      color: #9ca3af;
      background: #f9fafb;
      transition: all 0.2s ease;
    }

    .match-pill.hit {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
    }

    .order-badge {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    .order-badge span {
      color: #3b82f6;
      font-size: 18px;
    }

    .outline-ghost {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      stroke-dasharray: 6 5;
      fill: #f1f5f9;
    }

    .rotating-shape {
      fill: rgba(59, 130, 246, 0.25);
      stroke: #2563eb;
      stroke-width: 3;
      transition: fill 0.2s ease;
    }

    .rotating-shape.matched {
      fill: rgba(16, 185, 129, 0.35);
      stroke: #059669;
    }

    .marker-dot {
      fill: #ef4444;
      stroke: #ffffff;
      stroke-width: 2;
    }
  </style>
</head>
<body>

  <div class="selector-bar">
    <button class="shape-btn active" onclick="setShape('rect')">Rectangle</button>
    <button class="shape-btn" onclick="setShape('square')">Square</button>
    <button class="shape-btn" onclick="setShape('tri')">Equilateral △</button>
    <button class="shape-btn" onclick="setShape('irreg')">Irregular</button>
  </div>

  <div class="stage">
    <svg class="svg-stage" viewBox="-120 -120 240 240">
      
      <polygon id="ghostShape" class="outline-ghost" points="" />

      
      <circle cx="0" cy="0" r="3" fill="#94a3b8" />

      
      <g id="rotGroup" transform="rotate(0)">
        <polygon id="activeShape" class="rotating-shape" points="" />
        
        <circle id="trackDot" class="marker-dot" cx="0" cy="0" r="6" />
      </g>
    </svg>
  </div>

  <div class="controls-row">
    <button class="btn-action" id="spinBtn" onclick="toggleSpin()">
      <span id="spinIcon">▶</span> 360°
    </button>
    <div class="slider-wrap">
      <input type="range" id="angleSlider" class="angle-slider" min="0" max="360" value="0" oninput="onSlider(this.value)">
      <div class="angle-val" id="angleLabel">0°</div>
    </div>
  </div>

  <div class="results-panel">
    <div class="matches-list" id="matchesContainer"></div>
    <div class="order-badge">Order: <span id="orderNum">2</span></div>
  </div>

  <script>
    const SHAPES = {
      rect: {
        points: "-85,-50 85,-50 85,50 -85,50",
        pin: [-85, -50],
        matchAngles: [0, 180, 360],
        order: 2
      },
      square: {
        points: "-65,-65 65,-65 65,65 -65,65",
        pin: [-65, -65],
        matchAngles: [0, 90, 180, 270, 360],
        order: 4
      },
      tri: {
        points: "0,-85 74,43 -74,43",
        pin: [0, -85],
        matchAngles: [0, 120, 240, 360],
        order: 3
      },
      irreg: {
        points: "-75,-35 45,-60 85,50 -60,65",
        pin: [-75, -35],
        matchAngles: [0, 360],
        order: 1
      }
    };

    let currentShapeKey = 'rect';
    let currentAngle = 0;
    let animId = null;
    let isSpinning = false;

    function setShape(key) {
      if (isSpinning) toggleSpin();
      currentShapeKey = key;

      document.querySelectorAll('.shape-btn').forEach(btn => {
        btn.classList.toggle('active', btn.getAttribute('onclick').includes(`'${key}'`));
      });

      const def = SHAPES[key];
      const ghost = document.getElementById('ghostShape');
      const active = document.getElementById('activeShape');
      const dot = document.getElementById('trackDot');

      ghost.setAttribute('points', def.points);
      active.setAttribute('points', def.points);
      dot.setAttribute('cx', def.pin[0]);
      dot.setAttribute('cy', def.pin[1]);

      document.getElementById('orderNum').textContent = def.order;
      buildMatchPills();
      updateRotation(0);
    }

    function buildMatchPills() {
      const def = SHAPES[currentShapeKey];
      const container = document.getElementById('matchesContainer');
      container.innerHTML = '';
      for (let i = 1; i <= def.order; i++) {
        const pill = document.createElement('div');
        pill.className = 'match-pill';
        pill.id = `pill-${i}`;
        pill.textContent = '✓';
        container.appendChild(pill);
      }
    }

    function updateRotation(deg) {
      currentAngle = deg;
      document.getElementById('rotGroup').setAttribute('transform', `rotate(${deg})`);
      document.getElementById('angleSlider').value = deg;
      document.getElementById('angleLabel').textContent = `${Math.round(deg)}°`;

      const def = SHAPES[currentShapeKey];
      const norm = (Math.round(deg) % 360 + 360) % 360;
      
      const isMatch = def.matchAngles.some(a => Math.abs((a % 360) - norm) < 2);
      document.getElementById('activeShape').classList.toggle('matched', isMatch);

      let hits = 0;
      const sortedAngles = [...new Set(def.matchAngles.map(a => a === 0 ? 360 : a))].sort((a,b) => a - b);
      sortedAngles.forEach((a, idx) => {
        const pill = document.getElementById(`pill-${idx + 1}`);
        if (pill) {
          const hit = (deg >= a - 2) || (deg === 0 && idx === 0 && def.matchAngles.includes(0));
          pill.classList.toggle('hit', hit);
        }
      });
    }

    function onSlider(val) {
      if (isSpinning) toggleSpin();
      updateRotation(parseFloat(val));
    }

    function toggleSpin() {
      if (isSpinning) {
        cancelAnimationFrame(animId);
        isSpinning = false;
        document.getElementById('spinIcon').textContent = '▶';
      } else {
        if (currentAngle >= 360) currentAngle = 0;
        isSpinning = true;
        document.getElementById('spinIcon').textContent = '⏸';
        let lastTime = performance.now();

        function step(now) {
          const dt = (now - lastTime) / 1000;
          lastTime = now;
          let nextAngle = currentAngle + dt * 90;
          if (nextAngle >= 360) {
            updateRotation(360);
            toggleSpin();
            return;
          }
          updateRotation(nextAngle);
          animId = requestAnimationFrame(step);
        }
        animId = requestAnimationFrame(step);
      }
    }

    setShape('rect');
  </script>
</body>
</html>

What if a shape does not look like itself until it makes the entire full turn?

## Order 1: No Special Rotational Symmetry

A scalene triangle has three sides of completely different lengths. It only matches its outline when it completes a full 360-degree spin, so it has an **order of 1**.

<!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>Order of Rotational Symmetry</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      min-height: 100%;
    }
    .shape-nav {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 440px;
    }
    .tab-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #3b82f6;
      border-color: #3b82f6;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
    }
    .stage {
      position: relative;
      width: 220px;
      height: 220px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 320px;
    }
    .slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    input[type=range] {
      flex: 1;
      accent-color: #3b82f6;
      cursor: pointer;
    }
    .angle-val {
      font-variant-numeric: tabular-nums;
      font-size: 14px;
      font-weight: 600;
      width: 42px;
      text-align: right;
      color: #4b5563;
    }
    .btn-row {
      display: flex;
      gap: 8px;
      width: 100%;
    }
    .action-btn {
      flex: 1;
      padding: 8px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .action-btn:hover {
      background: #f3f4f6;
    }
    .status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 320px;
      margin-top: 10px;
      background: #ffffff;
      border-radius: 8px;
      padding: 8px 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .match-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      background: #e5e7eb;
      color: #6b7280;
      transition: all 0.2s ease;
    }
    .match-badge.matched {
      background: #dcfce7;
      color: #15803d;
    }
    .order-label {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }
    .order-num {
      color: #3b82f6;
      font-size: 15px;
    }
  </style>
</head>
<body>

  <div class="shape-nav" id="shapeNav">
    <button class="tab-btn active" data-shape="equilateral">△ Equilateral</button>
    <button class="tab-btn" data-shape="square">□ Square</button>
    <button class="tab-btn" data-shape="rectangle">▭ Rectangle</button>
    <button class="tab-btn" data-shape="scalene">▲ Scalene</button>
  </div>

  <div class="stage">
    <svg viewBox="-100 -100 200 200">
      
      <polygon id="frameOutline" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4,4" />
      
      
      <g id="rotGroup" transform="rotate(0)">
        <polygon id="activeShape" fill="#eff6ff" stroke="#3b82f6" stroke-width="2.5" />
        
        <circle id="markerDot" r="5" fill="#f43f5e" />
      </g>

      
      <circle cx="0" cy="0" r="3.5" fill="#94a3b8" />
    </svg>
  </div>

  <div class="controls">
    <div class="slider-row">
      <input type="range" id="angleSlider" min="0" max="360" value="0" step="1">
      <span class="angle-val" id="angleText">0°</span>
    </div>
    <div class="btn-row">
      <button class="action-btn" id="nextMatchBtn">Next Fit →</button>
      <button class="action-btn" id="spinBtn">▶ Spin 360°</button>
    </div>
  </div>

  <div class="status-row">
    <span class="match-badge" id="matchBadge">Not aligned</span>
    <span class="order-label">Order: <span class="order-num" id="orderVal">3</span></span>
  </div>

  <script>
    const shapes = {
      equilateral: {
        points: "0,-70 60.62,35 -60.62,35",
        marker: [0, -70],
        order: 3,
        matches: [0, 120, 240, 360]
      },
      square: {
        points: "-50,-50 50,-50 50,50 -50,50",
        marker: [-50, -50],
        order: 4,
        matches: [0, 90, 180, 270, 360]
      },
      rectangle: {
        points: "-70,-40 70,-40 70,40 -70,40",
        marker: [-70, -40],
        order: 2,
        matches: [0, 180, 360]
      },
      scalene: {
        points: "-30,-65 65,30 -50,55",
        marker: [-30, -65],
        order: 1,
        matches: [0, 360]
      }
    };

    let currentShapeKey = 'equilateral';
    let currentAngle = 0;
    let animInterval = null;

    const frameOutline = document.getElementById('frameOutline');
    const activeShape = document.getElementById('activeShape');
    const markerDot = document.getElementById('markerDot');
    const rotGroup = document.getElementById('rotGroup');
    const angleSlider = document.getElementById('angleSlider');
    const angleText = document.getElementById('angleText');
    const matchBadge = document.getElementById('matchBadge');
    const orderVal = document.getElementById('orderVal');
    const spinBtn = document.getElementById('spinBtn');
    const nextMatchBtn = document.getElementById('nextMatchBtn');
    const tabBtns = document.querySelectorAll('.tab-btn');

    function loadShape(key) {
      currentShapeKey = key;
      const s = shapes[key];
      frameOutline.setAttribute('points', s.points);
      activeShape.setAttribute('points', s.points);
      markerDot.setAttribute('cx', s.marker[0]);
      markerDot.setAttribute('cy', s.marker[1]);
      orderVal.textContent = s.order;
      setAngle(0);
    }

    function isMatched(deg) {
      const norm = ((deg % 360) + 360) % 360;
      const s = shapes[currentShapeKey];
      return s.matches.some(m => Math.abs((m % 360) - norm) < 2);
    }

    function setAngle(deg) {
      currentAngle = deg;
      angleSlider.value = deg;
      angleText.textContent = deg + '°';
      rotGroup.setAttribute('transform', `rotate(${deg})`);

      if (isMatched(deg)) {
        matchBadge.textContent = '✓ Fits Outline';
        matchBadge.className = 'match-badge matched';
        activeShape.setAttribute('fill', '#dbeafe');
        activeShape.setAttribute('stroke', '#2563eb');
      } else {
        matchBadge.textContent = 'Tracing...';
        matchBadge.className = 'match-badge';
        activeShape.setAttribute('fill', '#f1f5f9');
        activeShape.setAttribute('stroke', '#64748b');
      }
    }

    tabBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        clearInterval(animInterval);
        tabBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        loadShape(btn.dataset.shape);
      });
    });

    angleSlider.addEventListener('input', (e) => {
      clearInterval(animInterval);
      setAngle(parseInt(e.target.value, 10));
    });

    nextMatchBtn.addEventListener('click', () => {
      clearInterval(animInterval);
      const matches = shapes[currentShapeKey].matches;
      let next = matches.find(m => m > currentAngle);
      if (next === undefined) next = 0;
      setAngle(next);
    });

    spinBtn.addEventListener('click', () => {
      clearInterval(animInterval);
      let target = (currentAngle >= 360) ? 0 : currentAngle;
      setAngle(target);
      
      animInterval = setInterval(() => {
        target += 2;
        if (target > 360) {
          setAngle(360);
          clearInterval(animInterval);
        } else {
          setAngle(target);
        }
      }, 16);
    });

    // Initialize
    loadShape('equilateral');
  </script>
</body>
</html>

Next time you look at a road sign, a star, or a tile, try tracing its outline in your mind and counting how many turns fit the frame!

math

Identifying Order of Rotational Symmetry in 2D Polygons. Determine the order of rotational symmetry for regular and irregular polygons.

Rotational Symmetry - CfE Fourth Level / KS3 Maths Revision

Rotational Symmetry Interactive Polygon Investigation

Attractive Rotations and Symmetric Patterns

To achieve deep conceptual understanding aligned with Curriculum for Excellence Benchmark MTH 4-19a, instruction should bridge concrete manipulative exploration (using physical tracing paper, split pins, and cut-out polygons) to dynamic digital geometry tools (such as GeoGebra rotate sliders). Teachers should emphasize the distinction between reflectional symmetry (mirror lines) and rotational symmetry (turns about a point), ensuring students explicitly justify the rotational orders of both regular ($n$-gons) and irregular shapes by tracking angle increments.

Identifying Order of Rotational Symmetry in 2D Polygons

The Spinning Match

Regular Polygons

Irregular Polygons