<!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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 8px;
      user-select: none;
    }
    .wrapper {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 4px;
      gap: 8px;
    }
    .btn-group {
      display: flex;
      gap: 6px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s, border-color 0.15s;
    }
    .btn:active { background: #e2e8f0; }
    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      background: #ede9fe;
      color: #6d28d9;
      font-family: monospace;
      letter-spacing: 0.5px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .axis { stroke: #94a3b8; stroke-width: 1.5; }
    .tick-label { font-size: 11px; fill: #64748b; font-family: monospace; }
    .vector-line {
      stroke: #8b5cf6;
      stroke-width: 2;
      stroke-dasharray: 5 4;
    }
    .pre-triangle {
      fill: rgba(37, 99, 235, 0.15);
      stroke: #2563eb;
      stroke-width: 2.5;
      stroke-linejoin: round;
    }
    .post-triangle {
      fill: rgba(244, 63, 94, 0.15);
      stroke: #f43f5e;
      stroke-width: 2.5;
      stroke-linejoin: round;
    }
    .anim-triangle {
      fill: rgba(139, 92, 246, 0.2);
      stroke: #8b5cf6;
      stroke-width: 2;
      stroke-dasharray: 4 3;
      stroke-linejoin: round;
      pointer-events: none;
    }
    .v-label {
      font-size: 12px;
      font-weight: 700;
      font-family: system-ui, sans-serif;
    }
    .length-badge {
      font-size: 11px;
      font-weight: 700;
      fill: #1e2945;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="controls">
      <div class="btn-group">
        <button class="btn" id="playBtn" onclick="togglePlay()">▶ Translate</button>
        <button class="btn" onclick="resetAnim()">↺ Reset</button>
      </div>
      <div class="badge">Vector ⟨4, -3⟩</div>
    </div>

    <svg viewBox="0 0 460 390">
      <defs>
        <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="#8b5cf6"/>
        </marker>
        <marker id="axis-arrow-x" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 2 L 6 5 L 0 8 z" fill="#94a3b8"/>
        </marker>
        <marker id="axis-arrow-y" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 2 L 6 5 L 0 8 z" fill="#94a3b8"/>
        </marker>
      </defs>

      
      
      <line x1="50" y1="14" x2="50" y2="366" class="grid-line" />
      <line x1="92" y1="14" x2="92" y2="366" class="grid-line" />
      <line x1="134" y1="14" x2="134" y2="366" class="grid-line" />
      <line x1="176" y1="14" x2="176" y2="366" class="grid-line" />
      <line x1="218" y1="14" x2="218" y2="366" class="grid-line" />
      <line x1="260" y1="14" x2="260" y2="366" class="grid-line" />
      <line x1="302" y1="14" x2="302" y2="366" class="grid-line" />
      <line x1="344" y1="14" x2="344" y2="366" class="grid-line" />
      <line x1="386" y1="14" x2="386" y2="366" class="grid-line" />
      <line x1="428" y1="14" x2="428" y2="366" class="grid-line" />

      
      <line x1="42" y1="22" x2="436" y2="22" class="grid-line" />
      <line x1="42" y1="64" x2="436" y2="64" class="grid-line" />
      <line x1="42" y1="106" x2="436" y2="106" class="grid-line" />
      <line x1="42" y1="148" x2="436" y2="148" class="grid-line" />
      <line x1="42" y1="190" x2="436" y2="190" class="grid-line" />
      <line x1="42" y1="232" x2="436" y2="232" class="grid-line" />
      <line x1="42" y1="274" x2="436" y2="274" class="grid-line" />
      <line x1="42" y1="316" x2="436" y2="316" class="grid-line" />
      <line x1="42" y1="358" x2="436" y2="358" class="grid-line" />

      
      
      <line x1="40" y1="274" x2="444" y2="274" class="axis" marker-end="url(#axis-arrow-x)" />
      
      <line x1="50" y1="368" x2="50" y2="12" class="axis" marker-end="url(#axis-arrow-y)" />

      
      <text x="444" y="290" class="tick-label" font-weight="bold">x</text>
      <text x="36" y="16" class="tick-label" font-weight="bold">y</text>
      <text x="40" y="288" class="tick-label">0</text>
      <text x="92" y="288" class="tick-label" text-anchor="middle">1</text>
      <text x="176" y="288" class="tick-label" text-anchor="middle">3</text>
      <text x="260" y="288" class="tick-label" text-anchor="middle">5</text>
      <text x="344" y="288" class="tick-label" text-anchor="middle">7</text>
      <text x="428" y="288" class="tick-label" text-anchor="middle">9</text>

      <text x="34" y="362" class="tick-label" text-anchor="end">-2</text>
      <text x="34" y="194" class="tick-label" text-anchor="end">2</text>
      <text x="34" y="110" class="tick-label" text-anchor="end">4</text>
      <text x="34" y="26" class="tick-label" text-anchor="end">6</text>

      
      <line x1="92" y1="190" x2="260" y2="316" class="vector-line" marker-end="url(#arrow)" />
      <line x1="218" y1="190" x2="386" y2="316" class="vector-line" marker-end="url(#arrow)" />
      <line x1="134" y1="64" x2="302" y2="190" class="vector-line" marker-end="url(#arrow)" />

      
      <polygon points="92,190 218,190 134,64" class="pre-triangle" />

      
      <polygon points="260,316 386,316 302,190" class="post-triangle" />

      
      <polygon id="animPoly" points="92,190 218,190 134,64" class="anim-triangle" opacity="0" />

      
      <circle cx="92" cy="190" r="4.5" fill="#2563eb" />
      <text x="82" y="206" class="v-label" fill="#2563eb">P(1, 2)</text>

      <circle cx="218" cy="190" r="4.5" fill="#2563eb" />
      <text x="228" y="204" class="v-label" fill="#2563eb">Q(4, 2)</text>

      <circle cx="134" cy="64" r="4.5" fill="#2563eb" />
      <text x="134" y="52" class="v-label" fill="#2563eb" text-anchor="middle">R(2, 5)</text>

      
      <rect x="143" y="196" width="24" height="15" rx="3" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/>
      <text x="155" y="208" class="length-badge" text-anchor="middle">3</text>

      
      <circle cx="260" cy="316" r="4.5" fill="#f43f5e" />
      <text x="250" y="334" class="v-label" fill="#f43f5e">P′(5, -1)</text>

      <circle cx="386" cy="316" r="4.5" fill="#f43f5e" />
      <text x="394" y="330" class="v-label" fill="#f43f5e">Q′(8, -1)</text>

      <circle cx="302" cy="190" r="4.5" fill="#f43f5e" />
      <text x="312" y="184" class="v-label" fill="#f43f5e">R′(6, 2)</text>

      
      <rect x="311" y="322" width="24" height="15" rx="3" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/>
      <text x="323" y="334" class="length-badge" text-anchor="middle">3</text>
    </svg>
  </div>

  <script>
    let progress = 0;
    let isPlaying = false;
    let animId = null;

    const p0 = [ {x: 92, y: 190}, {x: 218, y: 190}, {x: 134, y: 64} ];
    const dx = 168; // 4 units * 42
    const dy = 126; // -3 units * -42 (downwards on screen)

    const animPoly = document.getElementById('animPoly');
    const playBtn = document.getElementById('playBtn');

    function updateVisual(t) {
      if (t <= 0 || t >= 1) {
        animPoly.setAttribute('opacity', '0');
      } else {
        animPoly.setAttribute('opacity', '1');
        const pts = p0.map(pt => `${pt.x + dx * t},${pt.y + dy * t}`).join(' ');
        animPoly.setAttribute('points', pts);
      }
    }

    function stepAnim() {
      if (!isPlaying) return;
      progress += 0.015;
      if (progress >= 1) {
        progress = 1;
        isPlaying = false;
        playBtn.textContent = '▶ Translate';
        updateVisual(progress);
        return;
      }
      updateVisual(progress);
      animId = requestAnimationFrame(stepAnim);
    }

    function togglePlay() {
      if (isPlaying) {
        isPlaying = false;
        cancelAnimationFrame(animId);
        playBtn.textContent = '▶ Translate';
      } else {
        if (progress >= 1) progress = 0;
        isPlaying = true;
        playBtn.textContent = '⏸ Pause';
        animId = requestAnimationFrame(stepAnim);
      }
    }

    function resetAnim() {
      isPlaying = false;
      cancelAnimationFrame(animId);
      progress = 0;
      playBtn.textContent = '▶ Translate';
      updateVisual(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;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100%;
      padding: 8px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 600px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
      flex-wrap: wrap;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .btn:hover:not(.active) {
      background: #e2e8f0;
    }
    .anim-reflect {
      transform-origin: 280px 0;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
    }
    .folded {
      transform: scaleX(-1);
    }
  </style>
</head>
<body>

<div class="diagram-wrap">
  <svg viewBox="0 0 560 420" xmlns="http://www.w3.org/2000/svg">
    <defs>
      
      <marker id="arrow-cw" 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="#2563eb" />
      </marker>
      <marker id="arrow-ccw" 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="#9333ea" />
      </marker>
      <marker id="arrow-axis" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
        <path d="M 0 2 L 8 5 L 0 8 z" fill="#94a3b8" />
      </marker>
    </defs>

    
    <g stroke="#f1f5f9" stroke-width="1.5">
      <line x1="40" y1="20" x2="520" y2="20" />
      <line x1="40" y1="90" x2="520" y2="90" />
      <line x1="40" y1="160" x2="520" y2="160" />
      <line x1="40" y1="230" x2="520" y2="230" />
      <line x1="40" y1="300" x2="520" y2="300" />
      
      <line x1="120" y1="20" x2="120" y2="370" />
      <line x1="200" y1="20" x2="200" y2="370" />
      <line x1="360" y1="20" x2="360" y2="370" />
      <line x1="440" y1="20" x2="440" y2="370" />
    </g>

    
    <g stroke="#94a3b8" stroke-width="1.5">
      <line x1="40" y1="370" x2="525" y2="370" marker-end="url(#arrow-axis)" />
      <line x1="40" y1="370" x2="40" y2="15" marker-end="url(#arrow-axis)" />
    </g>

    
    <g font-size="12" fill="#64748b" text-anchor="middle" font-weight="500">
      <text x="40" y="388">0</text>
      <text x="120" y="388">1</text>
      <text x="200" y="388">2</text>
      <text x="280" y="388">3</text>
      <text x="360" y="388">4</text>
      <text x="440" y="388">5</text>
      <text x="520" y="388">6</text>
      <text x="532" y="374" font-weight="700">x</text>

      <text x="26" y="304">1</text>
      <text x="26" y="234">2</text>
      <text x="26" y="164">3</text>
      <text x="26" y="94">4</text>
      <text x="26" y="24">5</text>
      <text x="36" y="12" font-weight="700">y</text>
    </g>

    
    <g id="connectors" stroke="#64748b" stroke-width="1.5">
      
      <line x1="200" y1="90" x2="360" y2="90" stroke-dasharray="4 4" />
      
      <line x1="120" y1="300" x2="440" y2="300" stroke-dasharray="4 4" />
      
      
      <path d="M 268 90 L 268 78 L 280 78" fill="none" stroke="#475569" stroke-width="1.5" />
      <path d="M 268 300 L 268 288 L 280 288" fill="none" stroke="#475569" stroke-width="1.5" />

      
      
      <line x1="240" y1="84" x2="240" y2="96" stroke="#2563eb" stroke-width="2" />
      <line x1="320" y1="84" x2="320" y2="96" stroke="#9333ea" stroke-width="2" />

      
      <line x1="197" y1="294" x2="197" y2="306" stroke="#2563eb" stroke-width="2" />
      <line x1="203" y1="294" x2="203" y2="306" stroke="#2563eb" stroke-width="2" />
      <line x1="357" y1="294" x2="357" y2="306" stroke="#9333ea" stroke-width="2" />
      <line x1="363" y1="294" x2="363" y2="306" stroke="#9333ea" stroke-width="2" />
    </g>

    
    <g id="mirror-line">
      <line x1="280" y1="25" x2="280" y2="365" stroke="#ef4444" stroke-width="2.5" stroke-dasharray="7 4" />
      <rect x="236" y="2" width="88" height="22" rx="4" fill="#fee2e2" />
      <text x="280" y="17" fill="#dc2626" font-size="13" font-weight="700" text-anchor="middle">Line m: x = 3</text>
    </g>

    
    <g id="tri-original">
      <polygon points="120,300 200,90 120,90" fill="#3b82f6" fill-opacity="0.18" stroke="#2563eb" stroke-width="2.5" stroke-linejoin="round" />
      
      
      <circle cx="120" cy="300" r="4.5" fill="#2563eb" />
      <circle cx="200" cy="90" r="4.5" fill="#2563eb" />
      <circle cx="120" cy="90" r="4.5" fill="#2563eb" />
      
      
      <text x="106" y="318" fill="#1d4ed8" font-size="13" font-weight="700">A(1, 1)</text>
      <text x="206" y="80" fill="#1d4ed8" font-size="13" font-weight="700">B(2, 4)</text>
      <text x="96" y="80" fill="#1d4ed8" font-size="13" font-weight="700">C(1, 4)</text>
    </g>

    
    <g id="tri-reflected" class="anim-reflect">
      <polygon points="440,300 360,90 440,90" fill="#a855f7" fill-opacity="0.18" stroke="#9333ea" stroke-width="2.5" stroke-linejoin="round" />
      
      
      <circle cx="440" cy="300" r="4.5" fill="#9333ea" />
      <circle cx="360" cy="90" r="4.5" fill="#9333ea" />
      <circle cx="440" cy="90" r="4.5" fill="#9333ea" />
      
      
      <text x="448" y="318" fill="#7e22ce" font-size="13" font-weight="700">A'(5, 1)</text>
      <text x="314" y="80" fill="#7e22ce" font-size="13" font-weight="700">B'(4, 4)</text>
      <text x="448" y="80" fill="#7e22ce" font-size="13" font-weight="700">C'(5, 4)</text>
    </g>

    
    <g id="orientations">
      
      <path d="M 142 145 A 22 22 0 1 1 154 185" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" marker-end="url(#arrow-cw)" />
      <text x="146" y="218" fill="#1d4ed8" font-size="12" font-weight="700" text-anchor="middle">Clockwise</text>

      
      <path d="M 418 145 A 22 22 0 1 0 406 185" fill="none" stroke="#9333ea" stroke-width="2" stroke-linecap="round" marker-end="url(#arrow-ccw)" />
      <text x="414" y="218" fill="#7e22ce" font-size="12" font-weight="700" text-anchor="middle">Counterclockwise</text>
    </g>
  </svg>

  <div class="controls">
    <button class="btn active" id="btn-all" onclick="showMode('all')">Full View</button>
    <button class="btn" id="btn-dist" onclick="showMode('dist')">Perpendicular & Distance</button>
    <button class="btn" id="btn-orient" onclick="showMode('orient')">Orientation Flip</button>
  </div>
</div>

<script>
  function showMode(mode) {
    const connectors = document.getElementById('connectors');
    const orientations = document.getElementById('orientations');
    const btnAll = document.getElementById('btn-all');
    const btnDist = document.getElementById('btn-dist');
    const btnOrient = document.getElementById('btn-orient');

    [btnAll, btnDist, btnOrient].forEach(b => b.classList.remove('active'));

    if (mode === 'all') {
      connectors.style.opacity = '1';
      orientations.style.opacity = '1';
      btnAll.classList.add('active');
    } else if (mode === 'dist') {
      connectors.style.opacity = '1';
      orientations.style.opacity = '0.08';
      btnDist.classList.add('active');
    } else if (mode === 'orient') {
      connectors.style.opacity = '0.08';
      orientations.style.opacity = '1';
      btnOrient.classList.add('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">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 100%;
      padding: 10px;
      user-select: none;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      margin-bottom: 6px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
    }
    .btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
    }
    input[type="range"] {
      flex: 1;
      accent-color: #2563eb;
      cursor: pointer;
    }
    .angle-badge {
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      font-size: 14px;
      min-width: 32px;
      color: #2563eb;
    }
    .svg-container {
      width: 100%;
      max-width: 440px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn" id="playBtn" aria-label="Play rotation">▶ Rotate</button>
    <div class="slider-wrap">
      <input type="range" id="angleSlider" min="0" max="90" value="90" step="1">
      <span class="angle-badge" id="angleText">90°</span>
    </div>
    <button class="btn" id="resetBtn">0°</button>
    <button class="btn active" id="maxBtn">90°</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 420 380" id="graph">
      <defs>
        
        <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
          <path d="M 30 0 L 0 0 0 30" fill="none" stroke="#f1f5f9" stroke-width="1.2"/>
        </pattern>
        
        <marker id="arrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#94a3b8"/>
        </marker>
      </defs>

      
      <rect x="15" y="10" width="390" height="360" fill="url(#grid)" />

      
      
      
      <line x1="30" y1="310" x2="395" y2="310" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)"/>
      <line x1="165" y1="355" x2="165" y2="25" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)"/>

      
      <text x="390" y="325" font-size="12" fill="#64748b" font-weight="600">x</text>
      <text x="150" y="35" font-size="12" fill="#64748b" font-weight="600">y</text>

      
      <text x="255" y="325" font-size="10" fill="#94a3b8" text-anchor="middle">3</text>
      <text x="345" y="325" font-size="10" fill="#94a3b8" text-anchor="middle">6</text>
      <text x="135" y="325" font-size="10" fill="#94a3b8" text-anchor="middle">-1</text>
      <text x="75" y="325" font-size="10" fill="#94a3b8" text-anchor="middle">-3</text>

      <text x="153" y="284" font-size="10" fill="#94a3b8" text-anchor="end">1</text>
      <text x="153" y="224" font-size="10" fill="#94a3b8" text-anchor="end">3</text>
      <text x="153" y="134" font-size="10" fill="#94a3b8" text-anchor="end">6</text>

      
      <circle cx="165" cy="310" r="3.5" fill="#475569"/>
      <text x="157" y="325" font-size="11" fill="#475569" font-weight="600">O</text>

      
      <polygon points="255,280 345,280 255,220" fill="#3b82f6" fill-opacity="0.08" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="3,3"/>

      
      
      
      
      <path d="M 255 280 A 94.868 94.868 0 0 0 135 220" fill="none" stroke="#60a5fa" stroke-width="1.5" stroke-dasharray="4,4"/>
      
      <path d="M 345 280 A 182.483 182.483 0 0 0 135 130" fill="none" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="4,4"/>

      
      <line x1="165" y1="310" x2="255" y2="280" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2,2"/>
      <line id="rayOJRot" x1="165" y1="310" x2="135" y2="220" stroke="#2563eb" stroke-width="1.5"/>

      
      <path id="angleArc" fill="none" stroke="#2563eb" stroke-width="2"/>
      <text id="angleIndicator" x="188" y="270" font-size="11" font-weight="700" fill="#2563eb">90°</text>

      
      <polygon id="rotatedPoly" points="135,220 135,130 75,220" fill="#2563eb" fill-opacity="0.25" stroke="#2563eb" stroke-width="2.5" stroke-linejoin="round"/>

      
      <circle id="dotJ" cx="135" cy="220" r="4.5" fill="#2563eb"/>
      <circle id="dotK" cx="135" cy="130" r="4.5" fill="#2563eb"/>
      <circle id="dotL" cx="75" cy="220" r="4" fill="#2563eb"/>

      
      <text x="255" y="297" font-size="11" font-weight="600" fill="#64748b" text-anchor="middle">J(3,1)</text>
      <text x="350" y="297" font-size="11" font-weight="600" fill="#64748b" text-anchor="middle">K(6,1)</text>

      
      <g transform="translate(300, 268)">
        <rect x="-18" y="-9" width="36" height="16" rx="4" fill="#ffffff" stroke="#94a3b8" stroke-width="1"/>
        <text x="0" y="3" font-size="10" font-weight="700" fill="#475569" text-anchor="middle">d = 3</text>
      </g>

      
      <text id="labelJ" x="135" y="220" font-size="11" font-weight="700" fill="#1d4ed8">J'(-1,3)</text>
      <text id="labelK" x="135" y="130" font-size="11" font-weight="700" fill="#1d4ed8">K'(-1,6)</text>

      
      <g id="badgeJKPrime">
        <rect x="-18" y="-9" width="36" height="16" rx="4" fill="#eff6ff" stroke="#2563eb" stroke-width="1.2"/>
        <text x="0" y="3" font-size="10" font-weight="700" fill="#1d4ed8" text-anchor="middle">d = 3</text>
      </g>
    </svg>
  </div>

  <script>
    const originX = 165;
    const originY = 310;
    const scale = 30; // 30px per unit

    // Original Triangle Vertices in Math coords
    const J = { x: 3, y: 1 };
    const K = { x: 6, y: 1 };
    const L = { x: 3, y: 3 };

    function rotatePt(pt, deg) {
      const rad = (deg * Math.PI) / 180;
      const rx = pt.x * Math.cos(rad) - pt.y * Math.sin(rad);
      const ry = pt.x * Math.sin(rad) + pt.y * Math.cos(rad);
      return {
        x: rx,
        y: ry,
        px: originX + rx * scale,
        py: originY - ry * scale
      };
    }

    const slider = document.getElementById('angleSlider');
    const angleText = document.getElementById('angleText');
    const playBtn = document.getElementById('playBtn');
    const resetBtn = document.getElementById('resetBtn');
    const maxBtn = document.getElementById('maxBtn');

    const rotatedPoly = document.getElementById('rotatedPoly');
    const dotJ = document.getElementById('dotJ');
    const dotK = document.getElementById('dotK');
    const dotL = document.getElementById('dotL');
    const labelJ = document.getElementById('labelJ');
    const labelK = document.getElementById('labelK');
    const rayOJRot = document.getElementById('rayOJRot');
    const angleArc = document.getElementById('angleArc');
    const angleIndicator = document.getElementById('angleIndicator');
    const badgeJKPrime = document.getElementById('badgeJKPrime');

    function updateDiagram(deg) {
      angleText.textContent = `${Math.round(deg)}°`;

      const rJ = rotatePt(J, deg);
      const rK = rotatePt(K, deg);
      const rL = rotatePt(L, deg);

      rotatedPoly.setAttribute('points', `${rJ.px},${rJ.py} ${rK.px},${rK.py} ${rL.px},${rL.py}`);
      dotJ.setAttribute('cx', rJ.px);
      dotJ.setAttribute('cy', rJ.py);
      dotK.setAttribute('cx', rK.px);
      dotK.setAttribute('cy', rK.py);
      dotL.setAttribute('cx', rL.px);
      dotL.setAttribute('cy', rL.py);

      rayOJRot.setAttribute('x2', rJ.px);
      rayOJRot.setAttribute('y2', rJ.py);

      // Dynamic labels positioning
      if (deg > 45) {
        labelJ.setAttribute('x', rJ.px + 10);
        labelJ.setAttribute('y', rJ.py + 4);
        labelJ.setAttribute('text-anchor', 'start');
        labelJ.textContent = `J'(${rJ.x.toFixed(1).replace('.0','')}, ${rJ.y.toFixed(1).replace('.0','')})`;

        labelK.setAttribute('x', rK.px + 10);
        labelK.setAttribute('y', rK.py + 4);
        labelK.setAttribute('text-anchor', 'start');
        labelK.textContent = `K'(${rK.x.toFixed(1).replace('.0','')}, ${rK.y.toFixed(1).replace('.0','')})`;
      } else {
        labelJ.setAttribute('x', rJ.px);
        labelJ.setAttribute('y', rJ.py - 10);
        labelJ.setAttribute('text-anchor', 'middle');
        labelJ.textContent = `J'`;

        labelK.setAttribute('x', rK.px);
        labelK.setAttribute('y', rK.py - 10);
        labelK.setAttribute('text-anchor', 'middle');
        labelK.textContent = `K'`;
      }

      // Distance badge along J'K'
      const midX = (rJ.px + rK.px) / 2;
      const midY = (rJ.py + rK.py) / 2;
      const perpX = deg > 45 ? -24 : 0;
      const perpY = deg > 45 ? 0 : -18;
      badgeJKPrime.setAttribute('transform', `translate(${midX + perpX}, ${midY + perpY})`);

      // Origin rotation arc
      const rArc = 38;
      const startAngleRad = Math.atan2(1, 3); // initial ray to J(3,1)
      const currentAngleRad = startAngleRad + (deg * Math.PI) / 180;
      const sx = originX + rArc * Math.cos(startAngleRad);
      const sy = originY - rArc * Math.sin(startAngleRad);
      const ex = originX + rArc * Math.cos(currentAngleRad);
      const ey = originY - rArc * Math.sin(currentAngleRad);

      if (deg > 1) {
        angleArc.setAttribute('d', `M ${sx} ${sy} A ${rArc} ${rArc} 0 0 0 ${ex} ${ey}`);
        angleArc.style.display = 'inline';
        angleIndicator.style.display = 'inline';
        const midRad = startAngleRad + ((deg / 2) * Math.PI) / 180;
        angleIndicator.setAttribute('x', originX + (rArc + 14) * Math.cos(midRad));
        angleIndicator.setAttribute('y', originY - (rArc + 14) * Math.sin(midRad) + 4);
        angleIndicator.textContent = `${Math.round(deg)}°`;
      } else {
        angleArc.style.display = 'none';
        angleIndicator.style.display = 'none';
      }

      resetBtn.classList.toggle('active', deg === 0);
      maxBtn.classList.toggle('active', deg === 90);
    }

    let isPlaying = false;
    let animId = null;

    function playAnimation() {
      if (isPlaying) {
        cancelAnimationFrame(animId);
        isPlaying = false;
        playBtn.textContent = '▶ Rotate';
        return;
      }

      isPlaying = true;
      playBtn.textContent = '⏸ Pause';

      if (parseFloat(slider.value) >= 90) {
        slider.value = 0;
      }

      let lastTime = performance.now();
      function step(now) {
        const dt = (now - lastTime) / 1000;
        lastTime = now;
        let val = parseFloat(slider.value) + dt * 45; // 90 deg in 2s
        if (val >= 90) {
          val = 90;
          slider.value = val;
          updateDiagram(val);
          isPlaying = false;
          playBtn.textContent = '▶ Rotate';
          return;
        }
        slider.value = val;
        updateDiagram(val);
        animId = requestAnimationFrame(step);
      }
      animId = requestAnimationFrame(step);
    }

    slider.addEventListener('input', (e) => {
      if (isPlaying) {
        cancelAnimationFrame(animId);
        isPlaying = false;
        playBtn.textContent = '▶ Rotate';
      }
      updateDiagram(parseFloat(e.target.value));
    });

    playBtn.addEventListener('click', playAnimation);

    resetBtn.addEventListener('click', () => {
      if (isPlaying) { cancelAnimationFrame(animId); isPlaying = false; playBtn.textContent = '▶ Rotate'; }
      slider.value = 0;
      updateDiagram(0);
    });

    maxBtn.addEventListener('click', () => {
      if (isPlaying) { cancelAnimationFrame(animId); isPlaying = false; playBtn.textContent = '▶ Rotate'; }
      slider.value = 90;
      updateDiagram(90);
    });

    // Initial render
    updateDiagram(90);
  </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>Isometry vs Non-Isometry</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100%;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #1e2945;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      user-select: none;
      transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    }
    .btn:hover { background: #f3f4f6; }
    .btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .btn.active:hover {
      background: #1d4ed8;
    }

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

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

    .card-panel {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .card-header {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 4px;
      text-align: center;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      margin-top: 6px;
      text-align: center;
      white-space: nowrap;
    }
    .badge-ref { background: #e0f2fe; color: #0369a1; }
    .badge-ok  { background: #dcfce7; color: #15803d; }
    .badge-no  { background: #fee2e2; color: #b91c1c; }

    svg {
      width: 100%;
      height: 130px;
      display: block;
    }

    .tri-orig { fill: rgba(37, 99, 235, 0.15); stroke: #2563eb; stroke-width: 2; }
    .tri-iso  { fill: rgba(22, 163, 74, 0.18); stroke: #16a34a; stroke-width: 2; }
    .tri-non  { fill: rgba(220, 38, 38, 0.15); stroke: #dc2626; stroke-width: 2; stroke-dasharray: 4,3; }

    .val-label {
      font-size: 11px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .ang-label {
      font-size: 9px;
      font-weight: 600;
      fill: #4b5563;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .v-tag {
      font-size: 11px;
      font-weight: 800;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .ghost {
      fill: none;
      stroke: #9ca3af;
      stroke-width: 1.5;
      stroke-dasharray: 3,3;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btnSide" onclick="setMode('side')">Side-by-Side</button>
    <button class="btn" id="btnOverlay" onclick="setMode('overlay')">Overlay Motion</button>
  </div>

  <div class="grid" id="mainGrid">
    
    <div class="card-panel">
      <div class="card-header">Original △ABC</div>
      <svg viewBox="0 0 160 130">
        
        <polygon class="tri-orig" points="35,49 35,115 123,115" />
        <rect x="35" y="105" width="10" height="10" fill="none" stroke="#2563eb" stroke-width="1.5" />
        
        
        <text class="v-tag" x="24" y="47">A</text>
        <text class="v-tag" x="24" y="117">B</text>
        <text class="v-tag" x="133" y="117">C</text>

        
        <text class="val-label" x="23" y="82">3</text>
        <text class="val-label" x="79" y="124">4</text>
        <text class="val-label" x="87" y="74">5</text>

        
        <text class="ang-label" x="46" y="65">53°</text>
        <text class="ang-label" x="102" y="108">37°</text>
        <text class="ang-label" x="48" y="103">90°</text>
      </svg>
      <div class="badge badge-ref">Base Reference</div>
    </div>

    
    <div class="card-panel">
      <div class="card-header">Isometry △A'B'C'</div>
      <svg viewBox="0 0 160 130" id="svgIso">
        
        <polygon class="ghost" id="isoGhost" points="35,49 35,115 123,115" opacity="0" />

        
        <g id="isoGroup" transform="translate(6, -2) rotate(-20, 79, 82)">
          <polygon class="tri-iso" points="35,49 35,115 123,115" />
          <rect x="35" y="105" width="10" height="10" fill="none" stroke="#16a34a" stroke-width="1.5" />

          <text class="v-tag" x="23" y="47">A'</text>
          <text class="v-tag" x="23" y="117">B'</text>
          <text class="v-tag" x="134" y="117">C'</text>

          <text class="val-label" x="23" y="82">3</text>
          <text class="val-label" x="79" y="124">4</text>
          <text class="val-label" x="87" y="74">5</text>

          <text class="ang-label" x="46" y="65">53°</text>
          <text class="ang-label" x="102" y="108">37°</text>
          <text class="ang-label" x="48" y="103">90°</text>
        </g>
      </svg>
      <div class="badge badge-ok">✓ Distance & Angles Preserved</div>
    </div>

    
    <div class="card-panel">
      <div class="card-header">Non-Isometry △A''B''C''</div>
      <svg viewBox="0 0 160 130">
        
        <polygon class="tri-non" points="28,43 28,115 136,115" />
        <rect x="28" y="105" width="10" height="10" fill="none" stroke="#dc2626" stroke-width="1.5" />

        <text class="v-tag" x="17" y="41">A''</text>
        <text class="v-tag" x="17" y="117">B''</text>
        <text class="v-tag" x="147" y="117">C''</text>

        
        <text class="val-label" x="17" y="79">4</text>
        <text class="val-label" x="82" y="124">6</text>
        <text class="val-label" x="92" y="72">7.2</text>

        <text class="ang-label" x="40" y="60">56°</text>
        <text class="ang-label" x="114" y="108">34°</text>
        <text class="ang-label" x="41" y="103">90°</text>
      </svg>
      <div class="badge badge-no">✗ Not Rigid: Distances Altered</div>
    </div>
  </div>

  <script>
    let mode = 'side';
    const isoGroup = document.getElementById('isoGroup');
    const isoGhost = document.getElementById('isoGhost');
    const btnSide = document.getElementById('btnSide');
    const btnOverlay = document.getElementById('btnOverlay');

    function setMode(m) {
      mode = m;
      btnSide.classList.toggle('active', m === 'side');
      btnOverlay.classList.toggle('active', m === 'overlay');

      if (m === 'overlay') {
        isoGhost.style.opacity = '1';
        isoGhost.style.transition = 'opacity 0.4s ease';
        isoGroup.style.transition = 'transform 1s cubic-bezier(0.4, 0, 0.2, 1)';
        isoGroup.setAttribute('transform', 'translate(0, 0) rotate(0, 79, 82)');
      } else {
        isoGhost.style.opacity = '0';
        isoGhost.style.transition = 'opacity 0.4s ease';
        isoGroup.style.transition = 'transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
        isoGroup.setAttribute('transform', 'translate(6, -2) rotate(-20, 79, 82)');
      }
    }
  </script>
</body>
</html>

生活中的对称现象与轴对称的概念

轴对称图形与两个图形成轴对称的区别与联系

轴对称的性质：对应点连线被对称轴垂直平分

轴对称中对应线段相等与对应角相等

根据成轴对称的两个图形确定对称轴

自然界中的轴对称：动植物与晶体构造

人文建筑与艺术设计中的轴对称

标志、车标与徽标中的轴对称分析

用折纸实验探究多条对称轴的图形

轴对称与轴对称图形的辨析与综合反思

math

图形的轴对称：概念、性质与生活中的对称

作一个点关于已知直线的对称点

作线段关于直线的对称线段

作三角形关于直线的对称三角形

作多边形关于任意斜直线的对称图形

直角坐标系中关于 x 轴对称的点的坐标特征

直角坐标系中关于 y 轴对称的点的坐标特征

关于平行于坐标轴的直线对称的坐标推算

在直角坐标系中利用坐标画轴对称图形

将军饮马问题与轴对称求线段和最值

轴对称作图的规范性与综合应用

轴对称作图与直角坐标系中的轴对称

等腰三角形的轴对称性与三线合一

等边三角形的三条对称轴与中心特征

矩形的两条对称轴与垂直平分线特征

菱形的对称轴与对角线所在直线

正方形的四条对称轴与综合对称性

正多边形的边数与对称轴条数的规律

圆的无限条对称轴与垂径定理的本质

等腰梯形的轴对称性与性质探究

常见平面几何图形对称轴条数大比拼

利用图形的轴对称性质进行几何证明与计算

常见几何图形的轴对称性质深化

生活中的平移现象与平移的数学定义

平移的性质：对应点连线平行（或共线）且相等

平移前后图形形状、大小及对应角的关系

按指定方向和距离作三角形的平移图形

直角坐标系中点的左右平移与横坐标变化

直角坐标系中点的上下平移与纵坐标变化

平面直角坐标系中图形的两次连续平移（斜向平移）

工程建筑、传送带与现代交通中的平移应用

利用平移转化法求不规则图形的周长与面积

平移在平行线性质与几何证明中的应用

图形的平移：概念、性质与坐标变换

生活中的旋转现象与旋转的三要素

旋转的基本性质：对应点到中心距离相等与旋转角相等

旋转变换中图形的全等性与对应线段角关系

作一个点绕旋转中心旋转给定角度后的点

作线段与三角形绕定点旋转后的图形

旋转构造中的等腰三角形模型与角平分线

共顶点等边三角形（或等腰直角三角形）的旋转与手拉手模型

直角坐标系中点绕原点顺时针与逆时针旋转 90° 的坐标规律

旋转中的动点轨迹与线段最值探究

旋转性质在综合几何证明中的转化策略

图形的旋转：概念、旋转三要素与性质

中心对称的概念：旋转 180° 的特殊旋转变换

中心对称的性质：对应点连线经过对称中心且被其平分

中心对称图形的概念与判定方法

作点、线段和三角形关于定点的中心对称图形

线段与平行四边形的中心对称性探索

正多边形的中心对称性：偶数边正多边形的对称中心

圆的中心对称性与圆心特征

直角坐标系中关于原点对称的点的坐标变化

自然界与生活中的中心对称图形欣赏与应用

轴对称图形与中心对称图形的综合对比与辨析

中心对称与中心对称图形

平移、旋转与轴对称的共性（全等变换）与特征对比

图形的连续变换：平移与轴对称的复合

运用轴对称进行剪纸与徽章图案设计

运用平移设计花边与连续二方连续纹样

运用旋转设计万花筒与旋转对称艺术图案

平面镶嵌原理：用单一种类或多种正多边形密铺平面

埃舍尔式图形变换与创意平面密铺设计

直角坐标系中图形运动的代数表达综合

图案设计成果展评与背后的几何变换原理解析

全等变换单元思维导图与方法归纳

图形变换的综合应用与平面图案设计

Line Symmetry, Rotational Symmetry, and Point Symmetry

Translations, Reflections, and Rotations on the Coordinate Plane

Homothetic Dilations and Scale Factors from a Center

Compositions of Transformations and Glide Reflections

Transformations, Symmetries, and Dilations in the Plane

相似三角形性质：对应高的比等于相似比

相似三角形性质：对应中线与对应角平分线的比等于相似比

相似三角形周长比等于相似比的严密证明与应用

相似三角形面积比等于相似比的平方的严密证明与计算

双垂直（母子三角形）模型与射影定理推导

一线三等角（K 字型）相似模型解析与应用

旋转相似与大小手拉手几何模型

相似三角形中的辅助线构造：做平行线与截长补短

相似三角形在圆中的应用：相交弦与切割线性质

相似三角形性质的综合几何代数化求解

相似三角形的性质定理与经典几何模型

Transformações Isométricas: Conceito

Translação de Figuras Planas

Reflexão de Figuras Planas

Rotação de Figuras Planas

Composição de Transformações Isométricas

Transformações Homotéticas: Homotetia

Transformações Geométricas no Plano

解直角三角形的概念与边角五元素关系

基本类型一：已知两边（两直角边或一直角边一斜边）解直角三角形

基本类型二：已知一边一锐角解直角三角形

仰角与俯角问题：测量建筑物与无人机高度

方向角（方位角）问题：航海避礁与航空飞行定位

坡度与坡角问题：堤坝防洪与公路铁路工程坡比计算

化一般三角形为直角三角形：作高线（分割或补形）解题策略

双直角三角形（背靠背与母子型）列方程联合求解

跨学科应用：物理力的正交分解与日地月天文距离间接估算

图形的变化与相似全单元体系建构与高中几何衔接

解直角三角形及其在实际工程测量中的应用

Understanding Enlargement as a Transformation

Scale Factor in Enlargement

Enlargement on the Cartesian Plane

What Stays the Same and What Changes in Enlargement

The Relationship Between Scale Factor and Area

Using Dynamic Geometry Software for Enlargement

Enlargement Transformations of Shapes and Objects

Semelhança de Triângulos

Congruência de Triângulos

Casos de Congruência: LAL, ALA e LLL

Transformações em Fractais

Transformações em Obras de Arte e Arquitetura

Semelhança, Congruência e Aplicações de Transformações

关于 x 轴和 y 轴对称的点的坐标变化规律

关于原点对称（中心对称）的点的坐标变化规律

以坐标轴为对称轴的多边形对称图形绘制与顶点坐标变换

沿单一坐标轴方向平移时点的坐标变化规律（“左减右加，上加下减”）

多边形沿坐标轴方向平移一定距离后图形的顶点坐标确定

多边形依次沿两个坐标轴方向平移后的复合平移关系与顶点坐标

以原点为位似中心时坐标按倍数放缩与位似图形的生成

图形与坐标单元体系总结与尺规作图前瞻衔接

图形的运动与坐标变换规律

OGM.10.GEO.6

OGM.10.GEO.6

Aligned learning resources

Related diagrams