<!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, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      user-select: none;
      padding: 8px 12px;
    }

    /* Top Step Bar */
    .timeline {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
      margin-bottom: 4px;
    }
    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      background: #2563eb;
      color: #fff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37,99,235,0.3);
    }

    /* Diagram Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      flex: 1;
      min-height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Triangle & Helper Transitions */
    #triABC {
      transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: 0px 0px;
    }
    .helper {
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    .helper.show {
      opacity: 1;
    }

    /* Match Badge */
    #matchBadge {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      pointer-events: none;
    }
    #matchBadge.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }
    .ctrl-btn {
      padding: 5px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #fff;
      color: #1e2945;
      cursor: pointer;
    }
    .ctrl-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  
  <div class="timeline">
    <button class="step-btn active" onclick="setStep(0)">Start</button>
    <button class="step-btn" onclick="setStep(1)">1. Slide</button>
    <button class="step-btn" onclick="setStep(2)">2. Turn</button>
    <button class="step-btn" onclick="setStep(3)">3. Flip</button>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 460 300">
      <defs>
        
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e2e8f0" stroke-width="1"/>
        </pattern>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#2563eb"/>
        </marker>
        <marker id="arrow-rot" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#8b5cf6"/>
        </marker>
        <marker id="arrow-refl" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#ea580c"/>
        </marker>
        
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="3" result="blur"/>
          <feComposite in="SourceGraphic" in2="blur" operator="over"/>
        </filter>
      </defs>

      
      <rect width="100%" height="100%" fill="url(#grid)" rx="8"/>

      
      <g id="h-trans" class="helper">
        <line x1="80" y1="110" x2="270" y2="200" stroke="#2563eb" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arrow)"/>
      </g>

      
      <g id="h-rot" class="helper">
        <circle cx="270" cy="200" r="4" fill="#8b5cf6"/>
        <path d="M 355 115 A 120 120 0 0 1 390 200" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="3,3" marker-end="url(#arrow-rot)"/>
      </g>

      
      <g id="h-refl" class="helper">
        <line x1="230" y1="200" x2="430" y2="200" stroke="#ea580c" stroke-width="2" stroke-dasharray="5,4"/>
        <path d="M 270 270 Q 255 240 270 135" fill="none" stroke="#ea580c" stroke-width="1.8" stroke-dasharray="3,3" marker-end="url(#arrow-refl)"/>
      </g>

      
      <g id="triDEF">
        <polygon points="270,200 390,200 270,110" fill="rgba(22, 163, 74, 0.12)" stroke="#16a34a" stroke-width="2.5" stroke-linejoin="round"/>
        
        <circle cx="270" cy="200" r="3.5" fill="#16a34a"/>
        <circle cx="390" cy="200" r="3.5" fill="#16a34a"/>
        <circle cx="270" cy="110" r="3.5" fill="#16a34a"/>
        
        <text x="256" y="214" font-size="14" font-weight="700" fill="#16a34a">D</text>
        <text x="396" y="214" font-size="14" font-weight="700" fill="#16a34a">E</text>
        <text x="256" y="105" font-size="14" font-weight="700" fill="#16a34a">F</text>
        
        <text x="330" y="216" font-size="12" font-weight="600" fill="#16a34a" text-anchor="middle">4</text>
        <text x="260" y="158" font-size="12" font-weight="600" fill="#16a34a" text-anchor="end">3</text>
        <text x="338" y="150" font-size="12" font-weight="600" fill="#16a34a" text-anchor="middle">5</text>
      </g>

      
      <g id="triABC">
        <polygon points="0,0 120,0 0,90" fill="rgba(37, 99, 235, 0.28)" stroke="#2563eb" stroke-width="2.5" stroke-linejoin="round"/>
        
        <circle cx="0" cy="0" r="3.5" fill="#2563eb"/>
        <circle cx="120" cy="0" r="3.5" fill="#2563eb"/>
        <circle cx="0" cy="90" r="3.5" fill="#2563eb"/>
        
        <text x="-12" y="-6" font-size="14" font-weight="700" fill="#2563eb">A</text>
        <text x="126" y="-6" font-size="14" font-weight="700" fill="#2563eb">B</text>
        <text x="-12" y="104" font-size="14" font-weight="700" fill="#2563eb">C</text>
        
        <text x="60" y="-8" font-size="12" font-weight="600" fill="#2563eb" text-anchor="middle">4</text>
        <text x="-8" y="48" font-size="12" font-weight="600" fill="#2563eb" text-anchor="end">3</text>
        <text x="66" y="52" font-size="12" font-weight="600" fill="#2563eb" text-anchor="middle">5</text>
      </g>

      
      <g id="matchBadge">
        <rect x="150" y="22" width="160" height="30" rx="15" fill="#16a34a" filter="url(#glow)"/>
        <text x="230" y="42" font-size="13" font-weight="700" fill="#fff" text-anchor="middle">✓ Congruent Match!</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()">◀</button>
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸</button>
    <button class="ctrl-btn" onclick="nextStep()">▶</button>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    // Rigid motion transformation states for Triangle ABC
    const transforms = [
      "translate(80px, 110px) rotate(-45deg)", // Step 0: Initial
      "translate(270px, 200px) rotate(-45deg)", // Step 1: Slide (Translate A -> D)
      "translate(270px, 200px) rotate(0deg)",   // Step 2: Turn (Rotate AB -> DE)
      "translate(270px, 200px) scale(1, -1)"    // Step 3: Flip (Reflect C -> F)
    ];

    function setStep(idx) {
      currentStep = idx;

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

      // Apply rigid transform to Triangle ABC
      document.getElementById('triABC').style.transform = transforms[idx];

      // Toggle visual motion aids
      document.getElementById('h-trans').classList.toggle('show', idx === 1);
      document.getElementById('h-rot').classList.toggle('show', idx === 2);
      document.getElementById('h-refl').classList.toggle('show', idx === 3);

      // Congruence badge
      document.getElementById('matchBadge').classList.toggle('show', idx === 3);
    }

    function nextStep() {
      setStep((currentStep + 1) % 4);
    }

    function prevStep() {
      setStep((currentStep + 3) % 4);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      document.getElementById('playBtn').textContent = '⏸';
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      document.getElementById('playBtn').textContent = '▶';
    }

    function togglePlay() {
      if (isPlaying) pauseAutoPlay();
      else { nextStep(); startAutoPlay(); }
    }

    // Initialize initial state and calm auto-advance
    setStep(0);
    startAutoPlay();
  </script>
</body>
</html>

Defining Congruence in Terms of Rigid Motions

