<!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: center;
      padding: 12px;
      gap: 12px;
    }

    .main-layout {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 640px;
    }

    .graph-container {
      flex: 1 1 260px;
      max-width: 300px;
      aspect-ratio: 1 / 1;
      position: relative;
    }

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

    .math-card {
      flex: 1 1 240px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 14px;
    }

    .math-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'Cambria Math', 'Times New Roman', serif;
      font-size: 15px;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .matrix-bracket {
      display: inline-flex;
      position: relative;
      padding: 2px 6px;
      border-left: 2px solid #1e2945;
      border-right: 2px solid #1e2945;
      border-radius: 4px;
    }

    .matrix-grid {
      display: grid;
      grid-template-columns: auto auto;
      gap: 2px 8px;
      text-align: center;
    }

    .vector-grid {
      display: grid;
      grid-template-rows: auto auto;
      gap: 2px;
      text-align: center;
    }

    .calc-row {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      line-height: 1.4;
    }

    .highlight-x { color: #2563eb; font-weight: 600; }
    .highlight-y { color: #16a34a; font-weight: 600; }

    .controls {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #fff;
      color: #1e2945;
      border-radius: 6px;
      cursor: pointer;
      user-select: none;
      transition: background 0.2s;
    }

    .btn:hover { background: #f1f5f9; }
    .btn.active {
      background: #2563eb;
      color: #fff;
      border-color: #2563eb;
    }

    .arc-path {
      stroke-dasharray: 6 6;
      animation: dash 1s linear infinite;
    }

    @keyframes dash {
      to { stroke-dashoffset: -12; }
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btn1" onclick="setStep(1)">1. Input v</button>
    <button class="btn" id="btn2" onclick="setStep(2)">2. Multiply A·v</button>
    <button class="btn" id="btn3" onclick="setStep(3)">3. Output Av</button>
  </div>

  <div class="main-layout">
    
    <div class="graph-container">
      <svg viewBox="0 0 320 320" id="plane">
        <defs>
          <marker id="arrow-blue" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
            <polygon points="0 1, 8 4, 0 7" fill="#2563eb" />
          </marker>
          <marker id="arrow-green" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
            <polygon points="0 1, 8 4, 0 7" fill="#16a34a" />
          </marker>
          <marker id="arrow-arc" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
            <polygon points="0 1, 6 3, 0 5" fill="#f59e0b" />
          </marker>
        </defs>

        
        <g id="grid-lines" stroke="#e2e8f0" stroke-width="1"></g>

        
        <line x1="10" y1="280" x2="310" y2="280" stroke="#94a3b8" stroke-width="2" />
        <line x1="40" y1="310" x2="40" y2="10" stroke="#94a3b8" stroke-width="2" />

        
        <text x="306" y="296" font-size="13" font-weight="600" fill="#64748b">x</text>
        <text x="24" y="20" font-size="13" font-weight="600" fill="#64748b">y</text>

        
        <g id="axis-ticks" font-size="11" fill="#94a3b8" text-anchor="middle"></g>

        
        <path id="trans-arc" d="M 160 240 Q 220 200 240 80" fill="none" stroke="#f59e0b" stroke-width="2.5" class="arc-path" marker-end="url(#arrow-arc)" style="opacity: 0; transition: opacity 0.4s ease;" />

        
        <line id="vec-v" x1="40" y1="280" x2="160" y2="240" stroke="#2563eb" stroke-width="3.5" marker-end="url(#arrow-blue)" style="transition: opacity 0.3s ease;" />
        <circle id="pt-v" cx="160" cy="240" r="4.5" fill="#2563eb" />
        <text id="lbl-v" x="168" y="254" font-size="12" font-weight="700" fill="#2563eb">v = (3, 1)</text>

        
        <g id="group-av" style="opacity: 0; transition: opacity 0.4s ease;">
          <line x1="40" y1="280" x2="240" y2="80" stroke="#16a34a" stroke-width="4" marker-end="url(#arrow-green)" />
          <circle cx="240" cy="80" r="5" fill="#16a34a" />
          <text x="210" y="68" font-size="12" font-weight="700" fill="#16a34a">Av = (5, 5)</text>
        </g>
      </svg>
    </div>

    
    <div class="math-card">
      <div class="math-row">
        <span style="font-weight: 700; font-family: sans-serif; font-size: 13px; color: #64748b;">MATRIX A:</span>
        <div class="matrix-bracket">
          <div class="matrix-grid">
            <span>2</span><span>-1</span>
            <span>1</span><span>2</span>
          </div>
        </div>
      </div>

      <div class="calc-row" id="calc-step-1">
        <div class="math-row">
          <span>A · v = </span>
          <div class="matrix-bracket">
            <div class="matrix-grid">
              <span>2</span><span>-1</span>
              <span>1</span><span>2</span>
            </div>
          </div>
          <div class="matrix-bracket" style="border-color: #2563eb;">
            <div class="vector-grid highlight-x">
              <span>3</span>
              <span>1</span>
            </div>
          </div>
        </div>
      </div>

      <div class="calc-row" id="calc-step-2" style="opacity: 0.35; transition: opacity 0.3s;">
        <div style="font-size: 13px; line-height: 1.6; font-family: monospace;">
          x' = 2(<span class="highlight-x">3</span>) + (-1)(<span class="highlight-x">1</span>) = <b>5</b><br>
          y' = 1(<span class="highlight-x">3</span>) + 2(<span class="highlight-x">1</span>) = <b>5</b>
        </div>
      </div>

      <div class="calc-row" id="calc-step-3" style="opacity: 0.35; transition: opacity 0.3s; border-color: #86efac; background: #f0fdf4;">
        <div class="math-row">
          <span>Result: </span>
          <span style="font-weight: 700; color: #16a34a;">Av = (5, 5)</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Grid generation: X and Y from -1 to 7
    // Mapping: x=-1 -> px=0, x=0 -> px=40, x=7 -> px=320 (dx=40px/unit)
    // Mapping: y=-1 -> py=320, y=0 -> py=280, y=7 -> py=0 (dy=40px/unit)
    const gridG = document.getElementById('grid-lines');
    const ticksG = document.getElementById('axis-ticks');

    for (let i = -1; i <= 7; i++) {
      const px = 40 + i * 40;
      const py = 280 - i * 40;

      // Vertical grid
      const vLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      vLine.setAttribute('x1', px); vLine.setAttribute('y1', 0);
      vLine.setAttribute('x2', px); vLine.setAttribute('y2', 320);
      gridG.appendChild(vLine);

      // Horizontal grid
      const hLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      hLine.setAttribute('x1', 0); hLine.setAttribute('y1', py);
      hLine.setAttribute('x2', 320); hLine.setAttribute('y2', py);
      gridG.appendChild(hLine);

      // X tick label
      if (i >= 1 && i <= 7) {
        const tx = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        tx.setAttribute('x', px);
        tx.setAttribute('y', 295);
        tx.textContent = i;
        ticksG.appendChild(tx);
      }

      // Y tick label
      if (i >= 1 && i <= 7) {
        const ty = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        ty.setAttribute('x', 26);
        ty.setAttribute('y', py + 4);
        ty.textContent = i;
        ticksG.appendChild(ty);
      }
    }

    let currentStep = 1;

    function setStep(step) {
      currentStep = step;
      document.querySelectorAll('.btn').forEach((b, idx) => {
        b.classList.toggle('active', idx + 1 === step);
      });

      const arc = document.getElementById('trans-arc');
      const avGroup = document.getElementById('group-av');
      const s2 = document.getElementById('calc-step-2');
      const s3 = document.getElementById('calc-step-3');

      if (step === 1) {
        arc.style.opacity = '0';
        avGroup.style.opacity = '0';
        s2.style.opacity = '0.35';
        s3.style.opacity = '0.35';
      } else if (step === 2) {
        arc.style.opacity = '1';
        avGroup.style.opacity = '0';
        s2.style.opacity = '1';
        s3.style.opacity = '0.35';
      } else if (step === 3) {
        arc.style.opacity = '0.5';
        avGroup.style.opacity = '1';
        s2.style.opacity = '1';
        s3.style.opacity = '1';
      }
    }

    // Auto cycle through steps calmly
    let stepTimer = setInterval(() => {
      let next = (currentStep % 3) + 1;
      setStep(next);
    }, 3800);

    document.querySelectorAll('.btn').forEach(btn => {
      btn.addEventListener('click', () => clearInterval(stepTimer));
    });
  </script>
</body>
</html>

Matrix Transformations of Vectors

<!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;
      padding: 10px 12px;
      user-select: none;
    }

    /* Header & Equation */
    .header {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }

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

    .math-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 14px;
      font-family: "Cambria Math", "Times New Roman", serif;
      font-size: 15px;
    }

    .matrix-wrap {
      display: inline-flex;
      align-items: center;
      position: relative;
      padding: 2px 5px;
    }
    .matrix-wrap::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 2px;
      border-left: 2px solid #1e2945;
      border-top: 2px solid #1e2945;
      border-bottom: 2px solid #1e2945;
      border-radius: 3px 0 0 3px;
    }
    .matrix-wrap::after {
      content: "";
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 2px;
      border-right: 2px solid #1e2945;
      border-top: 2px solid #1e2945;
      border-bottom: 2px solid #1e2945;
      border-radius: 0 3px 3px 0;
    }

    .matrix-grid {
      display: grid;
      grid-template-columns: repeat(2, 18px);
      gap: 2px 6px;
      text-align: center;
      font-weight: 600;
    }
    .vector-grid {
      display: grid;
      grid-template-columns: 18px;
      gap: 2px;
      text-align: center;
      font-weight: 700;
    }

    .vec-in { color: #2563eb; }
    .vec-out { color: #ea580c; }
    .op { font-weight: 600; color: #64748b; }

    /* SVG Plane */
    .svg-container {
      width: 100%;
      max-width: 420px;
      position: relative;
      display: flex;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Stepper Controls */
    .controls {
      width: 100%;
      max-width: 420px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-top: 6px;
    }

    .tabs {
      display: flex;
      gap: 4px;
      flex: 1;
      justify-content: center;
    }

    .btn-tab {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 5px 9px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .btn-tab.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 2px 4px rgba(30,41,69,0.2);
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      font-weight: bold;
      transition: background 0.15s;
    }
    .nav-btn:hover { background: #f8fafc; }
    .nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    /* SVG Elements Transition */
    .fade-item {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .dimmed { opacity: 0.18; }
    .hidden { opacity: 0; pointer-events: none; }
    .highlighted { opacity: 1; }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">Polygon Transformation</div>
    <div class="math-card">
      
      <div class="matrix-wrap">
        <div class="matrix-grid">
          <span>0</span><span>-1</span>
          <span>1</span><span>0</span>
        </div>
      </div>
      <span class="op">×</span>
      
      <div class="matrix-wrap">
        <div class="vector-grid vec-in" id="mIn">
          <span>1</span>
          <span>0</span>
        </div>
      </div>
      <span class="op">=</span>
      
      <div class="matrix-wrap">
        <div class="vector-grid vec-out" id="mOut">
          <span>0</span>
          <span>1</span>
        </div>
      </div>
    </div>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 360 250">
      <defs>
        
        <marker id="arr" 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="#f97316"/>
        </marker>
        <marker id="axis-arr" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 2 L 6 5 L 0 8 z" fill="#94a3b8"/>
        </marker>
      </defs>

      
      
      
      
      <g stroke="#e2e8f0" stroke-width="1">
        <line x1="48" y1="35" x2="48" y2="240" />
        <line x1="92" y1="35" x2="92" y2="240" />
        <line x1="136" y1="35" x2="136" y2="240" />
        <line x1="224" y1="35" x2="224" y2="240" />
        <line x1="268" y1="35" x2="268" y2="240" />
        <line x1="312" y1="35" x2="312" y2="240" />

        <line x1="30" y1="229" x2="330" y2="229" />
        <line x1="30" y1="141" x2="330" y2="141" />
        <line x1="30" y1="97" x2="330" y2="97" />
        <line x1="30" y1="53" x2="330" y2="53" />
      </g>

      
      <g stroke="#94a3b8" stroke-width="1.5">
        
        <line x1="25" y1="185" x2="335" y2="185" marker-end="url(#axis-arr)"/>
        
        <line x1="180" y1="245" x2="180" y2="30" marker-end="url(#axis-arr)"/>
      </g>

      
      <g font-size="10" fill="#64748b" text-anchor="middle" font-family="system-ui">
        <text x="330" y="198" font-weight="600">x</text>
        <text x="170" y="38" font-weight="600">y</text>
        <text x="48" y="198">-3</text>
        <text x="92" y="198">-2</text>
        <text x="136" y="198">-1</text>
        <text x="224" y="198">1</text>
        <text x="268" y="198">2</text>
        <text x="312" y="198">3</text>
        <text x="170" y="145">1</text>
        <text x="170" y="101">2</text>
        <text x="170" y="57">3</text>
      </g>

      
      
      <path id="arcA" class="fade-item" d="M 224 185 A 44 44 0 0 0 180 141" fill="none" stroke="#f97316" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arr)"/>
      
      <path id="arcB" class="fade-item" d="M 268 185 A 88 88 0 0 0 180 97" fill="none" stroke="#f97316" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arr)"/>
      
      <path id="arcC" class="fade-item" d="M 224 97 A 98.39 98.39 0 0 0 92 141" fill="none" stroke="#f97316" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arr)"/>

      
      
      <polygon id="polyOrig" class="fade-item" points="224,185 268,185 224,97" fill="#3b82f6" fill-opacity="0.25" stroke="#2563eb" stroke-width="2" stroke-linejoin="round"/>
      
      <polygon id="polyTrans" class="fade-item" points="180,141 180,97 92,141" fill="#f97316" fill-opacity="0.3" stroke="#ea580c" stroke-width="2" stroke-linejoin="round"/>

      
      
      <g id="grpA" class="fade-item">
        <circle cx="224" cy="185" r="4.5" fill="#2563eb" stroke="#ffffff" stroke-width="1.5"/>
        <rect x="216" y="202" width="34" height="15" rx="3" fill="#ffffff" fill-opacity="0.9" stroke="#cbd5e1" stroke-width="0.7"/>
        <text x="233" y="213" font-size="9.5" font-weight="bold" fill="#2563eb" text-anchor="middle">A(1,0)</text>
      </g>
      
      <g id="grpAt" class="fade-item">
        <circle cx="180" cy="141" r="4.5" fill="#ea580c" stroke="#ffffff" stroke-width="1.5"/>
        <rect x="187" y="133" width="36" height="15" rx="3" fill="#ffffff" fill-opacity="0.9" stroke="#cbd5e1" stroke-width="0.7"/>
        <text x="205" y="144" font-size="9.5" font-weight="bold" fill="#ea580c" text-anchor="middle">A'(0,1)</text>
      </g>

      
      <g id="grpB" class="fade-item">
        <circle cx="268" cy="185" r="4.5" fill="#2563eb" stroke="#ffffff" stroke-width="1.5"/>
        <rect x="260" y="202" width="34" height="15" rx="3" fill="#ffffff" fill-opacity="0.9" stroke="#cbd5e1" stroke-width="0.7"/>
        <text x="277" y="213" font-size="9.5" font-weight="bold" fill="#2563eb" text-anchor="middle">B(2,0)</text>
      </g>
      
      <g id="grpBt" class="fade-item">
        <circle cx="180" cy="97" r="4.5" fill="#ea580c" stroke="#ffffff" stroke-width="1.5"/>
        <rect x="187" y="89" width="36" height="15" rx="3" fill="#ffffff" fill-opacity="0.9" stroke="#cbd5e1" stroke-width="0.7"/>
        <text x="205" y="100" font-size="9.5" font-weight="bold" fill="#ea580c" text-anchor="middle">B'(0,2)</text>
      </g>

      
      <g id="grpC" class="fade-item">
        <circle cx="224" cy="97" r="4.5" fill="#2563eb" stroke="#ffffff" stroke-width="1.5"/>
        <rect x="228" y="80" width="34" height="15" rx="3" fill="#ffffff" fill-opacity="0.9" stroke="#cbd5e1" stroke-width="0.7"/>
        <text x="245" y="91" font-size="9.5" font-weight="bold" fill="#2563eb" text-anchor="middle">C(1,2)</text>
      </g>
      
      <g id="grpCt" class="fade-item">
        <circle cx="92" cy="141" r="4.5" fill="#ea580c" stroke="#ffffff" stroke-width="1.5"/>
        <rect x="48" y="133" width="40" height="15" rx="3" fill="#ffffff" fill-opacity="0.9" stroke="#cbd5e1" stroke-width="0.7"/>
        <text x="68" y="144" font-size="9.5" font-weight="bold" fill="#ea580c" text-anchor="middle">C'(-2,1)</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="nav-btn" id="btnPrev" onclick="setStep(currStep - 1)">◀</button>
    <div class="tabs">
      <button class="btn-tab active" onclick="setStep(0)">Vertex A</button>
      <button class="btn-tab" onclick="setStep(1)">Vertex B</button>
      <button class="btn-tab" onclick="setStep(2)">Vertex C</button>
      <button class="btn-tab" onclick="setStep(3)">All</button>
    </div>
    <button class="nav-btn" id="btnNext" onclick="setStep(currStep + 1)">▶</button>
  </div>

  <script>
    let currStep = 0;
    const stepData = [
      { in: ['1','0'], out: ['0','1'] },
      { in: ['2','0'], out: ['0','2'] },
      { in: ['1','2'], out: ['-2','1'] },
      { in: ['x','y'], out: ['-y','x'] }
    ];

    function setStep(idx) {
      if (idx < 0 || idx > 3) return;
      currStep = idx;

      // Update Nav Buttons
      document.getElementById('btnPrev').disabled = (currStep === 0);
      document.getElementById('btnNext').disabled = (currStep === 3);

      // Update Tabs
      const tabs = document.querySelectorAll('.btn-tab');
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === currStep);
      });

      // Update Math Vector Display
      const mIn = document.getElementById('mIn');
      const mOut = document.getElementById('mOut');
      mIn.innerHTML = `<span>${stepData[idx].in[0]}</span><span>${stepData[idx].in[1]}</span>`;
      mOut.innerHTML = `<span>${stepData[idx].out[0]}</span><span>${stepData[idx].out[1]}</span>`;

      // Visual items
      const arcA = document.getElementById('arcA');
      const arcB = document.getElementById('arcB');
      const arcC = document.getElementById('arcC');

      const grpA = document.getElementById('grpA');
      const grpAt = document.getElementById('grpAt');
      const grpB = document.getElementById('grpB');
      const grpBt = document.getElementById('grpBt');
      const grpC = document.getElementById('grpC');
      const grpCt = document.getElementById('grpCt');

      const polyOrig = document.getElementById('polyOrig');
      const polyTrans = document.getElementById('polyTrans');

      if (currStep === 0) {
        arcA.className.baseVal = 'fade-item highlighted';
        arcB.className.baseVal = 'fade-item hidden';
        arcC.className.baseVal = 'fade-item hidden';

        grpA.className.baseVal = 'fade-item highlighted';
        grpAt.className.baseVal = 'fade-item highlighted';
        grpB.className.baseVal = 'fade-item dimmed';
        grpBt.className.baseVal = 'fade-item hidden';
        grpC.className.baseVal = 'fade-item dimmed';
        grpCt.className.baseVal = 'fade-item hidden';

        polyOrig.className.baseVal = 'fade-item dimmed';
        polyTrans.className.baseVal = 'fade-item hidden';
      } else if (currStep === 1) {
        arcA.className.baseVal = 'fade-item hidden';
        arcB.className.baseVal = 'fade-item highlighted';
        arcC.className.baseVal = 'fade-item hidden';

        grpA.className.baseVal = 'fade-item dimmed';
        grpAt.className.baseVal = 'fade-item hidden';
        grpB.className.baseVal = 'fade-item highlighted';
        grpBt.className.baseVal = 'fade-item highlighted';
        grpC.className.baseVal = 'fade-item dimmed';
        grpCt.className.baseVal = 'fade-item hidden';

        polyOrig.className.baseVal = 'fade-item dimmed';
        polyTrans.className.baseVal = 'fade-item hidden';
      } else if (currStep === 2) {
        arcA.className.baseVal = 'fade-item hidden';
        arcB.className.baseVal = 'fade-item hidden';
        arcC.className.baseVal = 'fade-item highlighted';

        grpA.className.baseVal = 'fade-item dimmed';
        grpAt.className.baseVal = 'fade-item hidden';
        grpB.className.baseVal = 'fade-item dimmed';
        grpBt.className.baseVal = 'fade-item hidden';
        grpC.className.baseVal = 'fade-item highlighted';
        grpCt.className.baseVal = 'fade-item highlighted';

        polyOrig.className.baseVal = 'fade-item dimmed';
        polyTrans.className.baseVal = 'fade-item hidden';
      } else {
        arcA.className.baseVal = 'fade-item highlighted';
        arcB.className.baseVal = 'fade-item highlighted';
        arcC.className.baseVal = 'fade-item highlighted';

        grpA.className.baseVal = 'fade-item highlighted';
        grpAt.className.baseVal = 'fade-item highlighted';
        grpB.className.baseVal = 'fade-item highlighted';
        grpBt.className.baseVal = 'fade-item highlighted';
        grpC.className.baseVal = 'fade-item highlighted';
        grpCt.className.baseVal = 'fade-item highlighted';

        polyOrig.className.baseVal = 'fade-item highlighted';
        polyTrans.className.baseVal = 'fade-item highlighted';
      }
    }

    // Initial setup
    setStep(0);
  </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">
  <title>Matrix-Vector Multiplication</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      min-height: 100%;
      background-color: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      user-select: none;
    }

    .stepper-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
      background: #ffffff;
      padding: 4px;
      border-radius: 20px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      border: 1px solid #e2e8f0;
    }

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

    .step-btn.active {
      background: #1e2945;
      color: #ffffff;
    }

    .play-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: #f1f5f9;
      color: #1e2945;
      border-radius: 50%;
      cursor: pointer;
      font-size: 11px;
      margin-left: 4px;
      transition: background 0.2s;
    }

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

    /* Equation layout */
    .equation-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: nowrap;
      max-width: 100%;
    }

    .operator {
      font-size: 24px;
      font-weight: 400;
      color: #94a3b8;
    }

    /* Matrix structures */
    .matrix-wrap {
      display: flex;
      position: relative;
    }

    .bracket {
      width: 8px;
      border: 2.5px solid #64748b;
      position: relative;
      transition: border-color 0.3s ease;
    }

    .bracket.left {
      border-right: none;
      border-radius: 6px 0 0 6px;
    }

    .bracket.right {
      border-left: none;
      border-radius: 0 6px 6px 0;
    }

    .matrix-grid {
      display: grid;
      gap: 8px 12px;
      padding: 8px 6px;
    }

    .grid-2x2 {
      grid-template-columns: repeat(2, 40px);
      grid-template-rows: repeat(2, 38px);
    }

    .grid-2x1 {
      grid-template-columns: 40px;
      grid-template-rows: repeat(2, 38px);
    }

    .grid-result {
      grid-template-columns: auto;
      grid-template-rows: repeat(2, 38px);
      min-width: 100px;
    }

    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Cambria Math", "KaTeX_Math", "Times New Roman", serif;
      font-style: italic;
      font-size: 20px;
      font-weight: 600;
      border-radius: 6px;
      color: #334155;
      transition: all 0.35s ease;
      background: transparent;
      padding: 0 4px;
      white-space: nowrap;
    }

    .cell-res {
      font-style: normal;
      font-size: 18px;
      justify-content: flex-start;
      padding: 0 10px;
    }

    .cell-res span.var {
      font-family: "Cambria Math", "KaTeX_Math", "Times New Roman", serif;
      font-style: italic;
    }

    .cell-res span.op {
      font-family: system-ui, sans-serif;
      font-style: normal;
      font-size: 15px;
      color: #94a3b8;
      margin: 0 3px;
    }

    /* Active Highlight States */
    /* Step 1: Teal (#008080) */
    .step-1 .row-top {
      background-color: rgba(0, 128, 128, 0.12);
      color: #008080;
      box-shadow: 0 0 0 1.5px #008080;
    }
    .step-1 .vec-active {
      background-color: rgba(0, 128, 128, 0.08);
      box-shadow: 0 0 0 1.5px rgba(0, 128, 128, 0.4);
    }
    .step-1 .bracket-res-top {
      border-color: #008080;
    }
    .step-1 .res-top {
      background-color: rgba(0, 128, 128, 0.14);
      color: #006666;
      box-shadow: 0 0 0 1.5px #008080;
    }

    /* Step 2: Coral (#e76f51) */
    .step-2 .row-bottom {
      background-color: rgba(231, 111, 81, 0.14);
      color: #e76f51;
      box-shadow: 0 0 0 1.5px #e76f51;
    }
    .step-2 .vec-active {
      background-color: rgba(231, 111, 81, 0.08);
      box-shadow: 0 0 0 1.5px rgba(231, 111, 81, 0.4);
    }
    .step-2 .bracket-res-bottom {
      border-color: #e76f51;
    }
    .step-2 .res-bottom {
      background-color: rgba(231, 111, 81, 0.14);
      color: #c44d32;
      box-shadow: 0 0 0 1.5px #e76f51;
    }

    /* Step 3: Full Highlight */
    .step-3 .row-top {
      background-color: rgba(0, 128, 128, 0.12);
      color: #008080;
      box-shadow: 0 0 0 1.5px #008080;
    }
    .step-3 .row-bottom {
      background-color: rgba(231, 111, 81, 0.14);
      color: #e76f51;
      box-shadow: 0 0 0 1.5px #e76f51;
    }
    .step-3 .res-top {
      background-color: rgba(0, 128, 128, 0.14);
      color: #006666;
      box-shadow: 0 0 0 1.5px #008080;
    }
    .step-3 .res-bottom {
      background-color: rgba(231, 111, 81, 0.14);
      color: #c44d32;
      box-shadow: 0 0 0 1.5px #e76f51;
    }

    /* Dynamic sweep connection indicator */
    .indicator-box {
      margin-top: 24px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 13px;
    }

    .badge-teal {
      background: rgba(0, 128, 128, 0.12);
      color: #008080;
    }

    .badge-coral {
      background: rgba(231, 111, 81, 0.14);
      color: #e76f51;
    }

    @media (max-width: 420px) {
      .grid-2x2 {
        grid-template-columns: repeat(2, 32px);
        grid-template-rows: repeat(2, 34px);
        gap: 4px 8px;
      }
      .grid-2x1 {
        grid-template-columns: 32px;
        grid-template-rows: repeat(2, 34px);
      }
      .grid-result {
        grid-template-rows: repeat(2, 34px);
        min-width: 85px;
      }
      .cell {
        font-size: 17px;
      }
      .cell-res {
        font-size: 15px;
        padding: 0 6px;
      }
      .operator {
        font-size: 20px;
      }
      .equation-container {
        gap: 6px;
      }
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button class="step-btn active" id="btn-0" onclick="setStep(0)">Row 1 · Teal</button>
    <button class="step-btn" id="btn-1" onclick="setStep(1)">Row 2 · Coral</button>
    <button class="step-btn" id="btn-2" onclick="setStep(2)">Combined</button>
    <button class="play-btn" id="play-btn" onclick="togglePlay()" title="Auto Play">▶</button>
  </div>

  
  <div id="diagram-root" class="equation-container step-1">
    
    
    <div class="matrix-wrap">
      <div class="bracket left"></div>
      <div class="matrix-grid grid-2x2">
        <div class="cell row-top">a</div>
        <div class="cell row-top">b</div>
        <div class="cell row-bottom">c</div>
        <div class="cell row-bottom">d</div>
      </div>
      <div class="bracket right"></div>
    </div>

    
    <div class="operator">·</div>

    
    <div class="matrix-wrap">
      <div class="bracket left"></div>
      <div class="matrix-grid grid-2x1">
        <div class="cell vec-active">x</div>
        <div class="cell vec-active">y</div>
      </div>
      <div class="bracket right"></div>
    </div>

    
    <div class="operator">=</div>

    
    <div class="matrix-wrap">
      <div class="bracket left bracket-res-top"></div>
      <div class="matrix-grid grid-result">
        <div class="cell cell-res res-top">
          <span class="var">a</span><span class="var">x</span><span class="op">+</span><span class="var">b</span><span class="var">y</span>
        </div>
        <div class="cell cell-res res-bottom">
          <span class="var">c</span><span class="var">x</span><span class="op">+</span><span class="var">d</span><span class="var">y</span>
        </div>
      </div>
      <div class="bracket right bracket-res-bottom"></div>
    </div>

  </div>

  
  <div class="indicator-box" id="indicator-text">
    <span class="badge badge-teal">[a, b] · [x, y]<sup>T</sup> → ax + by</span>
  </div>

  <script>
    let currentStep = 0;
    let autoPlayTimer = null;
    let isPlaying = false;

    const badges = [
      '<span class="badge badge-teal">[a, b] · [x, y]<sup>T</sup> → ax + by</span>',
      '<span class="badge badge-coral">[c, d] · [x, y]<sup>T</sup> → cx + dy</span>',
      '<span class="badge badge-teal">Top Row</span> + <span class="badge badge-coral">Bottom Row</span>'
    ];

    function setStep(index) {
      currentStep = index;
      const root = document.getElementById('diagram-root');
      root.className = 'equation-container step-' + (index + 1);

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

      document.getElementById('indicator-text').innerHTML = badges[index];
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const playBtn = document.getElementById('play-btn');
      if (isPlaying) {
        playBtn.textContent = '⏸';
        autoPlayTimer = setInterval(() => {
          setStep((currentStep + 1) % 3);
        }, 3200);
      } else {
        playBtn.textContent = '▶';
        clearInterval(autoPlayTimer);
      }
    }
  </script>
</body>
</html>

OGM.12.VEC.4

Aligned learning resources

Related diagrams