<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Plotting Complex Numbers</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 12px;
      user-select: none;
      overflow-x: hidden;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
    }
    .btn {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 13px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
    .btn:hover {
      background: #e2e8f0;
      color: #0f172a;
      border-color: #94a3b8;
    }
    .btn.active-blue {
      background: #1d4ed8;
      color: #ffffff;
      border-color: #1d4ed8;
      box-shadow: 0 2px 5px rgba(29, 78, 216, 0.3);
    }
    .btn.active-orange {
      background: #c2410c;
      color: #ffffff;
      border-color: #c2410c;
      box-shadow: 0 2px 5px rgba(194, 65, 12, 0.3);
    }
    .btn.active-all {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
      box-shadow: 0 2px 5px rgba(15, 23, 42, 0.3);
    }
    .btn-replay {
      padding: 6px 12px;
      font-size: 14px;
    }
    .diagram-wrapper {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
    }
    .axis {
      stroke: #475569;
      stroke-width: 2;
      stroke-linecap: round;
    }
    .axis-title {
      font-size: 13px;
      font-weight: 800;
      fill: #1e293b;
    }
    .axis-desc {
      font-size: 11px;
      font-weight: 600;
      fill: #64748b;
    }
    .tick-label {
      font-size: 11px;
      font-weight: 600;
      fill: #334155;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .trace-blue {
      stroke: #2563eb;
      stroke-width: 2.5;
      stroke-dasharray: 5 4;
      fill: none;
      stroke-linecap: round;
    }
    .trace-orange {
      stroke: #ea580c;
      stroke-width: 2.5;
      stroke-dasharray: 5 4;
      fill: none;
      stroke-linecap: round;
    }
    .point-title {
      font-size: 12px;
      font-weight: 700;
    }
    .point-sub {
      font-size: 11px;
      font-weight: 600;
    }
    .legend-bar {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin-top: 4px;
      font-size: 12px;
      font-weight: 600;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active-blue" id="btnZ" onclick="setMode('z')">
      <span style="display:inline-block; width:9px; height:9px; border-radius:50%; background:#2563eb;"></span>
      z = 3 + 2i
    </button>
    <button class="btn" id="btnW" onclick="setMode('w')">
      <span style="display:inline-block; width:9px; height:9px; border-radius:50%; background:#ea580c;"></span>
      w = -4 - 3i
    </button>
    <button class="btn" id="btnBoth" onclick="setMode('both')">All</button>
    <button class="btn btn-replay" id="btnPlay" onclick="replayAnimation()" title="Replay">↺ Replay</button>
  </div>

  <div class="diagram-wrapper">
    <svg viewBox="0 0 450 440" aria-label="Complex Plane Plot">
      <defs>
        
        <filter id="cardShadow" x="-10%" y="-15%" width="120%" height="135%">
          <feDropShadow dx="0" dy="1.5" stdDeviation="2" flood-color="#0f172a" flood-opacity="0.1" />
        </filter>
      </defs>

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

      
      <g id="axes">
        
        <line x1="28" y1="220" x2="415" y2="220" class="axis" />
        <polygon points="418,220 408,215 408,225" fill="#475569" />
        
        
        <line x1="225" y1="412" x2="225" y2="25" class="axis" />
        <polygon points="225,22 220,32 230,32" fill="#475569" />

        
        <text x="424" y="217" class="axis-title">Re</text>
        <text x="424" y="230" class="axis-desc">(Real)</text>
        
        <text x="225" y="14" class="axis-title" text-anchor="middle">Im</text>
      </g>

      
      <g id="tickLabels"></g>

      
      <circle cx="225" cy="220" r="3" fill="#64748b" />

      
      <g id="groupZ">
        <line id="lineZ_Re" x1="225" y1="220" x2="225" y2="220" class="trace-blue" />
        <line id="lineZ_Im" x1="333" y1="220" x2="333" y2="220" class="trace-blue" />
        
        
        <circle id="dotZ" cx="225" cy="220" r="5" fill="#2563eb" opacity="0" />
        
        
        <g id="markerZ" opacity="0">
          
          <circle cx="333" cy="148" r="6.5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
          
          
          <g filter="url(#cardShadow)">
            <rect x="275" y="96" width="126" height="42" rx="6" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1.5" />
          </g>
          <text x="338" y="113" text-anchor="middle" fill="#1d4ed8" class="point-title">z = 3 + 2i</text>
          <text x="338" y="129" text-anchor="middle" fill="#2563eb" class="point-sub">(Re: 3, Im: 2)</text>
        </g>
      </g>

      
      <g id="groupW">
        <line id="lineW_Re" x1="225" y1="220" x2="225" y2="220" class="trace-orange" />
        <line id="lineW_Im" x1="81" y1="220" x2="81" y2="220" class="trace-orange" />
        
        
        <circle id="dotW" cx="225" cy="220" r="5" fill="#ea580c" opacity="0" />
        
        
        <g id="markerW" opacity="0">
          
          <circle cx="81" cy="328" r="6.5" fill="#ea580c" stroke="#ffffff" stroke-width="2" />
          
          
          <g filter="url(#cardShadow)">
            <rect x="18" y="342" width="132" height="42" rx="6" fill="#fff7ed" stroke="#fed7aa" stroke-width="1.5" />
          </g>
          <text x="84" y="359" text-anchor="middle" fill="#c2410c" class="point-title">w = -4 - 3i</text>
          <text x="84" y="375" text-anchor="middle" fill="#ea580c" class="point-sub">(Re: -4, Im: -3)</text>
        </g>
      </g>
    </svg>
  </div>

  <script>
    // Grid Configuration
    const cx = 225;
    const cy = 220;
    const unit = 36; // 36px per unit
    const gridEl = document.getElementById('grid');
    const ticksEl = document.getElementById('tickLabels');

    // Generate grid & tick labels
    for (let i = -5; i <= 5; i++) {
      if (i === 0) continue;
      const xPos = cx + i * unit;
      const yPos = cy - i * unit;

      // Vertical grid lines
      const vLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      vLine.setAttribute('x1', xPos);
      vLine.setAttribute('y1', 35);
      vLine.setAttribute('x2', xPos);
      vLine.setAttribute('y2', 405);
      vLine.setAttribute('class', 'grid-line');
      gridEl.appendChild(vLine);

      // Horizontal grid lines
      const hLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      hLine.setAttribute('x1', 35);
      hLine.setAttribute('y1', yPos);
      hLine.setAttribute('x2', 415);
      hLine.setAttribute('y2', yPos);
      hLine.setAttribute('class', 'grid-line');
      gridEl.appendChild(hLine);

      // X-axis tick label
      const xText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      xText.setAttribute('x', xPos);
      xText.setAttribute('y', cy + 15);
      xText.setAttribute('class', 'tick-label');
      xText.textContent = i;
      ticksEl.appendChild(xText);

      // Y-axis tick label
      const yText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      yText.setAttribute('x', cx - 16);
      yText.setAttribute('y', yPos);
      yText.setAttribute('class', 'tick-label');
      yText.textContent = (i > 0 ? i : i) + 'i';
      ticksEl.appendChild(yText);
    }

    let currentMode = 'z';
    let animReqId = null;
    let startTime = null;

    // Elements
    const lineZ_Re = document.getElementById('lineZ_Re');
    const lineZ_Im = document.getElementById('lineZ_Im');
    const dotZ = document.getElementById('dotZ');
    const markerZ = document.getElementById('markerZ');
    const groupZ = document.getElementById('groupZ');

    const lineW_Re = document.getElementById('lineW_Re');
    const lineW_Im = document.getElementById('lineW_Im');
    const dotW = document.getElementById('dotW');
    const markerW = document.getElementById('markerW');
    const groupW = document.getElementById('groupW');

    const targetZx = cx + 3 * unit; // 333
    const targetZy = cy - 2 * unit; // 148
    const targetWx = cx - 4 * unit; // 81
    const targetWy = cy + 3 * unit; // 328

    function easeInOutQuad(t) {
      return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
    }

    function resetVisuals() {
      if (animReqId) {
        cancelAnimationFrame(animReqId);
        animReqId = null;
      }
      // Reset Z
      lineZ_Re.setAttribute('x2', cx);
      lineZ_Im.setAttribute('y2', cy);
      dotZ.setAttribute('opacity', '0');
      dotZ.setAttribute('cx', cx);
      dotZ.setAttribute('cy', cy);
      markerZ.setAttribute('opacity', '0');

      // Reset W
      lineW_Re.setAttribute('x2', cx);
      lineW_Im.setAttribute('y2', cy);
      dotW.setAttribute('opacity', '0');
      dotW.setAttribute('cx', cx);
      dotW.setAttribute('cy', cy);
      markerW.setAttribute('opacity', '0');

      if (currentMode === 'z') {
        groupZ.style.display = 'inline';
        groupW.style.display = 'none';
      } else if (currentMode === 'w') {
        groupZ.style.display = 'none';
        groupW.style.display = 'inline';
      } else {
        groupZ.style.display = 'inline';
        groupW.style.display = 'inline';
      }
    }

    function renderZ(progress) {
      // Progress from 0 to 1
      if (progress <= 0) {
        dotZ.setAttribute('opacity', '0');
        lineZ_Re.setAttribute('x2', cx);
        lineZ_Im.setAttribute('y2', cy);
        markerZ.setAttribute('opacity', '0');
        return;
      }
      dotZ.setAttribute('opacity', '1');

      if (progress < 0.5) {
        // Phase 1: Real step (0 to 0.5)
        const p = easeInOutQuad(progress / 0.5);
        const curX = cx + (targetZx - cx) * p;
        lineZ_Re.setAttribute('x2', curX);
        lineZ_Im.setAttribute('y2', cy);
        dotZ.setAttribute('cx', curX);
        dotZ.setAttribute('cy', cy);
        markerZ.setAttribute('opacity', '0');
      } else if (progress < 0.95) {
        // Phase 2: Imaginary step (0.5 to 0.95)
        lineZ_Re.setAttribute('x2', targetZx);
        const p = easeInOutQuad((progress - 0.5) / 0.45);
        const curY = cy + (targetZy - cy) * p;
        lineZ_Im.setAttribute('y2', curY);
        dotZ.setAttribute('cx', targetZx);
        dotZ.setAttribute('cy', curY);
        markerZ.setAttribute('opacity', '0');
      } else {
        // Complete
        lineZ_Re.setAttribute('x2', targetZx);
        lineZ_Im.setAttribute('y2', targetZy);
        dotZ.setAttribute('opacity', '0');
        const fadeP = Math.min(1, (progress - 0.95) / 0.05);
        markerZ.setAttribute('opacity', fadeP.toString());
      }
    }

    function renderW(progress) {
      // Progress from 0 to 1
      if (progress <= 0) {
        dotW.setAttribute('opacity', '0');
        lineW_Re.setAttribute('x2', cx);
        lineW_Im.setAttribute('y2', cy);
        markerW.setAttribute('opacity', '0');
        return;
      }
      dotW.setAttribute('opacity', '1');

      if (progress < 0.5) {
        // Phase 1: Real step
        const p = easeInOutQuad(progress / 0.5);
        const curX = cx + (targetWx - cx) * p;
        lineW_Re.setAttribute('x2', curX);
        lineW_Im.setAttribute('y2', cy);
        dotW.setAttribute('cx', curX);
        dotW.setAttribute('cy', cy);
        markerW.setAttribute('opacity', '0');
      } else if (progress < 0.95) {
        // Phase 2: Imaginary step
        lineW_Re.setAttribute('x2', targetWx);
        const p = easeInOutQuad((progress - 0.5) / 0.45);
        const curY = cy + (targetWy - cy) * p;
        lineW_Im.setAttribute('y2', curY);
        dotW.setAttribute('cx', targetWx);
        dotW.setAttribute('cy', curY);
        markerW.setAttribute('opacity', '0');
      } else {
        // Complete
        lineW_Re.setAttribute('x2', targetWx);
        lineW_Im.setAttribute('y2', targetWy);
        dotW.setAttribute('opacity', '0');
        const fadeP = Math.min(1, (progress - 0.95) / 0.05);
        markerW.setAttribute('opacity', fadeP.toString());
      }
    }

    function animate(timestamp) {
      if (!startTime) startTime = timestamp;
      const elapsed = timestamp - startTime;

      if (currentMode === 'z') {
        const duration = 1500;
        const progress = Math.min(1, elapsed / duration);
        renderZ(progress);
        if (progress < 1) {
          animReqId = requestAnimationFrame(animate);
        }
      } else if (currentMode === 'w') {
        const duration = 1500;
        const progress = Math.min(1, elapsed / duration);
        renderW(progress);
        if (progress < 1) {
          animReqId = requestAnimationFrame(animate);
        }
      } else {
        // Both mode: Z (0-1400ms), delay (1400-1800ms), W (1800-3200ms)
        const totalDuration = 3200;
        const zProg = Math.min(1, elapsed / 1400);
        renderZ(zProg);

        if (elapsed >= 1700) {
          const wProg = Math.min(1, (elapsed - 1700) / 1400);
          renderW(wProg);
        } else {
          renderW(0);
        }

        if (elapsed < totalDuration) {
          animReqId = requestAnimationFrame(animate);
        }
      }
    }

    function play() {
      resetVisuals();
      startTime = null;
      animReqId = requestAnimationFrame(animate);
    }

    function replayAnimation() {
      play();
    }

    function setMode(mode) {
      currentMode = mode;
      document.getElementById('btnZ').className = 'btn' + (mode === 'z' ? ' active-blue' : '');
      document.getElementById('btnW').className = 'btn' + (mode === 'w' ? ' active-orange' : '');
      document.getElementById('btnBoth').className = 'btn' + (mode === 'both' ? ' active-all' : '');
      play();
    }

    // Start on load
    window.addEventListener('DOMContentLoaded', () => {
      setMode('z');
    });
  </script>
</body>
</html>

Introduction to the Complex Plane

<!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>Complex Plane: Pure Real and Pure Imaginary Numbers</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100vh;
      user-select: none;
    }

    .header {
      text-align: center;
      width: 100%;
      margin-bottom: 6px;
    }
    .title {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .title span {
      color: #64748b;
      font-weight: 500;
      font-size: 15px;
    }

    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 6px;
      flex-wrap: wrap;
    }
    .filter-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .filter-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .filter-btn.active-all {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }
    .filter-btn.active-real {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .filter-btn.active-imag {
      background: #7c3aed;
      color: #ffffff;
      border-color: #7c3aed;
    }

    .svg-container {
      width: 100%;
      max-width: 580px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      max-height: 380px;
      overflow: visible;
    }

    .legend-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
      max-width: 580px;
      margin-top: 6px;
    }
    .legend-card {
      background: #ffffff;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: opacity 0.3s ease, border-color 0.3s ease;
    }
    .legend-card.real-card {
      border-left: 4px solid #2563eb;
    }
    .legend-card.imag-card {
      border-left: 4px solid #7c3aed;
    }
    .legend-title {
      font-weight: 700;
      font-size: 12.5px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .legend-card.real-card .legend-title { color: #2563eb; }
    .legend-card.imag-card .legend-title { color: #7c3aed; }
    .legend-desc {
      color: #64748b;
      font-size: 11.5px;
      line-height: 1.3;
    }

    /* Dimming transitions */
    .dimmed {
      opacity: 0.15 !important;
      transition: opacity 0.3s ease;
    }
    .highlight {
      opacity: 1 !important;
      transition: opacity 0.3s ease;
    }
    .axis-glow {
      transition: stroke-width 0.3s ease, opacity 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">
      Complex Numbers on Axes <span>(z = a + bi)</span>
    </div>
    <div class="controls">
      <button class="filter-btn active-all" id="btnAll" onclick="setMode('all')">Show All</button>
      <button class="filter-btn" id="btnReal" onclick="setMode('real')">● Pure Real (b = 0)</button>
      <button class="filter-btn" id="btnImag" onclick="setMode('imag')">● Pure Imaginary (a = 0)</button>
    </div>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 540 400" id="planeSvg">
      <defs>
        
        <marker id="arrow-real" 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="#2563eb" />
        </marker>
        
        <marker id="arrow-imag" 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="#7c3aed" />
        </marker>
        
        <filter id="badge-shadow" x="-15%" y="-15%" width="130%" height="130%">
          <feDropShadow dx="0" dy="1.5" stdDeviation="2" flood-opacity="0.08" />
        </filter>
      </defs>

      
      <g id="grid" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2">
        
        <line x1="90" y1="20" x2="90" y2="380" />
        <line x1="126" y1="20" x2="126" y2="380" />
        <line x1="162" y1="20" x2="162" y2="380" />
        <line x1="198" y1="20" x2="198" y2="380" />
        <line x1="234" y1="20" x2="234" y2="380" />
        
        <line x1="306" y1="20" x2="306" y2="380" />
        <line x1="342" y1="20" x2="342" y2="380" />
        <line x1="378" y1="20" x2="378" y2="380" />
        <line x1="414" y1="20" x2="414" y2="380" />
        <line x1="450" y1="20" x2="450" y2="380" />

        
        <line x1="40" y1="30" x2="500" y2="30" />
        <line x1="40" y1="64" x2="500" y2="64" />
        <line x1="40" y1="98" x2="500" y2="98" />
        <line x1="40" y1="132" x2="500" y2="132" />
        <line x1="40" y1="166" x2="500" y2="166" />
        
        <line x1="40" y1="234" x2="500" y2="234" />
        <line x1="40" y1="268" x2="500" y2="268" />
        <line x1="40" y1="302" x2="500" y2="302" />
        <line x1="40" y1="336" x2="500" y2="336" />
        <line x1="40" y1="370" x2="500" y2="370" />
      </g>

      
      <line id="glowReal" class="axis-glow group-real" x1="45" y1="200" x2="495" y2="200" stroke="#dbeafe" stroke-width="14" stroke-linecap="round" />
      <line id="glowImag" class="axis-glow group-imag" x1="270" y1="25" x2="270" y2="375" stroke="#ede9fe" stroke-width="14" stroke-linecap="round" />

      
      
      <line class="group-real" x1="50" y1="200" x2="490" y2="200" stroke="#2563eb" stroke-width="2.5" marker-start="url(#arrow-real)" marker-end="url(#arrow-real)" />
      
      <line class="group-imag" x1="270" y1="370" x2="270" y2="30" stroke="#7c3aed" stroke-width="2.5" marker-start="url(#arrow-imag)" marker-end="url(#arrow-imag)" />

      
      <g class="group-real" id="labelReal">
        <rect x="430" y="206" width="102" height="22" rx="4" fill="#ffffff" stroke="#bfdbfe" stroke-width="1" filter="url(#badge-shadow)"/>
        <text x="481" y="221" font-size="11" font-weight="700" fill="#1d4ed8" text-anchor="middle">Real Axis (Re)</text>
      </g>
      <g class="group-imag" id="labelImag">
        <rect x="278" y="14" width="134" height="22" rx="4" fill="#ffffff" stroke="#ddd6fe" stroke-width="1" filter="url(#badge-shadow)"/>
        <text x="345" y="29" font-size="11" font-weight="700" fill="#6d28d9" text-anchor="middle">Imaginary Axis (Im)</text>
      </g>

      
      <g font-size="10.5" fill="#64748b" text-anchor="middle" font-weight="500">
        <text x="126" y="193">-4</text>
        <text x="198" y="193">-2</text>
        <text x="342" y="193">2</text>
        <text x="414" y="193">4</text>
      </g>

      
      <g font-size="10.5" fill="#64748b" text-anchor="end" font-weight="500">
        <text x="263" y="102">3i</text>
        <text x="263" y="136">2i</text>
        <text x="263" y="170">1i</text>
        <text x="263" y="272">-2i</text>
        <text x="263" y="340">-4i</text>
      </g>

      
      <g id="originGroup">
        <circle cx="270" cy="200" r="4.5" fill="#475569" stroke="#ffffff" stroke-width="1.5" />
        <rect x="228" y="206" width="38" height="18" rx="3" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" filter="url(#badge-shadow)"/>
        <text x="247" y="219" font-size="10" font-weight="700" fill="#334155" text-anchor="middle">0 + 0i</text>
      </g>

      
      <g class="group-real" id="ptA">
        <circle cx="414" cy="200" r="6" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
        <g transform="translate(366, 144)" filter="url(#badge-shadow)">
          <rect width="96" height="38" rx="6" fill="#ffffff" stroke="#2563eb" stroke-width="1.5"/>
          <text x="48" y="16" font-size="13" font-weight="800" fill="#1d4ed8" text-anchor="middle">4</text>
          <text x="48" y="30" font-size="9.5" font-weight="600" fill="#64748b" text-anchor="middle">4 + 0i (Pure Real)</text>
          
          <line x1="48" y1="38" x2="48" y2="52" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="2,2"/>
        </g>
      </g>

      
      <g class="group-real" id="ptB">
        <circle cx="198" cy="200" r="6" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
        <g transform="translate(148, 144)" filter="url(#badge-shadow)">
          <rect width="100" height="38" rx="6" fill="#ffffff" stroke="#2563eb" stroke-width="1.5"/>
          <text x="50" y="16" font-size="13" font-weight="800" fill="#1d4ed8" text-anchor="middle">-2</text>
          <text x="50" y="30" font-size="9.5" font-weight="600" fill="#64748b" text-anchor="middle">-2 + 0i (Pure Real)</text>
          
          <line x1="50" y1="38" x2="50" y2="52" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="2,2"/>
        </g>
      </g>

      
      <g class="group-imag" id="ptC">
        <circle cx="270" cy="98" r="6" fill="#7c3aed" stroke="#ffffff" stroke-width="2" />
        <g transform="translate(286, 79)" filter="url(#badge-shadow)">
          <rect width="128" height="38" rx="6" fill="#ffffff" stroke="#7c3aed" stroke-width="1.5"/>
          <text x="64" y="16" font-size="13" font-weight="800" fill="#6d28d9" text-anchor="middle">3i</text>
          <text x="64" y="30" font-size="9.5" font-weight="600" fill="#64748b" text-anchor="middle">0 + 3i (Pure Imaginary)</text>
        </g>
        <line x1="274" y1="98" x2="286" y2="98" stroke="#7c3aed" stroke-width="1.5" stroke-dasharray="2,2"/>
      </g>

      
      <g class="group-imag" id="ptD">
        <circle cx="270" cy="336" r="6" fill="#7c3aed" stroke="#ffffff" stroke-width="2" />
        <g transform="translate(286, 317)" filter="url(#badge-shadow)">
          <rect width="130" height="38" rx="6" fill="#ffffff" stroke="#7c3aed" stroke-width="1.5"/>
          <text x="65" y="16" font-size="13" font-weight="800" fill="#6d28d9" text-anchor="middle">-4i</text>
          <text x="65" y="30" font-size="9.5" font-weight="600" fill="#64748b" text-anchor="middle">0 - 4i (Pure Imaginary)</text>
        </g>
        <line x1="274" y1="336" x2="286" y2="336" stroke="#7c3aed" stroke-width="1.5" stroke-dasharray="2,2"/>
      </g>
    </svg>
  </div>

  <div class="legend-container">
    <div class="legend-card real-card" id="cardReal">
      <div class="legend-title">→ Pure Real (b = 0)</div>
      <div class="legend-desc">Lie strictly on the horizontal <b>Real axis</b>.</div>
    </div>
    <div class="legend-card imag-card" id="cardImag">
      <div class="legend-title">↑ Pure Imaginary (a = 0)</div>
      <div class="legend-desc">Lie strictly on the vertical <b>Imaginary axis</b>.</div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const btnAll = document.getElementById('btnAll');
      const btnReal = document.getElementById('btnReal');
      const btnImag = document.getElementById('btnImag');
      
      const realElements = document.querySelectorAll('.group-real');
      const imagElements = document.querySelectorAll('.group-imag');
      const cardReal = document.getElementById('cardReal');
      const cardImag = document.getElementById('cardImag');

      // Reset button classes
      btnAll.className = 'filter-btn';
      btnReal.className = 'filter-btn';
      btnImag.className = 'filter-btn';

      if (mode === 'all') {
        btnAll.classList.add('active-all');
        realElements.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlight'); });
        imagElements.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlight'); });
        cardReal.classList.remove('dimmed');
        cardImag.classList.remove('dimmed');
      } else if (mode === 'real') {
        btnReal.classList.add('active-real');
        realElements.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlight'); });
        imagElements.forEach(el => { el.classList.remove('highlight'); el.classList.add('dimmed'); });
        cardReal.classList.remove('dimmed');
        cardImag.classList.add('dimmed');
      } else if (mode === 'imag') {
        btnImag.classList.add('active-imag');
        realElements.forEach(el => { el.classList.remove('highlight'); el.classList.add('dimmed'); });
        imagElements.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlight'); });
        cardReal.classList.add('dimmed');
        cardImag.classList.remove('dimmed');
      }
    }
  </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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    .header-display {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 700;
      background: #ffffff;
      padding: 6px 16px;
      border-radius: 9999px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      margin-bottom: 6px;
    }
    .val-z { color: #0f172a; font-style: italic; }
    .val-re { color: #2563eb; }
    .val-im { color: #7c3aed; }

    .svg-container {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 1 / 1;
      position: relative;
      touch-action: none;
      cursor: crosshair;
    }

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

    .grid-line { stroke: #e2e8f0; stroke-width: 1; }
    .axis-re { stroke: #2563eb; stroke-width: 2.5; stroke-linecap: round; }
    .axis-im { stroke: #7c3aed; stroke-width: 2.5; stroke-linecap: round; }
    .proj-line-re { stroke: #2563eb; stroke-width: 1.5; stroke-dasharray: 4 4; }
    .proj-line-im { stroke: #7c3aed; stroke-width: 1.5; stroke-dasharray: 4 4; }

    .axis-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .tick-label {
      font-size: 10px;
      fill: #64748b;
      font-weight: 500;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .tick-label-im {
      font-style: italic;
    }

    .point-outer {
      fill: #0f172a;
      transition: r 0.15s ease;
    }
    .point-glow {
      fill: rgba(15, 23, 42, 0.15);
      animation: pulse 2s infinite ease-in-out;
    }
    @keyframes pulse {
      0%, 100% { r: 10px; opacity: 0.4; }
      50% { r: 14px; opacity: 0.15; }
    }

    .cards-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
      max-width: 380px;
      margin-top: 6px;
    }
    .info-card {
      background: #ffffff;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .card-re {
      border-left: 3px solid #2563eb;
      color: #1e3a8a;
    }
    .card-im {
      border-left: 3px solid #7c3aed;
      color: #5b21b6;
    }
    .card-title {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.75;
    }

    .presets-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 380px;
      margin-top: 6px;
    }
    .preset-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }
    .preset-btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }
  </style>
</head>
<body>

  
  <div class="header-display">
    <span class="val-z">z</span>
    <span>=</span>
    <span id="txtRe" class="val-re">3</span>
    <span id="txtSign">+</span>
    <span id="txtIm" class="val-im">4i</span>
  </div>

  
  <div class="svg-container" id="gridBox">
    <svg viewBox="0 0 400 400" id="svgPlane">
      <defs>
        <marker id="arr-re" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#2563eb"/>
        </marker>
        <marker id="arr-re-left" markerWidth="6" markerHeight="6" refX="1" refY="3" orient="auto">
          <path d="M6,0 L0,3 L6,6 Z" fill="#2563eb"/>
        </marker>
        <marker id="arr-im" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#7c3aed"/>
        </marker>
        <marker id="arr-im-down" markerWidth="6" markerHeight="6" refX="1" refY="3" orient="auto">
          <path d="M6,0 L0,3 L6,6 Z" fill="#7c3aed"/>
        </marker>
      </defs>

      
      <g id="gridLines"></g>

      
      <line id="projRe" class="proj-line-re" x1="200" y1="200" x2="200" y2="200" />
      <line id="projIm" class="proj-line-im" x1="200" y1="200" x2="200" y2="200" />

      
      
      <line class="axis-re" x1="16" y1="200" x2="384" y2="200" marker-end="url(#arr-re)" marker-start="url(#arr-re-left)" />
      
      <line class="axis-im" x1="200" y1="384" x2="200" y2="16" marker-end="url(#arr-im)" marker-start="url(#arr-im-down)" />

      
      <g id="tickGroup"></g>

      
      <text x="388" y="195" fill="#2563eb" class="axis-label" text-anchor="end">Re</text>
      <text x="208" y="20" fill="#7c3aed" class="axis-label">Im</text>

      
      <circle cx="200" cy="200" r="3" fill="#94a3b8" />
      <text x="192" y="212" class="tick-label" style="fill:#94a3b8;">0</text>

      
      <g id="pointGroup" style="transform: translate(320px, 40px);">
        <circle class="point-glow" r="10" />
        <circle class="point-outer" r="5.5" />
      </g>
    </svg>
  </div>

  
  <div class="cards-row">
    <div class="info-card card-re">
      <span class="card-title">Horizontal Axis</span>
      <span>Real Part (a) ➔</span>
    </div>
    <div class="info-card card-im">
      <span class="card-title">Vertical Axis</span>
      <span>Imaginary Part (b) ➔</span>
    </div>
  </div>

  
  <div class="presets-row">
    <button class="preset-btn active" onclick="setZ(3, 4, this)">3 + 4i</button>
    <button class="preset-btn" onclick="setZ(-2, 3, this)">-2 + 3i</button>
    <button class="preset-btn" onclick="setZ(-3, -2, this)">-3 - 2i</button>
    <button class="preset-btn" onclick="setZ(4, 0, this)">4 (Real)</button>
    <button class="preset-btn" onclick="setZ(0, -3, this)">-3i (Imag)</button>
  </div>

  <script>
    const ORIGIN = 200;
    const STEP = 40; // 40px per unit, range [-4, 4]

    const gridLines = document.getElementById('gridLines');
    const tickGroup = document.getElementById('tickGroup');
    const pointGroup = document.getElementById('pointGroup');
    const projRe = document.getElementById('projRe');
    const projIm = document.getElementById('projIm');
    const txtRe = document.getElementById('txtRe');
    const txtIm = document.getElementById('txtIm');
    const txtSign = document.getElementById('txtSign');
    const gridBox = document.getElementById('gridBox');

    // Generate grid lines and tick labels
    for (let i = -4; i <= 4; i++) {
      if (i === 0) continue;
      const pos = ORIGIN + i * STEP;

      // Vertical grid lines
      const vLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
      vLine.setAttribute("class", "grid-line");
      vLine.setAttribute("x1", pos);
      vLine.setAttribute("y1", 20);
      vLine.setAttribute("x2", pos);
      vLine.setAttribute("y2", 380);
      gridLines.appendChild(vLine);

      // Horizontal grid lines
      const hLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
      hLine.setAttribute("class", "grid-line");
      hLine.setAttribute("x1", 20);
      hLine.setAttribute("y1", pos);
      hLine.setAttribute("x2", 380);
      hLine.setAttribute("y2", pos);
      gridLines.appendChild(hLine);

      // Real Ticks (X-axis)
      const tX = document.createElementNS("http://www.w3.org/2000/svg", "text");
      tX.setAttribute("class", "tick-label");
      tX.setAttribute("x", pos);
      tX.setAttribute("y", ORIGIN + 13);
      tX.textContent = i;
      tickGroup.appendChild(tX);

      // Imaginary Ticks (Y-axis)
      const tY = document.createElementNS("http://www.w3.org/2000/svg", "text");
      tY.setAttribute("class", "tick-label tick-label-im");
      tY.setAttribute("x", ORIGIN - 12);
      tY.setAttribute("y", ORIGIN - i * STEP);
      const label = i === 1 ? "i" : (i === -1 ? "-i" : i + "i");
      tY.textContent = label;
      tickGroup.appendChild(tY);
    }

    let curA = 3;
    let curB = 4;

    function updatePlot(a, b) {
      curA = a;
      curB = b;

      const px = ORIGIN + a * STEP;
      const py = ORIGIN - b * STEP;

      pointGroup.style.transform = `translate(${px}px, ${py}px)`;

      // Update projections
      projRe.setAttribute("x1", px);
      projRe.setAttribute("y1", py);
      projRe.setAttribute("x2", px);
      projRe.setAttribute("y2", ORIGIN);

      projIm.setAttribute("x1", px);
      projIm.setAttribute("y1", py);
      projIm.setAttribute("x2", ORIGIN);
      projIm.setAttribute("y2", py);

      // Update Text Display
      txtRe.textContent = a;
      if (b >= 0) {
        txtSign.textContent = "+";
        txtIm.textContent = (b === 1 ? "" : b) + "i";
      } else {
        txtSign.textContent = "-";
        txtIm.textContent = (Math.abs(b) === 1 ? "" : Math.abs(b)) + "i";
      }
    }

    function setZ(a, b, btn) {
      document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
      if (btn) btn.classList.add('active');
      updatePlot(a, b);
    }

    // Pointer Interaction (Tap/Drag anywhere on grid)
    function handlePointer(e) {
      const rect = gridBox.getBoundingClientRect();
      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      const clientY = e.touches ? e.touches[0].clientY : e.clientY;

      const x = ((clientX - rect.left) / rect.width) * 400;
      const y = ((clientY - rect.top) / rect.height) * 400;

      let a = Math.round((x - ORIGIN) / STEP);
      let b = Math.round((ORIGIN - y) / STEP);

      a = Math.max(-4, Math.min(4, a));
      b = Math.max(-4, Math.min(4, b));

      document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));
      updatePlot(a, b);
    }

    let isDragging = false;
    gridBox.addEventListener('pointerdown', (e) => {
      isDragging = true;
      handlePointer(e);
    });
    window.addEventListener('pointermove', (e) => {
      if (isDragging) handlePointer(e);
    });
    window.addEventListener('pointerup', () => { isDragging = false; });

    // Initial render
    updatePlot(3, 4);
  </script>
</body>
</html>

HSN.CN.B.4

Aligned learning resources

Related diagrams