<!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 {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      user-select: none;
    }

    .controls-top {
      width: 100%;
      max-width: 460px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
    }

    .step-pills {
      display: flex;
      gap: 4px;
      flex-wrap: nowrap;
      flex: 1;
    }

    .pill {
      flex: 1;
      padding: 6px 4px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      border-radius: 6px;
      background: #f1f5f9;
      color: #64748b;
      cursor: pointer;
      border: 1px solid #e2e8f0;
      transition: all 0.25s ease;
      white-space: nowrap;
    }

    .pill.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37,99,235,0.25);
    }

    .btn-play {
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 6px;
      background: #f8fafc;
      color: #1e2945;
      border: 1px solid #cbd5e1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
    }
    .btn-play:active { background: #e2e8f0; }

    .graph-container {
      width: 100%;
      max-width: 440px;
      position: relative;
      display: flex;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .status-card {
      width: 100%;
      max-width: 460px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      text-align: center;
      margin-top: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .status-badge {
      font-size: 11px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
    }

    .badge-0 { background: #dbeafe; color: #1d4ed8; }
    .badge-1 { background: #ffedd5; color: #c2410c; }
    .badge-2 { background: #f3e8ff; color: #7e22ce; }
    .badge-3 { background: #d1fae5; color: #047857; }

    /* SVG Transitions */
    .step-elem {
      transition: opacity 0.35s ease;
      opacity: 0;
      pointer-events: none;
    }
    .step-elem.visible {
      opacity: 1;
      pointer-events: auto;
    }
    .step-elem.ghost {
      opacity: 0.35;
    }
  </style>
</head>
<body>

  <div class="controls-top">
    <div class="step-pills">
      <div class="pill active" onclick="setStep(0)">1. Start</div>
      <div class="pill" onclick="setStep(1)">2. Slide</div>
      <div class="pill" onclick="setStep(2)">3. Turn</div>
      <div class="pill" onclick="setStep(3)">4. Flip</div>
    </div>
    <button class="btn-play" id="playBtn" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
  </div>

  <div class="graph-container">
    <svg viewBox="0 0 460 460" xmlns="http://www.w3.org/2000/svg">
      <defs>
        
        <marker id="arr-axis" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#94a3b8" />
        </marker>
        <marker id="arr-trans" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#f97316" />
        </marker>
        <marker id="arr-rot" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#a855f7" />
        </marker>
        <marker id="arr-ref" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0d9488" />
        </marker>
      </defs>

      
      <g stroke="#f1f5f9" stroke-width="1.5">
        
        <line x1="38" y1="38" x2="38" y2="422" />
        <line x1="70" y1="38" x2="70" y2="422" />
        <line x1="102" y1="38" x2="102" y2="422" />
        <line x1="134" y1="38" x2="134" y2="422" />
        <line x1="166" y1="38" x2="166" y2="422" />
        <line x1="198" y1="38" x2="198" y2="422" />
        <line x1="262" y1="38" x2="262" y2="422" />
        <line x1="294" y1="38" x2="294" y2="422" />
        <line x1="326" y1="38" x2="326" y2="422" />
        <line x1="358" y1="38" x2="358" y2="422" />
        <line x1="390" y1="38" x2="390" y2="422" />
        <line x1="422" y1="38" x2="422" y2="422" />
        
        <line x1="38" y1="38" x2="422" y2="38" />
        <line x1="38" y1="70" x2="422" y2="70" />
        <line x1="38" y1="102" x2="422" y2="102" />
        <line x1="38" y1="134" x2="422" y2="134" />
        <line x1="38" y1="166" x2="422" y2="166" />
        <line x1="38" y1="198" x2="422" y2="198" />
        <line x1="38" y1="262" x2="422" y2="262" />
        <line x1="38" y1="294" x2="422" y2="294" />
        <line x1="38" y1="326" x2="422" y2="326" />
        <line x1="38" y1="358" x2="422" y2="358" />
        <line x1="38" y1="390" x2="422" y2="390" />
        <line x1="38" y1="422" x2="422" y2="422" />
      </g>

      
      <g stroke="#94a3b8" stroke-width="1.8">
        
        <line x1="22" y1="230" x2="438" y2="230" marker-end="url(#arr-axis)" />
        
        <line x1="230" y1="438" x2="230" y2="22" marker-end="url(#arr-axis)" />
      </g>

      
      <g font-size="11" fill="#94a3b8" text-anchor="middle" font-weight="600">
        
        <text x="102" y="244">-4</text>
        <text x="166" y="244">-2</text>
        <text x="294" y="244">2</text>
        <text x="358" y="244">4</text>
        <text x="445" y="244" font-weight="700" fill="#64748b">x</text>
        
        <text x="220" y="362" text-anchor="end">-4</text>
        <text x="220" y="298" text-anchor="end">-2</text>
        <text x="220" y="170" text-anchor="end">2</text>
        <text x="220" y="106" text-anchor="end">4</text>
        <text x="220" y="20" text-anchor="end" font-weight="700" fill="#64748b">y</text>
      </g>

      
      <g font-size="12" fill="#cbd5e1" font-weight="700">
        <text x="400" y="56" text-anchor="end">Q I</text>
        <text x="56" y="400">Q III</text>
      </g>

      
      <g id="elem-refl-line" class="step-elem">
        <line x1="198" y1="30" x2="198" y2="430" stroke="#0d9488" stroke-width="1.8" stroke-dasharray="5,4" />
        <rect x="156" y="40" width="40" height="18" rx="4" fill="#ccfbf1" stroke="#0d9488" stroke-width="1"/>
        <text x="176" y="53" fill="#0f766e" font-size="11" font-weight="700" text-anchor="middle">x = -1</text>
      </g>

      
      <g id="elem-trans-paths" class="step-elem">
        
        <line x1="262" y1="198" x2="201" y2="290" stroke="#f97316" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arr-trans)" />
        
        <line x1="358" y1="198" x2="297" y2="290" stroke="#f97316" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arr-trans)" />
        
        <line x1="262" y1="134" x2="201" y2="226" stroke="#f97316" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arr-trans)" />
        <text x="248" y="260" fill="#ea580c" font-size="12" font-weight="800">⟨-2, -3⟩</text>
      </g>

      
      <g id="elem-rot-paths" class="step-elem">
        
        <path d="M 198 230 A 64 64 0 0 1 260 292" fill="none" stroke="#a855f7" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arr-rot)" />
        
        <path d="M 294 294 A 96 96 0 0 1 200 388" fill="none" stroke="#a855f7" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arr-rot)" />
        
        <circle cx="198" cy="294" r="7" fill="none" stroke="#7e22ce" stroke-width="2.5" />
        <text x="278" y="340" fill="#7e22ce" font-size="12" font-weight="800">90° CW</text>
      </g>

      
      <g id="elem-ref-paths" class="step-elem">
        
        <line x1="262" y1="294" x2="138" y2="294" stroke="#0d9488" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arr-ref)" />
      </g>

      
      
      <g id="tri-inter1" class="step-elem">
        <polygon points="198,294 294,294 198,230" fill="#ffedd5" fill-opacity="0.5" stroke="#f97316" stroke-width="2" stroke-dasharray="5,4" />
      </g>

      
      <g id="tri-inter2" class="step-elem">
        <polygon points="198,294 198,390 262,294" fill="#f3e8ff" fill-opacity="0.5" stroke="#a855f7" stroke-width="2" stroke-dasharray="5,4" />
      </g>

      
      <g id="tri-final" class="step-elem">
        <polygon points="198,294 198,390 134,294" fill="#ccfbf1" fill-opacity="0.75" stroke="#0d9488" stroke-width="2.5" />
        
        <circle cx="198" cy="294" r="4.5" fill="#0d9488" />
        <circle cx="198" cy="390" r="4.5" fill="#0d9488" />
        <circle cx="134" cy="294" r="4.5" fill="#0d9488" />
        <text x="206" y="288" fill="#0f766e" font-size="12" font-weight="800">D(-1,-2)</text>
        <text x="206" y="405" fill="#0f766e" font-size="12" font-weight="800">E(-1,-5)</text>
        <text x="126" y="286" fill="#0f766e" font-size="12" font-weight="800" text-anchor="end">F(-3,-2)</text>
      </g>

      
      <g id="tri-start" class="step-elem visible">
        <polygon points="262,198 358,198 262,134" fill="#dbeafe" fill-opacity="0.8" stroke="#2563eb" stroke-width="2.5" />
        
        <circle cx="262" cy="198" r="4.5" fill="#2563eb" />
        <circle cx="358" cy="198" r="4.5" fill="#2563eb" />
        <circle cx="262" cy="134" r="4.5" fill="#2563eb" />
        <text x="254" y="214" fill="#1d4ed8" font-size="12" font-weight="800" text-anchor="end">A(1,1)</text>
        <text x="366" y="214" fill="#1d4ed8" font-size="12" font-weight="800">B(4,1)</text>
        <text x="254" y="130" fill="#1d4ed8" font-size="12" font-weight="800" text-anchor="end">C(1,3)</text>
      </g>
    </svg>
  </div>

  <div class="status-card">
    <span id="badge" class="status-badge badge-0">Step 1</span>
    <span id="description">Start: Triangle ABC in Quadrant I</span>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    const steps = [
      {
        badge: 'badge-0',
        badgeText: 'Step 1',
        desc: 'Start: △ABC in Quadrant I',
        show: ['tri-start'],
        ghosts: []
      },
      {
        badge: 'badge-1',
        badgeText: 'Step 2',
        desc: 'Slide: Translate by ⟨-2, -3⟩',
        show: ['tri-start', 'elem-trans-paths', 'tri-inter1'],
        ghosts: ['tri-start']
      },
      {
        badge: 'badge-2',
        badgeText: 'Step 3',
        desc: 'Turn: Rotate 90° CW around D(-1,-2)',
        show: ['tri-start', 'tri-inter1', 'elem-rot-paths', 'tri-inter2'],
        ghosts: ['tri-start', 'tri-inter1']
      },
      {
        badge: 'badge-3',
        badgeText: 'Step 4',
        desc: 'Flip: Reflect over x = -1 → △DEF',
        show: ['tri-start', 'tri-inter1', 'tri-inter2', 'elem-refl-line', 'elem-ref-paths', 'tri-final'],
        ghosts: ['tri-start', 'tri-inter1', 'tri-inter2']
      }
    ];

    const allIds = [
      'tri-start', 'tri-inter1', 'tri-inter2', 'tri-final',
      'elem-trans-paths', 'elem-rot-paths', 'elem-refl-line', 'elem-ref-paths'
    ];

    function renderStep() {
      const cfg = steps[currentStep];

      // Update pills
      document.querySelectorAll('.pill').forEach((pill, idx) => {
        pill.classList.toggle('active', idx === currentStep);
      });

      // Update Status Text
      const badgeEl = document.getElementById('badge');
      badgeEl.className = 'status-badge ' + cfg.badge;
      badgeEl.textContent = cfg.badgeText;
      document.getElementById('description').textContent = cfg.desc;

      // Update SVG Visibility & Ghosting
      allIds.forEach(id => {
        const el = document.getElementById(id);
        if (!el) return;
        const isShown = cfg.show.includes(id);
        const isGhost = cfg.ghosts.includes(id);

        el.classList.toggle('visible', isShown);
        el.classList.toggle('ghost', isGhost);
      });
    }

    function setStep(idx) {
      currentStep = idx;
      renderStep();
      if (isPlaying) restartTimer();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % steps.length;
      renderStep();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        nextStep();
        restartTimer();
      } else {
        clearInterval(timer);
      }
    }

    function restartTimer() {
      clearInterval(timer);
      timer = setInterval(nextStep, 3200);
    }

    // Init
    renderStep();
    restartTimer();
  </script>
</body>
</html>

<!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, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 100%;
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }

    .title {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .btn-toggle {
      background: #2563eb;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }
    .btn-toggle:hover { background: #1d4ed8; }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      flex: 1;
    }

    .tile {
      border-radius: 8px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      cursor: pointer;
      user-select: none;
    }

    .tile.rigid {
      background: #f0f9ff;
      border: 1.5px solid #bae6fd;
    }

    .tile.non-rigid {
      background: #fef2f2;
      border: 1.5px solid #fecaca;
    }

    .tile-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
    }

    .badge {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 999px;
      text-transform: uppercase;
    }

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

    .badge.non-rigid {
      background: #fee2e2;
      color: #b91c1c;
    }

    .svg-container {
      width: 100%;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* Motion Transitions */
    .animated-shape {
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
    }

    .tile.active .trans-target {
      transform: translate(46px, -18px);
    }

    .tile.active .rot-target {
      transform: rotate(60deg);
    }

    .tile.active .ref-target {
      transform: scaleX(-1);
    }

    .tile.active .dil-target {
      transform: scale(1.6);
    }

    .label-text {
      font-size: 11px;
      font-weight: 600;
      fill: #1e293b;
    }

    .label-metric {
      font-size: 10px;
      font-weight: 700;
      fill: #2563eb;
    }
    
    .label-metric-alt {
      font-size: 10px;
      font-weight: 700;
      fill: #059669;
    }

    .label-red {
      font-size: 10px;
      font-weight: 700;
      fill: #dc2626;
    }

    @media (max-width: 400px) {
      .grid {
        grid-template-columns: 1fr;
      }
      .svg-container {
        height: 90px;
      }
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <span class="title">Rigid vs. Non-Rigid Motions</span>
    <button class="btn-toggle" id="playBtn" onclick="togglePlay()">
      <span id="btnIcon">▶</span> <span id="btnText">Animate</span>
    </button>
  </div>

  <div class="grid">
    
    <div class="tile rigid active" onclick="toggleCard(this)">
      <div class="tile-header">
        <span>1. Translation</span>
        <span class="badge rigid">Rigid ✓</span>
      </div>
      <div class="svg-container">
        <svg viewBox="0 0 160 90">
          <defs>
            <marker id="arrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto">
              <path d="M0,0 L6,3 L0,6 Z" fill="#94a3b8"/>
            </marker>
          </defs>
          
          
          <line x1="42" y1="58" x2="84" y2="40" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3" marker-end="url(#arrow)"/>
          
          
          <polygon points="20,68 62,68 32,32" fill="#2563eb" fill-opacity="0.12" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="2,2"/>
          <text x="38" y="79" text-anchor="middle" class="label-metric">5</text>

          
          <g class="animated-shape trans-target">
            <polygon points="20,68 62,68 32,32" fill="#10b981" fill-opacity="0.25" stroke="#059669" stroke-width="2"/>
            <text x="38" y="79" text-anchor="middle" class="label-metric-alt">5</text>
          </g>
        </svg>
      </div>
    </div>

    
    <div class="tile rigid active" onclick="toggleCard(this)">
      <div class="tile-header">
        <span>2. Rotation</span>
        <span class="badge rigid">Rigid ✓</span>
      </div>
      <div class="svg-container">
        <svg viewBox="0 0 160 90">
          
          <circle cx="80" cy="55" r="3" fill="#1e293b"/>
          <text x="80" y="68" text-anchor="middle" class="label-text" font-size="9">Center</text>

          
          <path d="M 68,28 A 30 30 0 0 1 96,30" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2,2" marker-end="url(#arrow)"/>
          <text x="82" y="22" text-anchor="middle" class="label-metric" font-size="9">60°</text>

          
          <g transform="translate(80,55)">
            <polygon points="-45,-25 -15,-25 -38,-4" fill="#2563eb" fill-opacity="0.12" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="2,2"/>
            <text x="-30" y="-28" text-anchor="middle" class="label-metric">40°</text>
          </g>

          
          <g transform="translate(80,55)">
            <g class="animated-shape rot-target">
              <polygon points="-45,-25 -15,-25 -38,-4" fill="#10b981" fill-opacity="0.25" stroke="#059669" stroke-width="2"/>
              <text x="-30" y="-28" text-anchor="middle" class="label-metric-alt">40°</text>
            </g>
          </g>
        </svg>
      </div>
    </div>

    
    <div class="tile rigid active" onclick="toggleCard(this)">
      <div class="tile-header">
        <span>3. Reflection</span>
        <span class="badge rigid">Rigid ✓</span>
      </div>
      <div class="svg-container">
        <svg viewBox="0 0 160 90">
          
          <line x1="80" y1="10" x2="80" y2="80" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3"/>
          <text x="80" y="88" text-anchor="middle" class="label-text" font-size="8">Mirror</text>

          
          <polygon points="32,68 68,68 68,26" fill="#2563eb" fill-opacity="0.15" stroke="#2563eb" stroke-width="1.5"/>
          <text x="50" y="78" text-anchor="middle" class="label-metric">d</text>

          
          <g transform="translate(80,0)">
            <g class="animated-shape ref-target" style="transform-origin: 0px 50px;">
              <polygon points="-48,68 -12,68 -12,26" fill="#10b981" fill-opacity="0.25" stroke="#059669" stroke-width="2"/>
              <text x="-30" y="78" text-anchor="middle" class="label-metric-alt">d</text>
            </g>
          </g>
        </svg>
      </div>
    </div>

    
    <div class="tile non-rigid active" onclick="toggleCard(this)">
      <div class="tile-header">
        <span>4. Dilation</span>
        <span class="badge non-rigid">Not Rigid ✕</span>
      </div>
      <div class="svg-container">
        <svg viewBox="0 0 160 90">
          
          <g transform="translate(75, 48)">
            <polygon points="-16,16 16,16 0,-14" fill="#2563eb" fill-opacity="0.15" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="2,2"/>
            <text x="0" y="26" text-anchor="middle" class="label-metric">5</text>
          </g>

          
          <g transform="translate(75, 48)">
            <g class="animated-shape dil-target" style="transform-origin: 0px 0px;">
              <polygon points="-16,16 16,16 0,-14" fill="#ef4444" fill-opacity="0.2" stroke="#dc2626" stroke-width="1.5"/>
              <text x="0" y="25" text-anchor="middle" class="label-red" font-size="7">8</text>
            </g>
          </g>
          
          
          <text x="80" y="12" text-anchor="middle" class="label-red">Size changes</text>
        </svg>
      </div>
    </div>
  </div>

  <script>
    let isAnimated = true;

    function togglePlay() {
      isAnimated = !isAnimated;
      const tiles = document.querySelectorAll('.tile');
      tiles.forEach(tile => {
        if (isAnimated) {
          tile.classList.add('active');
        } else {
          tile.classList.remove('active');
        }
      });
      document.getElementById('btnIcon').textContent = isAnimated ? '↺' : '▶';
      document.getElementById('btnText').textContent = isAnimated ? 'Reset' : 'Animate';
    }

    function toggleCard(card) {
      card.classList.toggle('active');
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rigid Plane Motions</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

    body {
      padding: 10px;
      background: #f8fafc;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 900px;
      margin: 0 auto;
    }

    .controls-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: #ffffff;
      padding: 7px 12px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .btn-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 11px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 150px;
      max-width: 280px;
    }

    .slider-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
    }

    .slider-wrap input {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
      height: 5px;
    }

    .panels {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }

    @media (max-width: 600px) {
      .panels {
        grid-template-columns: 1fr;
      }
    }

    .panel-card {
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    .panel-header {
      padding: 6px 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f1f5f9;
      background: #fafafa;
    }

    .panel-title {
      font-size: 12px;
      font-weight: 700;
    }

    .panel-rule {
      font-size: 11px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-weight: 700;
      padding: 2px 5px;
      border-radius: 4px;
      letter-spacing: -0.2px;
    }

    .p-trans { border-top: 3px solid #0284c7; }
    .p-trans .panel-title { color: #0284c7; }
    .p-trans .panel-rule { background: #e0f2fe; color: #0369a1; }

    .p-refl { border-top: 3px solid #7c3aed; }
    .p-refl .panel-title { color: #7c3aed; }
    .p-refl .panel-rule { background: #ede9fe; color: #6d28d9; }

    .p-rot { border-top: 3px solid #059669; }
    .p-rot .panel-title { color: #059669; }
    .p-rot .panel-rule { background: #d1fae5; color: #047857; }

    .svg-container {
      width: 100%;
      position: relative;
      background: #ffffff;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }

    .axis-line {
      stroke: #94a3b8;
      stroke-width: 1.25;
    }

    .axis-label {
      font-size: 8px;
      fill: #94a3b8;
      font-weight: 600;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    .shape-ghost {
      fill: #cbd5e1;
      fill-opacity: 0.25;
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 3 2.5;
    }

    .shape-active {
      stroke-width: 1.75;
      stroke-linejoin: round;
    }

    .guide-line {
      stroke-dasharray: 3 2.5;
      stroke-width: 1.25;
      fill: none;
    }

    .mirror-axis {
      stroke: #7c3aed;
      stroke-width: 1.75;
      stroke-dasharray: 4 2;
    }

    .v-label {
      font-size: 8.5px;
      font-weight: 700;
      dominant-baseline: central;
      text-anchor: middle;
    }

    .sub-legend {
      padding: 4px 8px;
      background: #f8fafc;
      border-top: 1px solid #f1f5f9;
      font-size: 10px;
      color: #64748b;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .legend-tag {
      font-weight: 600;
    }
  </style>
</head>
<body>

  <div class="controls-bar">
    <div class="btn-group">
      <button class="btn" id="playBtn">▶ Play</button>
      <button class="btn" id="resetBtn">↺ Reset</button>
    </div>
    <div class="slider-wrap">
      <span class="slider-label">Progress:</span>
      <input type="range" id="progress" min="0" max="1" step="0.005" value="0">
    </div>
  </div>

  <div class="panels">
    
    <div class="panel-card p-trans">
      <div class="panel-header">
        <span class="panel-title">1. Translation</span>
        <span class="panel-rule">(x, y) → (x+3, y+2)</span>
      </div>
      <div class="svg-container">
        <svg id="svg1" viewBox="0 0 220 180"></svg>
      </div>
      <div class="sub-legend">
        <span class="legend-tag" style="color: #0284c7;">Vector: ⟨+3, +2⟩</span>
        <span>Parallel Shift</span>
      </div>
    </div>

    
    <div class="panel-card p-refl">
      <div class="panel-header">
        <span class="panel-title">2. Reflection</span>
        <span class="panel-rule">(x, y) → (x, -y)</span>
      </div>
      <div class="svg-container">
        <svg id="svg2" viewBox="0 0 220 180"></svg>
      </div>
      <div class="sub-legend">
        <span class="legend-tag" style="color: #7c3aed;">Line: x-axis (y=0)</span>
        <span>Perpendicular Flip</span>
      </div>
    </div>

    
    <div class="panel-card p-rot">
      <div class="panel-header">
        <span class="panel-title">3. Rotation</span>
        <span class="panel-rule">(x, y) → (-y, x)</span>
      </div>
      <div class="svg-container">
        <svg id="svg3" viewBox="0 0 220 180"></svg>
      </div>
      <div class="sub-legend">
        <span class="legend-tag" style="color: #059669;">Angle: 90° CCW</span>
        <span>Center (0,0)</span>
      </div>
    </div>
  </div>

  <script>
    // Initial Triangle Vertices
    const P1_INIT = [[1, 1], [4, 1], [2, 3.5]];
    const P2_INIT = [[1, 1], [4, 1], [2, 3.5]];
    const P3_INIT = [[1, 1], [3.5, 1], [2, 3]];
    const V_NAMES = ['A', 'B', 'C'];

    // Math coordinate converters
    // Panel 1: X in [0, 8], Y in [0, 6]
    function toSvg1(x, y) {
      return [22 + x * 23.5, 158 - y * 23.5];
    }

    // Panel 2: X in [0, 5], Y in [-4, 4]
    function toSvg2(x, y) {
      return [24 + x * 34, 90 - y * 18];
    }

    // Panel 3: X in [-4, 4.5], Y in [-0.5, 4.5]
    function toSvg3(x, y) {
      return [110 + x * 21.5, 142 - y * 21.5];
    }

    function createAxes1() {
      let g = '';
      for (let x = 0; x <= 8; x++) {
        const [sx] = toSvg1(x, 0);
        g += `<line class="grid-line" x1="${sx}" y1="18" x2="${sx}" y2="162"/>`;
        if (x > 0 && x % 2 === 0) {
          g += `<text class="axis-label" x="${sx}" y="171">${x}</text>`;
        }
      }
      for (let y = 0; y <= 6; y++) {
        const [, sy] = toSvg1(0, y);
        g += `<line class="grid-line" x1="18" y1="${sy}" x2="212" y2="${sy}"/>`;
        if (y > 0 && y % 2 === 0) {
          g += `<text class="axis-label" x="12" y="${sy}">${y}</text>`;
        }
      }
      const [ox, oy] = toSvg1(0, 0);
      g += `<line class="axis-line" x1="18" y1="${oy}" x2="214" y2="${oy}"/>`;
      g += `<line class="axis-line" x1="${ox}" y1="162" x2="${ox}" y2="14"/>`;
      g += `<text class="axis-label" x="214" y="${oy + 9}">x</text>`;
      g += `<text class="axis-label" x="${ox - 8}" y="14">y</text>`;
      return g;
    }

    function createAxes2() {
      let g = '';
      for (let x = 0; x <= 5; x++) {
        const [sx] = toSvg2(x, 0);
        g += `<line class="grid-line" x1="${sx}" y1="12" x2="${sx}" y2="168"/>`;
        if (x > 0) {
          g += `<text class="axis-label" x="${sx}" y="174">${x}</text>`;
        }
      }
      for (let y = -4; y <= 4; y++) {
        const [, sy] = toSvg2(0, y);
        g += `<line class="grid-line" x1="20" y1="${sy}" x2="204" y2="${sy}"/>`;
        if (y !== 0 && y % 2 === 0) {
          g += `<text class="axis-label" x="13" y="${sy}">${y}</text>`;
        }
      }
      const [ox, oy] = toSvg2(0, 0);
      g += `<line class="axis-line" x1="${ox}" y1="168" x2="${ox}" y2="10"/>`;
      g += `<line class="mirror-axis" x1="18" y1="${oy}" x2="208" y2="${oy}"/>`;
      g += `<text class="axis-label" x="208" y="${oy - 7}" style="fill:#7c3aed;font-weight:700;">x</text>`;
      g += `<text class="axis-label" x="${ox - 8}" y="10">y</text>`;
      return g;
    }

    function createAxes3() {
      let g = '';
      for (let x = -4; x <= 4; x++) {
        const [sx] = toSvg3(x, 0);
        g += `<line class="grid-line" x1="${sx}" y1="14" x2="${sx}" y2="160"/>`;
        if (x !== 0 && x % 2 === 0) {
          g += `<text class="axis-label" x="${sx}" y="152">${x}</text>`;
        }
      }
      for (let y = 0; y <= 4; y++) {
        const [, sy] = toSvg3(0, y);
        g += `<line class="grid-line" x1="20" y1="${sy}" x2="204" y2="${sy}"/>`;
        if (y > 0 && y % 2 === 0) {
          g += `<text class="axis-label" x="102" y="${sy}">${y}</text>`;
        }
      }
      const [ox, oy] = toSvg3(0, 0);
      g += `<line class="axis-line" x1="18" y1="${oy}" x2="206" y2="${oy}"/>`;
      g += `<line class="axis-line" x1="${ox}" y1="160" x2="${ox}" y2="10"/>`;
      g += `<text class="axis-label" x="208" y="${oy + 8}">x</text>`;
      g += `<text class="axis-label" x="${ox + 8}" y="10">y</text>`;
      return g;
    }

    const svg1 = document.getElementById('svg1');
    const svg2 = document.getElementById('svg2');
    const svg3 = document.getElementById('svg3');

    const baseGrid1 = createAxes1();
    const baseGrid2 = createAxes2();
    const baseGrid3 = createAxes3();

    function polyStr(pts, mapper) {
      return pts.map(([x, y]) => {
        const [sx, sy] = mapper(x, y);
        return `${sx},${sy}`;
      }).join(' ');
    }

    const slider = document.getElementById('progress');
    const playBtn = document.getElementById('playBtn');
    const resetBtn = document.getElementById('resetBtn');

    let animReq = null;
    let isPlaying = false;

    function render(t) {
      // 1. TRANSLATION (x+3t, y+2t)
      const p1_cur = P1_INIT.map(([x, y]) => [x + 3 * t, y + 2 * t]);
      let p1_elements = '';
      P1_INIT.forEach(([x, y], i) => {
        const [sx1, sy1] = toSvg1(x, y);
        const [sx2, sy2] = toSvg1(x + 3 * t, y + 2 * t);
        const [sxEnd, syEnd] = toSvg1(x + 3, y + 2);
        
        // Full vector guide
        p1_elements += `<line class="guide-line" stroke="#93c5fd" x1="${sx1}" y1="${sy1}" x2="${sxEnd}" y2="${syEnd}"/>`;
        // Active shift line
        if (t > 0.01) {
          p1_elements += `<line stroke="#0284c7" stroke-width="1.8" marker-end="url(#arr1)" x1="${sx1}" y1="${sy1}" x2="${sx2}" y2="${sy2}"/>`;
        }
        p1_elements += `<circle cx="${sx2}" cy="${sy2}" r="3" fill="#0284c7"/>`;
        p1_elements += `<text class="v-label" fill="#0369a1" x="${sx2 + (i===1?7:-7)}" y="${sy2 + (i===2?-7:7)}">${V_NAMES[i]}${t > 0.8 ? "'" : ""}</text>`;
      });

      svg1.innerHTML = `
        <defs>
          <marker id="arr1" markerWidth="6" markerHeight="6" refX="4.5" refY="3" orient="auto">
            <path d="M0,0.5 L6,3 L0,5.5 z" fill="#0284c7" />
          </marker>
        </defs>
        ${baseGrid1}
        <polygon class="shape-ghost" points="${polyStr(P1_INIT, toSvg1)}"/>
        ${p1_elements}
        <polygon class="shape-active" fill="#38bdf8" fill-opacity="0.35" stroke="#0284c7" points="${polyStr(p1_cur, toSvg1)}"/>
      `;

      // 2. REFLECTION across y=0: (x, y*(1 - 2t))
      const p2_cur = P2_INIT.map(([x, y]) => [x, y * (1 - 2 * t)]);
      let p2_elements = '';
      P2_INIT.forEach(([x, y], i) => {
        const [sx1, sy1] = toSvg2(x, y);
        const [sx2, sy2] = toSvg2(x, y * (1 - 2 * t));
        const [sxEnd, syEnd] = toSvg2(x, -y);

        // Perpendicular dashed connection
        p2_elements += `<line class="guide-line" stroke="#c4b5fd" x1="${sx1}" y1="${sy1}" x2="${sxEnd}" y2="${syEnd}"/>`;
        if (t > 0.01) {
          p2_elements += `<line stroke="#7c3aed" stroke-width="1.8" stroke-dasharray="3 2" x1="${sx1}" y1="${sy1}" x2="${sx2}" y2="${sy2}"/>`;
        }
        // Right angle marker on x-axis
        const [rx, ry] = toSvg2(x, 0);
        p2_elements += `<path d="M${rx-3},${ry} L${rx-3},${ry-3} L${rx},${ry-3}" fill="none" stroke="#a78bfa" stroke-width="1"/>`;
        p2_elements += `<circle cx="${sx2}" cy="${sy2}" r="3" fill="#7c3aed"/>`;
        p2_elements += `<text class="v-label" fill="#6d28d9" x="${sx2 + (i===1?8:-8)}" y="${sy2 + (sy2 >= 90 ? 7 : -7)}">${V_NAMES[i]}${t > 0.8 ? "'" : ""}</text>`;
      });

      svg2.innerHTML = `
        ${baseGrid2}
        <polygon class="shape-ghost" points="${polyStr(P2_INIT, toSvg2)}"/>
        ${p2_elements}
        <polygon class="shape-active" fill="#a78bfa" fill-opacity="0.35" stroke="#7c3aed" points="${polyStr(p2_cur, toSvg2)}"/>
      `;

      // 3. ROTATION 90 deg CCW around (0,0)
      const angle = (Math.PI / 2) * t;
      const cosA = Math.cos(angle);
      const sinA = Math.sin(angle);
      const p3_cur = P3_INIT.map(([x, y]) => [x * cosA - y * sinA, x * sinA + y * cosA]);

      let p3_elements = '';
      const [ox3, oy3] = toSvg3(0, 0);

      P3_INIT.forEach(([x, y], i) => {
        const r = Math.hypot(x, y);
        const startA = Math.atan2(y, x);
        const curA = startA + angle;
        const targetA = startA + Math.PI / 2;

        const [curX, curY] = [r * Math.cos(curA), r * Math.sin(curA)];
        const [targetX, targetY] = [r * Math.cos(targetA), r * Math.sin(targetA)];

        const [sx1, sy1] = toSvg3(x, y);
        const [sxCur, syCur] = toSvg3(curX, curY);
        const [sxTgt, syTgt] = toSvg3(targetX, targetY);

        const rPx = r * 21.5;

        // Full 90 arc track
        p3_elements += `<path class="guide-line" stroke="#a7f3d0" d="M ${sx1} ${sy1} A ${rPx} ${rPx} 0 0 0 ${sxTgt} ${syTgt}"/>`;
        // Ray from origin to vertex
        p3_elements += `<line stroke="#6ee7b7" stroke-width="1" stroke-dasharray="2 2" x1="${ox3}" y1="${oy3}" x2="${sxCur}" y2="${syCur}"/>`;

        // Active arc
        if (t > 0.02) {
          p3_elements += `<path fill="none" stroke="#059669" stroke-width="1.8" marker-end="url(#arr3)" d="M ${sx1} ${sy1} A ${rPx} ${rPx} 0 0 0 ${sxCur} ${syCur}"/>`;
        }

        p3_elements += `<circle cx="${sxCur}" cy="${syCur}" r="3" fill="#059669"/>`;
        p3_elements += `<text class="v-label" fill="#047857" x="${sxCur + (i===1?8:(i===0?-7:0))}" y="${syCur + (i===2?-7:7)}">${V_NAMES[i]}${t > 0.8 ? "'" : ""}</text>`;
      });

      // Origin point & symbol
      p3_elements += `
        <circle cx="${ox3}" cy="${oy3}" r="4" fill="#047857"/>
        <circle cx="${ox3}" cy="${oy3}" r="1.5" fill="#ffffff"/>
        <text class="axis-label" x="${ox3 - 10}" y="${oy3 + 10}" style="fill:#047857;font-weight:700;">(0,0)</text>
      `;

      svg3.innerHTML = `
        <defs>
          <marker id="arr3" markerWidth="6" markerHeight="6" refX="4.5" refY="3" orient="auto">
            <path d="M0,0.5 L6,3 L0,5.5 z" fill="#059669" />
          </marker>
        </defs>
        ${baseGrid3}
        <polygon class="shape-ghost" points="${polyStr(P3_INIT, toSvg3)}"/>
        ${p3_elements}
        <polygon class="shape-active" fill="#34d399" fill-opacity="0.35" stroke="#059669" points="${polyStr(p3_cur, toSvg3)}"/>
      `;
    }

    function loop() {
      if (!isPlaying) return;
      let val = parseFloat(slider.value) + 0.007;
      if (val >= 1) {
        val = 1;
        slider.value = val;
        render(val);
        togglePlay(false);
        return;
      }
      slider.value = val;
      render(val);
      animReq = requestAnimationFrame(loop);
    }

    function togglePlay(force) {
      isPlaying = typeof force === 'boolean' ? force : !isPlaying;
      if (isPlaying) {
        if (parseFloat(slider.value) >= 1) {
          slider.value = 0;
        }
        playBtn.innerHTML = '⏸ Pause';
        playBtn.classList.add('active');
        animReq = requestAnimationFrame(loop);
      } else {
        playBtn.innerHTML = '▶ Play';
        playBtn.classList.remove('active');
        if (animReq) cancelAnimationFrame(animReq);
      }
    }

    slider.addEventListener('input', (e) => {
      togglePlay(false);
      render(parseFloat(e.target.value));
    });

    playBtn.addEventListener('click', () => togglePlay());

    resetBtn.addEventListener('click', () => {
      togglePlay(false);
      slider.value = 0;
      render(0);
    });

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

Rigid Plane Motions: Translations, Reflections, and Rotations

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

    .svg-wrap {
      width: 100%;
      max-width: 520px;
      aspect-ratio: 16 / 9;
      position: relative;
    }

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

    /* Geometric Lines & Typography */
    .tri-fill { fill: #f1f5f9; transition: fill 0.3s ease; }
    .tri-fill-2 { fill: #f8fafc; transition: fill 0.3s ease; }
    .tri-stroke { stroke: #64748b; stroke-width: 2; stroke-linejoin: round; }
    
    .side-3 { stroke: #0284c7; stroke-width: 3.5; }
    .side-4 { stroke: #7c3aed; stroke-width: 3.5; }
    .side-5 { stroke: #d97706; stroke-width: 3.5; }

    .label-3 { fill: #0284c7; font-weight: 700; font-size: 15px; }
    .label-4 { fill: #7c3aed; font-weight: 700; font-size: 15px; }
    .label-5 { fill: #d97706; font-weight: 700; font-size: 15px; }
    .label-v { fill: #1e2945; font-weight: 700; font-size: 14px; }
    .label-t { fill: #475569; font-weight: 600; font-size: 13px; }

    .angle-arc {
      fill: none;
      stroke: #059669;
      stroke-width: 2.5;
      transition: all 0.3s ease;
    }
    .angle-label {
      fill: #059669;
      font-weight: 800;
      font-size: 15px;
      transition: all 0.3s ease;
    }

    .iso-arrow {
      stroke: #64748b;
      stroke-dasharray: 4 3;
      stroke-width: 2;
      fill: none;
    }

    /* Highlights per step */
    .hl-glow {
      filter: drop-shadow(0 0 6px rgba(34, 183, 255, 0.6));
    }

    /* Math summary bar */
    .math-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 15px;
      font-weight: 700;
      min-height: 38px;
      margin-top: 4px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 16px;
      width: 100%;
      max-width: 520px;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

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

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #fff;
    }

    .step-dots {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-left: 4px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      border: none;
      padding: 0;
      transition: all 0.2s ease;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="svg-wrap">
    <svg viewBox="0 0 460 220">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#64748b" />
        </marker>
        <marker id="iso-arr" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="7" markerHeight="7" orient="auto">
          <path d="M 0 1 L 9 5 L 0 9 z" fill="#0284c7" />
        </marker>
      </defs>

      
      <path id="isoPath" d="M 160 40 Q 230 10 290 35" class="iso-arrow" marker-end="url(#iso-arr)" />
      <text x="225" y="24" text-anchor="middle" class="label-t">Isometry (Rigid Motion)</text>

      
      <g id="triA">
        <polygon points="40,50 40,170 200,170" class="tri-fill tri-stroke" id="polyA" />
        
        
        <line x1="40" y1="50" x2="40" y2="170" class="side-3" id="sideA3" />
        <line x1="40" y1="170" x2="200" y2="170" class="side-4" id="sideA4" />
        <line x1="40" y1="50" x2="200" y2="170" class="side-5" id="sideA5" />

        
        <path d="M 40,146 A 24 24 0 0 1 64,170" class="angle-arc" id="arcA" />
        <text x="68" y="152" class="angle-label" id="txtThetaA">θ</text>

        
        <text x="32" y="44" class="label-v">A</text>
        <text x="24" y="184" class="label-v">B</text>
        <text x="206" y="184" class="label-v">C</text>

        
        <text x="26" y="112" class="label-3">3</text>
        <text x="116" y="190" class="label-4">4</text>
        <text x="124" y="102" class="label-5">5</text>
      </g>

      
      <g id="triB" transform="translate(245, 20) rotate(15, 100, 100)">
        <polygon points="40,50 40,170 200,170" class="tri-fill-2 tri-stroke" id="polyB" />
        
        
        <line x1="40" y1="50" x2="40" y2="170" class="side-3" id="sideB3" />
        <line x1="40" y1="170" x2="200" y2="170" class="side-4" id="sideB4" />
        <line x1="40" y1="50" x2="200" y2="170" class="side-5" id="sideB5" />

        
        <path d="M 40,146 A 24 24 0 0 1 64,170" class="angle-arc" id="arcB" />
        <text x="68" y="152" class="angle-label" id="txtThetaB">θ'</text>

        
        <text x="30" y="44" class="label-v">A'</text>
        <text x="22" y="184" class="label-v">B'</text>
        <text x="206" y="184" class="label-v">C'</text>

        
        <text x="24" y="112" class="label-3">3</text>
        <text x="116" y="190" class="label-4">4</text>
        <text x="124" y="102" class="label-5">5</text>
      </g>
    </svg>
  </div>

  <div class="math-bar" id="statusText">
    <span>Sides: 3, 4, 5 preserved</span>
  </div>

  <div class="controls">
    <button class="btn active" id="step1Btn" onclick="selectStep(0)">1. Distances</button>
    <button class="btn" id="step2Btn" onclick="selectStep(1)">2. SSS Match</button>
    <button class="btn" id="step3Btn" onclick="selectStep(2)">3. Congruence</button>
    <button class="btn" id="step4Btn" onclick="selectStep(3)">4. θ' = θ</button>
    
    <button class="btn" id="playBtn" onclick="togglePlay()" style="margin-left:6px;">⏸</button>
    
    <div class="step-dots">
      <button class="dot active" title="Step 1" onclick="selectStep(0)"></button>
      <button class="dot" title="Step 2" onclick="selectStep(1)"></button>
      <button class="dot" title="Step 3" onclick="selectStep(2)"></button>
      <button class="dot" title="Step 4" onclick="selectStep(3)"></button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const stepData = [
      {
        html: '<span style="color:#0284c7">Distances preserved</span> → 3, 4, 5',
        setup: () => {
          resetHighlights();
          document.getElementById('txtThetaB').textContent = "θ'";
        }
      },
      {
        html: '<span style="color:#0284c7">3=3</span>, <span style="color:#7c3aed">4=4</span>, <span style="color:#d97706">5=5</span> (SSS)',
        setup: () => {
          resetHighlights();
          document.getElementById('sideA3').classList.add('hl-glow');
          document.getElementById('sideB3').classList.add('hl-glow');
          document.getElementById('sideA4').classList.add('hl-glow');
          document.getElementById('sideB4').classList.add('hl-glow');
          document.getElementById('sideA5').classList.add('hl-glow');
          document.getElementById('sideB5').classList.add('hl-glow');
          document.getElementById('txtThetaB').textContent = "θ'";
        }
      },
      {
        html: 'SSS Congruence: △ABC ≅ △A\'B\'C\'',
        setup: () => {
          resetHighlights();
          document.getElementById('polyA').style.fill = '#e0f2fe';
          document.getElementById('polyB').style.fill = '#e0f2fe';
          document.getElementById('txtThetaB').textContent = "θ'";
        }
      },
      {
        html: '<span style="color:#059669">Angles match: θ\' = θ</span>',
        setup: () => {
          resetHighlights();
          document.getElementById('polyA').style.fill = '#ecfdf5';
          document.getElementById('polyB').style.fill = '#ecfdf5';
          document.getElementById('arcA').style.strokeWidth = "4";
          document.getElementById('arcB').style.strokeWidth = "4";
          document.getElementById('arcA').classList.add('hl-glow');
          document.getElementById('arcB').classList.add('hl-glow');
          document.getElementById('txtThetaB').textContent = "θ";
        }
      }
    ];

    function resetHighlights() {
      ['sideA3','sideB3','sideA4','sideB4','sideA5','sideB5','arcA','arcB'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.classList.remove('hl-glow');
      });
      document.getElementById('polyA').style.fill = '#f1f5f9';
      document.getElementById('polyB').style.fill = '#f8fafc';
      document.getElementById('arcA').style.strokeWidth = "2.5";
      document.getElementById('arcB').style.strokeWidth = "2.5";
    }

    function render() {
      // Update UI classes
      for (let i = 0; i < 4; i++) {
        const btn = document.getElementById(`step${i+1}Btn`);
        const dots = document.querySelectorAll('.dot');
        if (btn) btn.classList.toggle('active', i === currentStep);
        if (dots[i]) dots[i].classList.toggle('active', i === currentStep);
      }

      const info = stepData[currentStep];
      document.getElementById('statusText').innerHTML = info.html;
      info.setup();
    }

    function selectStep(step) {
      currentStep = step;
      render();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      render();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) nextStep();
      }, 3500);
    }

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, sans-serif;
    }
    body {
      background: transparent;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }
    @media (max-width: 480px) {
      .grid-container {
        grid-template-columns: 1fr;
      }
    }
    .motion-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .card-header {
      font-weight: 700;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      letter-spacing: 0.3px;
    }
    .badge-rigid {
      background: #e6f9ed;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }
    .badge-nonrigid {
      background: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }
    .viewport {
      width: 100%;
      height: 180px;
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      border-radius: 6px;
      position: relative;
      overflow: hidden;
    }
    svg {
      width: 100%;
      height: 100%;
    }
    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      flex-wrap: wrap;
    }
    .btn {
      flex: 1;
      min-width: 60px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .triangle-poly {
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: 100px 90px;
    }
    .grid-lines {
      stroke: #e2e8f0;
      stroke-width: 1;
    }
    .edge-label {
      font-size: 11px;
      font-weight: bold;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
      transition: fill 0.3s;
    }
    .edge-label.changed {
      fill: #dc2626;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="motion-card">
      <div class="card-header">
        <span>Rigid Motion</span>
        <span class="badge badge-rigid">Distance Preserved: YES</span>
      </div>
      
      <div class="viewport">
        <svg viewBox="0 0 200 180">
          <defs>
            <pattern id="grid1" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" class="grid-lines" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid1)" />
          
          
          <polygon points="70,120 150,120 70,60" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3" />

          
          <g id="rigidGroup" class="triangle-poly">
            <polygon points="70,120 150,120 70,60" fill="rgba(37, 99, 235, 0.2)" stroke="#2563eb" stroke-width="2" />
            <text x="110" y="132" class="edge-label">4</text>
            <text x="58" y="90" class="edge-label">3</text>
            <text x="118" y="82" class="edge-label">5</text>
          </g>
        </svg>
      </div>

      <div class="controls">
        <button class="btn active" id="btn-slide" onclick="setRigid('slide')">Slide</button>
        <button class="btn" id="btn-spin" onclick="setRigid('spin')">Spin</button>
        <button class="btn" id="btn-flip" onclick="setRigid('flip')">Flip</button>
      </div>
    </div>

    
    <div class="motion-card">
      <div class="card-header">
        <span>Non-Rigid Motion</span>
        <span class="badge badge-nonrigid">Distance Preserved: NO</span>
      </div>

      <div class="viewport">
        <svg viewBox="0 0 200 180">
          <defs>
            <pattern id="grid2" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" class="grid-lines" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid2)" />

          
          <polygon points="70,120 150,120 70,60" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3" />

          
          <g id="nonRigidGroup" class="triangle-poly">
            <polygon id="nrPoly" points="70,120 150,120 70,60" fill="rgba(225, 29, 72, 0.15)" stroke="#e11d48" stroke-width="2" />
            <text id="lbl-b" x="110" y="132" class="edge-label">4</text>
            <text id="lbl-a" x="58" y="90" class="edge-label">3</text>
            <text id="lbl-c" x="118" y="82" class="edge-label">5</text>
          </g>
        </svg>
      </div>

      <div class="controls">
        <button class="btn active" id="btn-stretch" onclick="setNonRigid('stretch')">Stretch</button>
        <button class="btn" id="btn-shear" onclick="setNonRigid('shear')">Shear</button>
      </div>
    </div>
  </div>

  <script>
    function setRigid(type) {
      document.querySelectorAll('#btn-slide, #btn-spin, #btn-flip').forEach(b => b.classList.remove('active'));
      const group = document.getElementById('rigidGroup');

      if (type === 'slide') {
        document.getElementById('btn-slide').classList.add('active');
        group.style.transform = 'translate(25px, -25px)';
      } else if (type === 'spin') {
        document.getElementById('btn-spin').classList.add('active');
        group.style.transform = 'rotate(45deg)';
      } else if (type === 'flip') {
        document.getElementById('btn-flip').classList.add('active');
        group.style.transform = 'scale(-1, 1)';
      }
    }

    function setNonRigid(type) {
      document.querySelectorAll('#btn-stretch, #btn-shear').forEach(b => b.classList.remove('active'));
      const group = document.getElementById('nonRigidGroup');
      const lblA = document.getElementById('lbl-a');
      const lblB = document.getElementById('lbl-b');
      const lblC = document.getElementById('lbl-c');

      if (type === 'stretch') {
        document.getElementById('btn-stretch').classList.add('active');
        group.style.transform = 'scale(1.4, 0.8) translate(-10px, 10px)';
        lblB.textContent = '5.6';
        lblB.classList.add('changed');
        lblA.textContent = '2.4';
        lblA.classList.add('changed');
        lblC.textContent = '6.1';
        lblC.classList.add('changed');
      } else if (type === 'shear') {
        document.getElementById('btn-shear').classList.add('active');
        group.style.transform = 'skewX(30deg) translate(-20px, 0)';
        lblB.textContent = '4';
        lblB.classList.remove('changed');
        lblA.textContent = '3.5';
        lblA.classList.add('changed');
        lblC.textContent = '5.9';
        lblC.classList.add('changed');
      }
    }

    // Initialize initial active states
    setRigid('slide');
    setNonRigid('stretch');
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <title>Rigid Plane Motions</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 8px 12px;
      user-select: none;
      width: 100%;
      min-height: 100%;
    }
    .stepper-nav {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
    }
    .step-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .step-btn:hover {
      background: #f1f5f9;
      color: #334155;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .diagram-frame {
      position: relative;
      width: 100%;
      max-width: 480px;
      aspect-ratio: 1 / 0.82;
      overflow: visible;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }
    .axis-line {
      stroke: #cbd5e1;
      stroke-width: 1.5;
    }
    .axis-label {
      font-size: 11px;
      fill: #94a3b8;
      font-weight: 600;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    /* Figures */
    .f2-target {
      fill: rgba(16, 185, 129, 0.12);
      stroke: #10b981;
      stroke-width: 2;
      stroke-dasharray: 4 3;
    }
    .f-moving {
      transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .transform-guide {
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    .transform-guide.visible {
      opacity: 1;
    }
    .vector-label {
      font-size: 12px;
      font-weight: 700;
      fill: #2563eb;
      letter-spacing: 0.5px;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 4px;
      stroke-linejoin: round;
    }
    .guide-label {
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3.5px;
      stroke-linejoin: round;
    }
    .status-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 480px;
      margin-top: 6px;
      padding: 6px 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
    }
    .badge-f1 { background: #dbeafe; color: #1d4ed8; }
    .badge-f2 { background: #d1fae5; color: #047857; }
    .badge-cong { background: #fef3c7; color: #b45309; }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button class="step-btn active" id="btn0" onclick="setStep(0)">Start</button>
    <button class="step-btn" id="btn1" onclick="setStep(1)">1. Slide</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">2. Turn</button>
    <button class="step-btn" id="btn3" onclick="setStep(3)">3. Flip</button>
  </div>

  
  <div class="diagram-frame">
    <svg viewBox="0 0 460 375">
      <defs>
        
        <marker id="arrow-blue" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#2563eb"/>
        </marker>
        <marker id="arrow-purple" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#8b5cf6"/>
        </marker>
        <marker id="arrow-amber" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#d97706"/>
        </marker>
      </defs>

      
      
      <g stroke="#f1f5f9" stroke-width="1.2">
        <line x1="40" y1="20" x2="40" y2="340" />
        <line x1="82" y1="20" x2="82" y2="340" />
        <line x1="124" y1="20" x2="124" y2="340" />
        <line x1="166" y1="20" x2="166" y2="340" />
        <line x1="208" y1="20" x2="208" y2="340" />
        <line x1="250" y1="20" x2="250" y2="340" />
        <line x1="292" y1="20" x2="292" y2="340" />
        <line x1="334" y1="20" x2="334" y2="340" />
        <line x1="376" y1="20" x2="376" y2="340" />
        <line x1="418" y1="20" x2="418" y2="340" />
      </g>
      
      <g stroke="#f1f5f9" stroke-width="1.2">
        <line x1="40" y1="340" x2="418" y2="340" />
        <line x1="40" y1="298" x2="418" y2="298" />
        <line x1="40" y1="256" x2="418" y2="256" />
        <line x1="40" y1="214" x2="418" y2="214" />
        <line x1="40" y1="172" x2="418" y2="172" />
        <line x1="40" y1="130" x2="418" y2="130" />
        <line x1="40" y1="88" x2="418" y2="88" />
        <line x1="40" y1="46" x2="418" y2="46" />
      </g>

      
      <line x1="40" y1="340" x2="425" y2="340" stroke="#cbd5e1" stroke-width="1.5" />
      <line x1="40" y1="340" x2="40" y2="15" stroke="#cbd5e1" stroke-width="1.5" />

      
      <g class="axis-label">
        <text x="82" y="356">1</text><text x="124" y="356">2</text><text x="166" y="356">3</text>
        <text x="208" y="356">4</text><text x="250" y="356">5</text><text x="292" y="356">6</text>
        <text x="334" y="356">7</text><text x="376" y="356">8</text><text x="418" y="356">9</text>
        <text x="25" y="298">1</text><text x="25" y="256">2</text><text x="25" y="214">3</text>
        <text x="25" y="172">4</text><text x="25" y="130">5</text><text x="25" y="88">6</text>
        <text x="25" y="46">7</text>
        <text x="430" y="356" font-weight="700" fill="#64748b">x</text>
        <text x="25" y="15" font-weight="700" fill="#64748b">y</text>
      </g>

      
      <g id="targetGroup">
        <polygon class="f2-target" points="334,214 334,298 208,214" />
        
        <path d="M 322 214 L 322 226 L 334 226" fill="none" stroke="#10b981" stroke-width="1.5" />
        <text x="310" y="252" font-size="12" font-weight="700" fill="#059669">F₂</text>
      </g>

      
      <g id="guide1" class="transform-guide">
        <line x1="82" y1="298" x2="204" y2="216" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="4 4" marker-end="url(#arrow-blue)" />
        <text x="110" y="240" class="vector-label">v = ⟨3, 2⟩</text>
      </g>

      
      <g id="guide2" class="transform-guide">
        
        <circle cx="208" cy="214" r="4.5" fill="#8b5cf6" />
        
        <path d="M 208 88 A 126 126 0 0 1 330 210" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="4 3" marker-end="url(#arrow-purple)" />
        <text x="278" y="142" font-size="12" font-weight="700" fill="#8b5cf6" class="guide-label">90° ↷</text>
      </g>

      
      <g id="guide3" class="transform-guide">
        <line x1="271" y1="25" x2="271" y2="335" stroke="#d97706" stroke-width="2" stroke-dasharray="6 4" />
        <text x="271" y="18" font-size="11" font-weight="700" fill="#d97706" text-anchor="middle" class="guide-label">Line L (x = 5.5)</text>
        
        <path d="M 208 275 Q 271 270 330 275" fill="none" stroke="#d97706" stroke-width="1.5" stroke-dasharray="3 3" marker-end="url(#arrow-amber)" />
      </g>

      
      <g id="movingGroup">
        <polygon id="polyF1" class="f-moving" points="82,298 166,298 82,172" fill="rgba(37, 99, 235, 0.25)" stroke="#2563eb" stroke-width="2.5" />
        <text id="labelF1" class="f-moving" x="110" y="265" font-size="12" font-weight="800" fill="#1d4ed8">F₁</text>
      </g>
    </svg>
  </div>

  
  <div class="status-bar">
    <span id="motionName">Initial Positions</span>
    <span class="badge badge-f1" id="stateBadge">F₁ and target F₂</span>
  </div>

  <script>
    const stepData = [
      {
        pts: "82,298 166,298 82,172",
        labelPos: { x: 110, y: 265 },
        name: "Initial Positions",
        badge: "F₁ and target F₂",
        badgeClass: "badge-f1"
      },
      {
        pts: "208,214 292,214 208,88",
        labelPos: { x: 236, y: 180 },
        name: "Translation along v",
        badge: "Distance preserved",
        badgeClass: "badge-f1"
      },
      {
        pts: "208,214 208,298 334,214",
        labelPos: { x: 242, y: 250 },
        name: "Rotation 90° CW",
        badge: "Angles preserved",
        badgeClass: "badge-f1"
      },
      {
        pts: "334,214 334,298 208,214",
        labelPos: { x: 295, y: 250 },
        name: "Reflection: Superimposed!",
        badge: "F₁ ≅ F₂ (Congruent)",
        badgeClass: "badge-cong"
      }
    ];

    let currentStep = 0;
    let autoTimer = null;

    function setStep(idx) {
      currentStep = idx;

      // Update button highlights
      for (let i = 0; i <= 3; i++) {
        const btn = document.getElementById('btn' + i);
        if (btn) btn.classList.toggle('active', i === idx);
      }

      // Update Guides
      document.getElementById('guide1').classList.toggle('visible', idx === 1);
      document.getElementById('guide2').classList.toggle('visible', idx === 2);
      document.getElementById('guide3').classList.toggle('visible', idx === 3);

      // Update polygon & label
      const data = stepData[idx];
      const poly = document.getElementById('polyF1');
      const label = document.getElementById('labelF1');

      poly.setAttribute('points', data.pts);
      label.setAttribute('x', data.labelPos.x);
      label.setAttribute('y', data.labelPos.y);

      if (idx === 3) {
        poly.setAttribute('fill', 'rgba(16, 185, 129, 0.4)');
        poly.setAttribute('stroke', '#059669');
        label.setAttribute('fill', '#047857');
      } else {
        poly.setAttribute('fill', 'rgba(37, 99, 235, 0.25)');
        poly.setAttribute('stroke', '#2563eb');
        label.setAttribute('fill', '#1d4ed8');
      }

      // Status info
      document.getElementById('motionName').textContent = data.name;
      const badge = document.getElementById('stateBadge');
      badge.textContent = data.badge;
      badge.className = 'badge ' + data.badgeClass;
    }

    function startCycle() {
      if (autoTimer) clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        setStep((currentStep + 1) % 4);
      }, 3500);
    }

    // Initialize
    setStep(0);
    startCycle();

    // Pause on user interaction, restart cycle after 7s of inactivity
    let resumeTimeout;
    document.querySelectorAll('.step-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        clearInterval(autoTimer);
        clearTimeout(resumeTimeout);
        resumeTimeout = setTimeout(startCycle, 7000);
      });
    });
  </script>
</body>
</html>

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

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 560px;
      margin-bottom: 6px;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 1.5px solid transparent;
      color: #475569;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn:hover {
      background: #e2e8f0;
      color: #1e2945;
    }

    .tab-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
    }

    .svg-container {
      width: 100%;
      max-width: 580px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }

    .axis {
      stroke: #94a3b8;
      stroke-width: 1.5;
    }

    .axis-label {
      font-size: 11px;
      fill: #64748b;
      font-weight: 500;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    .seg-original {
      stroke: #2563eb;
      stroke-width: 3.5;
      stroke-linecap: round;
    }

    .seg-mapped {
      stroke: #7c3aed;
      stroke-width: 3.5;
      stroke-linecap: round;
      transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .trans-arrow {
      stroke: #f59e0b;
      stroke-width: 2;
      stroke-dasharray: 4 3;
      fill: none;
      transition: all 0.45s ease;
    }

    .pt-orig {
      fill: #2563eb;
      stroke: #ffffff;
      stroke-width: 2;
    }

    .pt-map {
      fill: #7c3aed;
      stroke: #ffffff;
      stroke-width: 2;
      transition: cx 0.45s cubic-bezier(0.4, 0, 0.2, 1), cy 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .lbl-text {
      font-size: 12px;
      font-weight: 700;
      fill: #1e2945;
      transition: x 0.45s cubic-bezier(0.4, 0, 0.2, 1), y 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .len-badge-orig, .len-badge-map {
      font-size: 12px;
      font-weight: 700;
      dominant-baseline: middle;
      text-anchor: middle;
    }

    .len-badge-orig { fill: #1d4ed8; }
    .len-badge-map {
      fill: #6d28d9;
      transition: x 0.45s cubic-bezier(0.4, 0, 0.2, 1), y 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .callout-box {
      width: 100%;
      max-width: 560px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 7px 14px;
      text-align: center;
      margin-top: 4px;
    }

    .callout-title {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }

    .callout-sub {
      font-size: 12px;
      font-weight: 600;
      color: #059669;
      margin-top: 1px;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="tab-btn active" id="btn-trans" onclick="setMode('trans')">Slide (Translation)</button>
    <button class="tab-btn" id="btn-rot" onclick="setMode('rot')">Turn (Rotation)</button>
    <button class="tab-btn" id="btn-ref" onclick="setMode('ref')">Flip (Reflection)</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 570 340" id="plane">
      <defs>
        <marker id="arrow-axis" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#94a3b8" />
        </marker>
        <marker id="arrow-iso" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#f59e0b" />
        </marker>
      </defs>

      
      <g id="grid-group"></g>

      
      <g id="axes-group">
        <line x1="45" y1="300" x2="550" y2="300" class="axis" marker-end="url(#arrow-axis)" />
        <line x1="45" y1="300" x2="45" y2="20" class="axis" marker-end="url(#arrow-axis)" />
        <text x="546" y="315" class="axis-label" font-weight="700">x</text>
        <text x="32" y="24" class="axis-label" font-weight="700">y</text>
      </g>

      
      <path id="iso-arrow" class="trans-arrow" marker-end="url(#arrow-iso)" d="M 170,120 Q 275,60 380,120" />
      <rect id="iso-bg" x="240" y="65" width="76" height="20" rx="4" fill="#fef3c7" stroke="#fde68a" />
      <text id="iso-text" x="278" y="79" font-size="11px" font-weight="700" fill="#b45309" text-anchor="middle">Isometry F</text>

      
      
      <line id="seg-pq" x1="90" y1="220" x2="225" y2="60" class="seg-original" />
      
      
      <rect x="135" y="128" width="46" height="20" rx="4" fill="#eff6ff" stroke="#bfdbfe" />
      <text x="158" y="142" class="len-badge-orig">d = 5</text>

      
      <circle cx="90" cy="220" r="5" class="pt-orig" />
      <circle cx="225" cy="60" r="5" class="pt-orig" />
      <text x="90" y="240" class="lbl-text" text-anchor="middle">P (1, 2)</text>
      <text x="225" y="48" class="lbl-text" text-anchor="middle">Q (4, 6)</text>

      
      <line id="seg-mapped" x1="360" y1="220" x2="495" y2="60" class="seg-mapped" />

      
      <rect id="len-bg-map" x="405" y="128" width="48" height="20" rx="4" fill="#f5f3ff" stroke="#ddd6fe" />
      <text id="len-lbl-map" x="429" y="142" class="len-badge-map">d' = 5</text>

      
      <circle id="pt-p-prime" cx="360" cy="220" r="5" class="pt-map" />
      <circle id="pt-q-prime" cx="495" cy="60" r="5" class="pt-map" />
      <text id="lbl-p-prime" x="360" y="240" class="lbl-text" text-anchor="middle">P' (7, 2)</text>
      <text id="lbl-q-prime" x="495" y="48" class="lbl-text" text-anchor="middle">Q' (10, 6)</text>
    </svg>
  </div>

  <div class="callout-box">
    <div class="callout-title">Distance Invariance: d(P', Q') = d(P, Q)</div>
    <div class="callout-sub" id="iso-detail">Preserved length: 5 units under all rigid motions</div>
  </div>

  <script>
    const ORIGIN_X = 45;
    const ORIGIN_Y = 300;
    const STEP_X = 45;
    const STEP_Y = 40;

    // Draw coordinate grid
    const gridGroup = document.getElementById('grid-group');
    const axesGroup = document.getElementById('axes-group');

    for (let x = 1; x <= 11; x++) {
      const px = ORIGIN_X + x * STEP_X;
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', px);
      line.setAttribute('y1', 30);
      line.setAttribute('x2', px);
      line.setAttribute('y2', ORIGIN_Y);
      line.setAttribute('class', 'grid-line');
      gridGroup.appendChild(line);

      const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      label.setAttribute('x', px);
      label.setAttribute('y', ORIGIN_Y + 14);
      label.setAttribute('class', 'axis-label');
      label.textContent = x;
      axesGroup.appendChild(label);
    }

    for (let y = 1; y <= 6; y++) {
      const py = ORIGIN_Y - y * STEP_Y;
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', ORIGIN_X);
      line.setAttribute('y1', py);
      line.setAttribute('x2', ORIGIN_X + 11 * STEP_X);
      line.setAttribute('y2', py);
      line.setAttribute('class', 'grid-line');
      gridGroup.appendChild(line);

      const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      label.setAttribute('x', ORIGIN_X - 12);
      label.setAttribute('y', py);
      label.setAttribute('class', 'axis-label');
      label.textContent = y;
      axesGroup.appendChild(label);
    }

    function toSvg(x, y) {
      return {
        x: ORIGIN_X + x * STEP_X,
        y: ORIGIN_Y - y * STEP_Y
      };
    }

    const configs = {
      trans: {
        p: [7, 2],
        q: [10, 6],
        arrowPath: "M 170,120 Q 275,60 380,120",
        isoText: "Translation",
        detail: "Slide (+6, +0): d(P', Q') = √(3² + 4²) = 5"
      },
      rot: {
        p: [6, 5],
        q: [10, 2],
        arrowPath: "M 170,120 Q 255,40 370,170",
        isoText: "Rotation",
        detail: "90° Turn: d(P', Q') = √(4² + (-3)²) = 5"
      },
      ref: {
        p: [10, 2],
        q: [7, 6],
        arrowPath: "M 170,120 Q 275,30 380,120",
        isoText: "Reflection",
        detail: "Flip across axis: d(P', Q') = √((-3)² + 4²) = 5"
      }
    };

    function setMode(mode) {
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      const activeBtn = document.getElementById(`btn-${mode}`);
      if (activeBtn) activeBtn.classList.add('active');

      const cfg = configs[mode];
      const pSvg = toSvg(cfg.p[0], cfg.p[1]);
      const qSvg = toSvg(cfg.q[0], cfg.q[1]);

      const seg = document.getElementById('seg-mapped');
      seg.setAttribute('x1', pSvg.x);
      seg.setAttribute('y1', pSvg.y);
      seg.setAttribute('x2', qSvg.x);
      seg.setAttribute('y2', qSvg.y);

      const ptP = document.getElementById('pt-p-prime');
      ptP.setAttribute('cx', pSvg.x);
      ptP.setAttribute('cy', pSvg.y);

      const ptQ = document.getElementById('pt-q-prime');
      ptQ.setAttribute('cx', qSvg.x);
      ptQ.setAttribute('cy', qSvg.y);

      const lblP = document.getElementById('lbl-p-prime');
      lblP.setAttribute('x', pSvg.x);
      lblP.setAttribute('y', pSvg.y + (cfg.p[1] <= cfg.q[1] ? 20 : -14));
      lblP.textContent = `P' (${cfg.p[0]}, ${cfg.p[1]})`;

      const lblQ = document.getElementById('lbl-q-prime');
      lblQ.setAttribute('x', qSvg.x);
      lblQ.setAttribute('y', qSvg.y + (cfg.q[1] < cfg.p[1] ? 20 : -12));
      lblQ.textContent = `Q' (${cfg.q[0]}, ${cfg.q[1]})`;

      const midX = (pSvg.x + qSvg.x) / 2;
      const midY = (pSvg.y + qSvg.y) / 2;
      const bgMap = document.getElementById('len-bg-map');
      bgMap.setAttribute('x', midX - 24);
      bgMap.setAttribute('y', midY - 10);

      const lblLen = document.getElementById('len-lbl-map');
      lblLen.setAttribute('x', midX);
      lblLen.setAttribute('y', midY + 4);

      document.getElementById('iso-arrow').setAttribute('d', cfg.arrowPath);
      document.getElementById('iso-text').textContent = cfg.isoText;
      document.getElementById('iso-detail').textContent = cfg.detail;
    }
  </script>
</body>
</html>

<!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;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 10px 8px;
      user-select: none;
      max-width: 350px;
      margin: 0 auto;
    }

    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
      margin-bottom: 6px;
    }

    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .svg-container {
      width: 100%;
      position: relative;
    }

    svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .grid-line { stroke: #e2e8f0; stroke-width: 1; }
    .axis { stroke: #94a3b8; stroke-width: 1.5; }
    .tick-label { font-size: 10px; fill: #64748b; font-family: inherit; }

    .vector-line {
      stroke-linecap: round;
      transition: stroke-dashoffset 0.4s ease, opacity 0.3s;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .point-label {
      font-size: 12px;
      font-weight: 700;
      paint-order: stroke;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linejoin: round;
    }

    .info-bar {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      text-align: center;
      min-height: 20px;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="step-btn active" id="btn0" onclick="setStep(0)">1. Base (k=1)</button>
    <button class="step-btn" id="btn1" onclick="setStep(1)">2. Double (k=2)</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">3. Land at P'</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 340 330">
      <defs>
        <marker id="arrow-blue" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1 L 7 4 L 0 7 z" fill="#2563eb" />
        </marker>
        <marker id="arrow-purple" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1 L 7 4 L 0 7 z" fill="#7c3aed" />
        </marker>
        <marker id="arrow-run" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1 L 7 4 L 0 7 z" fill="#0284c7" />
        </marker>
        <marker id="arrow-rise" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1 L 7 4 L 0 7 z" fill="#059669" />
        </marker>
      </defs>

      
      
      
      <g id="grid">
        
        <line class="grid-line" x1="35" y1="40" x2="35" y2="315"/>
        <line class="grid-line" x1="70" y1="40" x2="70" y2="315"/>
        <line class="grid-line" x1="105" y1="40" x2="105" y2="315"/>
        <line class="grid-line" x1="140" y1="40" x2="140" y2="315"/>
        <line class="grid-line" x1="175" y1="40" x2="175" y2="315"/>
        <line class="grid-line" x1="210" y1="40" x2="210" y2="315"/>
        <line class="grid-line" x1="245" y1="40" x2="245" y2="315"/>
        <line class="grid-line" x1="280" y1="40" x2="280" y2="315"/>
        <line class="grid-line" x1="315" y1="40" x2="315" y2="315"/>
        
        <line class="grid-line" x1="35" y1="315" x2="315" y2="315"/>
        <line class="grid-line" x1="35" y1="290" x2="315" y2="290"/>
        <line class="grid-line" x1="35" y1="265" x2="315" y2="265"/>
        <line class="grid-line" x1="35" y1="240" x2="315" y2="240"/>
        <line class="grid-line" x1="35" y1="215" x2="315" y2="215"/>
        <line class="grid-line" x1="35" y1="190" x2="315" y2="190"/>
        <line class="grid-line" x1="35" y1="165" x2="315" y2="165"/>
        <line class="grid-line" x1="35" y1="140" x2="315" y2="140"/>
        <line class="grid-line" x1="35" y1="115" x2="315" y2="115"/>
        <line class="grid-line" x1="35" y1="90" x2="315" y2="90"/>
        <line class="grid-line" x1="35" y1="65" x2="315" y2="65"/>
        <line class="grid-line" x1="35" y1="40" x2="315" y2="40"/>

        
        <line class="axis" x1="35" y1="40" x2="35" y2="315"/>
        <line class="axis" x1="35" y1="315" x2="315" y2="315"/>

        
        <text class="tick-label" x="70" y="327" text-anchor="middle">1</text>
        <text class="tick-label" x="175" y="327" text-anchor="middle">4</text>
        <text class="tick-label" x="280" y="327" text-anchor="middle">7</text>
        <text class="tick-label" x="24" y="268" text-anchor="end">2</text>
        <text class="tick-label" x="24" y="168" text-anchor="end">6</text>
        <text class="tick-label" x="24" y="68" text-anchor="end">10</text>
      </g>

      
      <g id="step1-graphics">
        
        <line x1="70" y1="265" x2="171" y2="265" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="4,3" marker-end="url(#arrow-run)"/>
        
        <line x1="175" y1="265" x2="175" y2="169" stroke="#059669" stroke-width="2.5" stroke-dasharray="4,3" marker-end="url(#arrow-rise)"/>
        
        <line x1="70" y1="265" x2="171" y2="169" stroke="#2563eb" stroke-width="2.5" marker-end="url(#arrow-blue)"/>
        
        <rect x="100" y="271" width="45" height="18" rx="4" fill="#e0f2fe"/>
        <text x="122" y="284" fill="#0284c7" font-size="11" font-weight="700" text-anchor="middle">run +3</text>
        <rect x="181" y="206" width="45" height="18" rx="4" fill="#d1fae5"/>
        <text x="203" y="219" fill="#059669" font-size="11" font-weight="700" text-anchor="middle">rise +4</text>
      </g>

      
      <g id="step2-graphics" style="display: none;">
        
        <line x1="70" y1="265" x2="276" y2="265" stroke="#0284c7" stroke-width="3" stroke-dasharray="4,3" marker-end="url(#arrow-run)"/>
        
        <line x1="280" y1="265" x2="280" y2="69" stroke="#059669" stroke-width="3" stroke-dasharray="4,3" marker-end="url(#arrow-rise)"/>
        
        <rect x="140" y="271" width="70" height="18" rx="4" fill="#e0f2fe"/>
        <text x="175" y="284" fill="#0284c7" font-size="11" font-weight="700" text-anchor="middle">run: 3 × 2 = 6</text>
        <rect x="215" y="156" width="60" height="18" rx="4" fill="#d1fae5"/>
        <text x="245" y="169" fill="#059669" font-size="11" font-weight="700" text-anchor="middle">4 × 2 = 8</text>
      </g>

      
      <g id="step3-graphics" style="display: none;">
        
        <line x1="70" y1="265" x2="276" y2="69" stroke="#7c3aed" stroke-width="3" marker-end="url(#arrow-purple)"/>
      </g>

      
      
      <circle cx="70" cy="265" r="5.5" fill="#dc2626" />
      <text class="point-label" x="65" y="255" fill="#dc2626" text-anchor="end">C(1, 2)</text>

      
      <circle cx="175" cy="165" r="5" fill="#2563eb" />
      <text class="point-label" x="168" y="155" fill="#2563eb" text-anchor="end">P(4, 6)</text>

      
      <g id="point-p-prime" style="display: none;">
        <circle cx="280" cy="65" r="6" fill="#7c3aed" />
        <text class="point-label" x="272" y="55" fill="#7c3aed" text-anchor="end">P'(7, 10)</text>
      </g>
    </svg>
  </div>

  <div class="info-bar" id="infoText">
    <span style="color:#0284c7">run = +3</span>, <span style="color:#059669">rise = +4</span>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;

    const steps = [
      {
        info: '<span style="color:#0284c7">run = +3</span>, <span style="color:#059669">rise = +4</span>',
        s1: true, s2: false, s3: false, pPrime: false
      },
      {
        info: 'Double components: <span style="color:#0284c7">run = 6</span>, <span style="color:#059669">rise = 8</span>',
        s1: false, s2: true, s3: false, pPrime: false
      },
      {
        info: 'New point: <span style="color:#7c3aed">P\'(1+6, 2+8) = (7, 10)</span>',
        s1: false, s2: true, s3: true, pPrime: true
      }
    ];

    function setStep(index, manual = true) {
      if (manual && timer) {
        clearInterval(timer);
        timer = null;
      }
      currentStep = index;

      for (let i = 0; i < 3; i++) {
        document.getElementById('btn' + i).classList.toggle('active', i === index);
      }

      const cfg = steps[index];
      document.getElementById('step1-graphics').style.display = cfg.s1 ? 'inline' : 'none';
      document.getElementById('step2-graphics').style.display = cfg.s2 ? 'inline' : 'none';
      document.getElementById('step3-graphics').style.display = cfg.s3 ? 'inline' : 'none';
      document.getElementById('point-p-prime').style.display = cfg.pPrime ? 'inline' : 'none';
      document.getElementById('infoText').innerHTML = cfg.info;
    }

    // Auto play smoothly
    timer = setInterval(() => {
      currentStep = (currentStep + 1) % steps.length;
      setStep(currentStep, false);
    }, 3500);
  </script>
</body>
</html>

Dilations, Scale Factors, and Centers of Dilation

<!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: #ffffff;
      color: #1e2945;
      width: 100%;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      user-select: none;
    }

    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      margin-bottom: 6px;
    }

    .tab-btn {
      appearance: none;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .play-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 6px;
      cursor: pointer;
      margin-left: 4px;
    }

    /* Cards fixed area */
    .card-wrap {
      width: 100%;
      max-width: 360px;
      height: 48px;
      position: relative;
      margin-bottom: 4px;
    }

    .calc-card {
      position: absolute;
      inset: 0;
      background: #f1f5f9;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 10px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      text-align: center;
    }
    .calc-card.active {
      opacity: 1;
      pointer-events: auto;
    }
    .c-center { color: #d97706; }
    .c-orig { color: #0284c7; }
    .c-img { color: #9333ea; }
    .c-k { color: #e11d48; }

    /* SVG Graph */
    .graph-container {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 1 / 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .axis { stroke: #cbd5e1; stroke-width: 1.5; }
    .axis-num { font-size: 8px; fill: #94a3b8; font-family: system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; }

    .ray-line { stroke: #f59e0b; stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.3; transition: opacity 0.3s; }
    .ray-line.highlight { opacity: 1; stroke-width: 2; }

    .poly-orig { fill: rgba(34, 183, 255, 0.22); stroke: #0284c7; stroke-width: 2; }
    .poly-img { fill: rgba(168, 85, 247, 0.16); stroke: #9333ea; stroke-width: 2; stroke-dasharray: 4 2; }

    .pt { transition: r 0.2s, stroke-width 0.2s; }
    .pt-center { fill: #f59e0b; stroke: #ffffff; stroke-width: 1.5; }
    .pt-orig { fill: #0284c7; stroke: #ffffff; stroke-width: 1.5; }
    .pt-img { fill: #9333ea; stroke: #ffffff; stroke-width: 1.5; }
    
    .pt-active { r: 5.5; stroke: #0f172a; stroke-width: 2; }
    .lbl { font-size: 9px; font-weight: 700; font-family: system-ui, sans-serif; dominant-baseline: middle; }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="tab-btn active" data-idx="0">A</button>
    <button class="tab-btn" data-idx="1">B</button>
    <button class="tab-btn" data-idx="2">C</button>
    <button class="tab-btn" data-idx="3">All</button>
    <button class="play-btn" id="playBtn">⏸</button>
  </div>

  
  <div class="card-wrap">
    
    <div class="calc-card active" id="card0">
      <div>
        <span class="c-orig">A(3,1)</span> → (1+<span class="c-k">2</span>(3−1), 1+<span class="c-k">2</span>(1−1)) = <span class="c-img">A′(5,1)</span>
      </div>
    </div>
    
    <div class="calc-card" id="card1">
      <div>
        <span class="c-orig">B(5,5)</span> → (1+<span class="c-k">2</span>(5−1), 1+<span class="c-k">2</span>(5−1)) = <span class="c-img">B′(9,9)</span>
      </div>
    </div>
    
    <div class="calc-card" id="card2">
      <div>
        <span class="c-orig">C(1,4)</span> → (1+<span class="c-k">2</span>(1−1), 1+<span class="c-k">2</span>(4−1)) = <span class="c-img">C′(1,7)</span>
      </div>
    </div>
    
    <div class="calc-card" id="card3">
      <div>
        <span class="c-center">P(1,1)</span>, <span class="c-k">k = 2</span> : <span class="c-orig">△ABC</span> → <span class="c-img">△A′B′C′</span>
      </div>
    </div>
  </div>

  
  <div class="graph-container">
    <svg viewBox="0 0 250 250">
      
      <g id="grid">
        
        <line class="grid-line" x1="30" y1="20" x2="30" y2="230"/>
        <line class="grid-line" x1="50" y1="20" x2="50" y2="230"/>
        <line class="grid-line" x1="70" y1="20" x2="70" y2="230"/>
        <line class="grid-line" x1="90" y1="20" x2="90" y2="230"/>
        <line class="grid-line" x1="110" y1="20" x2="110" y2="230"/>
        <line class="grid-line" x1="130" y1="20" x2="130" y2="230"/>
        <line class="grid-line" x1="150" y1="20" x2="150" y2="230"/>
        <line class="grid-line" x1="170" y1="20" x2="170" y2="230"/>
        <line class="grid-line" x1="190" y1="20" x2="190" y2="230"/>
        <line class="grid-line" x1="210" y1="20" x2="210" y2="230"/>
        <line class="grid-line" x1="230" y1="20" x2="230" y2="230"/>

        
        <line class="grid-line" x1="30" y1="230" x2="230" y2="230"/>
        <line class="grid-line" x1="30" y1="210" x2="230" y2="210"/>
        <line class="grid-line" x1="30" y1="190" x2="230" y2="190"/>
        <line class="grid-line" x1="30" y1="170" x2="230" y2="170"/>
        <line class="grid-line" x1="30" y1="150" x2="230" y2="150"/>
        <line class="grid-line" x1="30" y1="130" x2="230" y2="130"/>
        <line class="grid-line" x1="30" y1="110" x2="230" y2="110"/>
        <line class="grid-line" x1="30" y1="90" x2="230" y2="90"/>
        <line class="grid-line" x1="30" y1="70" x2="230" y2="70"/>
        <line class="grid-line" x1="30" y1="50" x2="230" y2="50"/>
        <line class="grid-line" x1="30" y1="30" x2="230" y2="30"/>
      </g>

      
      <line class="axis" x1="30" y1="230" x2="236" y2="230"/>
      <line class="axis" x1="30" y1="230" x2="30" y2="24"/>

      
      <text class="axis-num" x="30" y="240">0</text>
      <text class="axis-num" x="70" y="240">2</text>
      <text class="axis-num" x="110" y="240">4</text>
      <text class="axis-num" x="150" y="240">6</text>
      <text class="axis-num" x="190" y="240">8</text>
      <text class="axis-num" x="230" y="240">10</text>

      <text class="axis-num" x="20" y="210">1</text>
      <text class="axis-num" x="20" y="150">4</text>
      <text class="axis-num" x="20" y="90">7</text>
      <text class="axis-num" x="20" y="50">9</text>

      
      
      <line id="rayA" class="ray-line highlight" x1="50" y1="210" x2="145" y2="210"/>
      
      <line id="rayB" class="ray-line" x1="50" y1="210" x2="220" y2="30"/>
      
      <line id="rayC" class="ray-line" x1="50" y1="210" x2="50" y2="75"/>

      
      <polygon class="poly-img" points="130,210 210,50 50,90"/>

      
      <polygon class="poly-orig" points="90,210 130,130 50,150"/>

      
      <circle class="pt pt-center" cx="50" cy="210" r="4.5"/>
      <text class="lbl" x="42" y="222" fill="#d97706" text-anchor="end">P(1,1)</text>

      
      
      <circle id="ptA" class="pt pt-orig pt-active" cx="90" cy="210" r="4"/>
      <text class="lbl" x="90" y="200" fill="#0284c7" text-anchor="middle">A</text>

      
      <circle id="ptB" class="pt pt-orig" cx="130" cy="130" r="4"/>
      <text class="lbl" x="140" y="132" fill="#0284c7">B</text>

      
      <circle id="ptC" class="pt pt-orig" cx="50" cy="150" r="4"/>
      <text class="lbl" x="38" y="150" fill="#0284c7" text-anchor="end">C</text>

      
      
      <circle id="ptAprime" class="pt pt-img pt-active" cx="130" cy="210" r="4"/>
      <text class="lbl" x="130" y="222" fill="#9333ea" text-anchor="middle">A′</text>

      
      <circle id="ptBprime" class="pt pt-img" cx="210" cy="50" r="4"/>
      <text class="lbl" x="218" y="48" fill="#9333ea">B′</text>

      
      <circle id="ptCprime" class="pt pt-img" cx="50" cy="90" r="4"/>
      <text class="lbl" x="38" y="88" fill="#9333ea" text-anchor="end">C′</text>
    </svg>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab-btn');
    const cards = [
      document.getElementById('card0'),
      document.getElementById('card1'),
      document.getElementById('card2'),
      document.getElementById('card3')
    ];
    const rays = {
      0: [document.getElementById('rayA')],
      1: [document.getElementById('rayB')],
      2: [document.getElementById('rayC')],
      3: [document.getElementById('rayA'), document.getElementById('rayB'), document.getElementById('rayC')]
    };
    const pts = {
      0: [document.getElementById('ptA'), document.getElementById('ptAprime')],
      1: [document.getElementById('ptB'), document.getElementById('ptBprime')],
      2: [document.getElementById('ptC'), document.getElementById('ptCprime')],
      3: [
        document.getElementById('ptA'), document.getElementById('ptAprime'),
        document.getElementById('ptB'), document.getElementById('ptBprime'),
        document.getElementById('ptC'), document.getElementById('ptCprime')
      ]
    };
    const allPts = [
      document.getElementById('ptA'), document.getElementById('ptAprime'),
      document.getElementById('ptB'), document.getElementById('ptBprime'),
      document.getElementById('ptC'), document.getElementById('ptCprime')
    ];
    const allRays = [
      document.getElementById('rayA'),
      document.getElementById('rayB'),
      document.getElementById('rayC')
    ];

    let current = 0;
    let timer = null;
    let playing = true;
    const playBtn = document.getElementById('playBtn');

    function setStep(idx) {
      current = idx;
      tabs.forEach((t, i) => t.classList.toggle('active', i === idx));
      cards.forEach((c, i) => c.classList.toggle('active', i === idx));
      
      allRays.forEach(r => r.classList.remove('highlight'));
      rays[idx].forEach(r => r.classList.add('highlight'));

      allPts.forEach(p => p.classList.remove('pt-active'));
      pts[idx].forEach(p => p.classList.add('pt-active'));
    }

    function nextStep() {
      setStep((current + 1) % 4);
    }

    function startAuto() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      playing = true;
      playBtn.textContent = '⏸';
    }

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

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

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

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

合同な図形を見つける

合同の定義と重ねて確かめる操作

対応する頂点の見つけ方と順序

対応する辺の長さが等しい性質

対応する角の大きさが等しい性質

向きや位置が変わった合同な図形の識別

形と大きさを決める要素への着目

合同な四角形の対応関係と性質

合同な図形の性質を用いた辺の長さと角度の計算

合同の概念の総括と発展探究

math

図形の合同と対応する要素

Understanding Transformations as Functions

Representing Translations in the Plane

Representing Reflections in the Plane

Representing Rotations in the Plane

Identifying Rigid vs. Non-Rigid Transformations

Comparing Translations to Horizontal Stretches

Representing Transformations as Functions

3つの辺の長さを用いた合同な三角形の作図

2辺とその間の角を用いた合同な三角形の作図

1辺とその両端の角を用いた合同な三角形の作図

三角形を決定する3つの条件の比較と整理

対角線で三角形に分けてかく合同な四角形の作図

平行四辺形とひし形の合同な作図手順

台形の合同な作図と必要な条件の吟味

作図の手順と理由を言葉と記号で論理的に説明する

作図道具の特性と作図精度の検証

合同な三角形・四角形の作図と探究

Translations as Vectors and Coordinate Functions

Reflections Across Axes and Arbitrary Lines

Rotations Around the Origin and Arbitrary Centers

Compositions of Rigid Motions and Glide Reflections

Line Symmetry, Rotational Symmetry, and Point Symmetry

Rigid Transformations, Coordinate Mappings, and Symmetry

Lines of Symmetry in Rectangles

Lines of Symmetry in Parallelograms and Trapezoids

Rotational Symmetry of Regular Polygons

Describing Symmetries That Carry a Figure Onto Itself

Drawing Transformed Figures on Graph Paper

Drawing Transformed Figures Using Tracing Paper

Specifying Sequences of Transformations

Symmetry and Compositions of Transformations

Congruence as a Sequence of Rigid Motions

Predicting the Effect of a Given Rigid Motion

Using Rigid Motions to Decide Congruence

Corresponding Parts of Congruent Figures

Congruence and Rigid Motions

Proving the SAS and SSS Triangle Congruence Criteria

Proving the ASA and AAS Triangle Congruence Criteria

Hypotenuse-Leg Congruence in Right Triangles

Writing Two-Column and Flowchart Proofs Using CPCTC

Using Congruent Triangle Proofs in Problems

Transformation-Based Triangle Congruence and Proofs

Proving Triangle Congruence via Corresponding Sides

Proving Triangle Congruence via Corresponding Angles

SSS Criterion for Triangle Congruence

SAS Criterion for Triangle Congruence

ASA Criterion for Triangle Congruence

AAS Criterion for Triangle Congruence

HL Criterion for Right Triangle Congruence

Why SSA and AAA Do Not Guarantee Congruence

Triangle Congruence Criteria from Rigid Motions

合同な図形の性質 — 重ね合わせたときの対応する頂点・辺・角

合同な三角形による平面の敷き詰め — 180度と平行線の発見

合同な四角形による平面の敷き詰め — 内角の和360度の活用

敷き詰め模様から図形の性質を数学的に説明する

合同な図形と平面の敷き詰め — 空間と平面の敷き詰め探究

OGM.11.GEO.3

Aligned learning resources

Related diagrams