<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .header-eq {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 8px;
      padding: 6px 16px;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      color: #0369a1;
    }
    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }
    @media (max-width: 480px) {
      .main-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }
    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .panel-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 4px;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
      max-width: 420px;
    }
    .slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    .slider-row span {
      font-size: 13px;
      font-weight: 600;
      min-width: 65px;
    }
    input[type=range] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
      height: 6px;
    }
    .btn-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn.active, .btn:hover {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="header-eq">
    <span id="eq-malus"></span>
    <span style="color:#64748b;font-weight:400;">|</span>
    <span id="live-val" style="font-size:14px;color:#0f172a;"></span>
  </div>

  <div class="main-grid">
    
    <div class="panel">
      <div class="panel-title">Vector Decomposition</div>
      <svg viewBox="0 0 220 200" id="vecSvg">
        <defs>
          
          <marker id="arrow-blue" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
            <polygon points="0 0, 6 3, 0 6" fill="#0284c7" />
          </marker>
          <marker id="arrow-green" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
            <polygon points="0 0, 6 3, 0 6" fill="#16a34a" />
          </marker>
          <marker id="arrow-red" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
            <polygon points="0 0, 6 3, 0 6" fill="#ef4444" />
          </marker>
        </defs>

        
        <line x1="110" y1="185" x2="110" y2="15" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3" />
        <text x="110" y="12" text-anchor="middle" font-size="10" font-weight="700" fill="#64748b">Transmission Axis</text>

        
        <line x1="15" y1="135" x2="205" y2="135" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="2,2" />

        
        <path id="thetaArc" fill="none" stroke="#6366f1" stroke-width="1.5" />
        <text id="thetaLabel" font-size="11" font-weight="600" fill="#6366f1">θ</text>

        
        <line id="projParallel" stroke="#94a3b8" stroke-width="1" stroke-dasharray="2,2" />
        <line id="projPerp" stroke="#94a3b8" stroke-width="1" stroke-dasharray="2,2" />

        
        <line id="vecPerp" stroke="#ef4444" stroke-width="2.5" marker-end="url(#arrow-red)" />
        <text id="labelPerp" font-size="10" font-weight="600" fill="#dc2626" text-anchor="middle"></text>

        
        <line id="vecParallel" stroke="#16a34a" stroke-width="2.5" marker-end="url(#arrow-green)" />
        <text id="labelParallel" font-size="10" font-weight="600" fill="#15803d" text-anchor="end"></text>

        
        <line id="vecE0" stroke="#0284c7" stroke-width="3" marker-end="url(#arrow-blue)" />
        <text id="labelE0" font-size="11" font-weight="700" fill="#0284c7"></text>

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

    
    <div class="panel">
      <div class="panel-title">Transmitted Intensity</div>
      <svg viewBox="0 0 220 200" id="graphSvg">
        
        <line x1="35" y1="160" x2="205" y2="160" stroke="#64748b" stroke-width="1.5" />
        <line x1="35" y1="160" x2="35" y2="25" stroke="#64748b" stroke-width="1.5" />

        
        <text x="30" y="32" font-size="10" fill="#64748b" text-anchor="end">1.0</text>
        <line x1="32" y1="30" x2="35" y2="30" stroke="#64748b" />

        <text x="30" y="97" font-size="10" fill="#64748b" text-anchor="end">0.5</text>
        <line x1="32" y1="95" x2="35" y2="95" stroke="#64748b" />

        <text x="30" y="163" font-size="10" fill="#64748b" text-anchor="end">0</text>
        <text x="22" y="18" font-size="10" font-weight="700" fill="#475569">I / I₀</text>

        
        <line x1="35" y1="160" x2="35" y2="164" stroke="#64748b" />
        <text x="35" y="176" font-size="9" fill="#64748b" text-anchor="middle">0°</text>

        <line x1="75" y1="160" x2="75" y2="164" stroke="#64748b" />
        <text x="75" y="176" font-size="9" fill="#64748b" text-anchor="middle">45°</text>

        <line x1="115" y1="160" x2="115" y2="164" stroke="#64748b" />
        <text x="115" y="176" font-size="9" fill="#64748b" text-anchor="middle">90°</text>

        <line x1="155" y1="160" x2="155" y2="164" stroke="#64748b" />
        <text x="155" y="176" font-size="9" fill="#64748b" text-anchor="middle">135°</text>

        <line x1="195" y1="160" x2="195" y2="164" stroke="#64748b" />
        <text x="195" y="176" font-size="9" fill="#64748b" text-anchor="middle">180°</text>
        <text x="210" y="176" font-size="10" font-weight="700" fill="#475569">θ</text>

        
        <path id="graphCurve" fill="none" stroke="#cbd5e1" stroke-width="2.5" />
        <path id="graphCurveActive" fill="none" stroke="#0284c7" stroke-width="2.5" />

        
        <line id="graphDropX" stroke="#0284c7" stroke-width="1" stroke-dasharray="2,2" />
        <line id="graphDropY" stroke="#0284c7" stroke-width="1" stroke-dasharray="2,2" />
        <circle id="graphDot" r="4.5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5" />
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <div class="slider-row">
      <span id="slider-label">θ = 45°</span>
      <input type="range" id="degSlider" min="0" max="180" value="45" step="1">
    </div>
    <div class="btn-row">
      <button class="btn" onclick="setAngle(0)">0°</button>
      <button class="btn" onclick="setAngle(30)">30°</button>
      <button class="btn active" onclick="setAngle(45)">45°</button>
      <button class="btn" onclick="setAngle(60)">60°</button>
      <button class="btn" onclick="setAngle(90)">90°</button>
      <button class="btn" onclick="setAngle(180)">180°</button>
    </div>
  </div>

  <script>
    // KaTeX render static header
    if (window.katex) {
      katex.render("I = I_0 \\cos^2\\theta", document.getElementById("eq-malus"));
    }

    const slider = document.getElementById("degSlider");
    const sliderLabel = document.getElementById("slider-label");
    const liveVal = document.getElementById("live-val");
    const buttons = document.querySelectorAll(".btn");

    // Pre-calculate Graph Curve
    const gx0 = 35, gy0 = 30, gw = 160, gh = 130;
    let curvePath = "";
    for (let deg = 0; deg <= 180; deg += 2) {
      const rad = (deg * Math.PI) / 180;
      const x = gx0 + (deg / 180) * gw;
      const y = (gy0 + gh) - Math.pow(Math.cos(rad), 2) * gh;
      curvePath += (deg === 0 ? "M " : " L ") + x.toFixed(1) + " " + y.toFixed(1);
    }
    document.getElementById("graphCurve").setAttribute("d", curvePath);

    function update(deg) {
      const rad = (deg * Math.PI) / 180;
      const cosVal = Math.cos(rad);
      const sinVal = Math.sin(rad);
      const intensity = Math.pow(cosVal, 2);

      sliderLabel.textContent = `θ = ${deg}°`;
      liveVal.innerHTML = `<b>I</b> = ${(intensity * 100).toFixed(0)}% I₀`;

      // Sync active button
      buttons.forEach(b => {
        const val = parseInt(b.textContent);
        b.classList.toggle("active", val === deg);
      });

      // --- 1. Vector Diagram ---
      const ox = 110, oy = 135;
      const L = 100; // E0 length

      // E0 vector tip
      const ex = ox + L * sinVal;
      const ey = oy - L * cosVal;

      const vecE0 = document.getElementById("vecE0");
      vecE0.setAttribute("x1", ox);
      vecE0.setAttribute("y1", oy);
      vecE0.setAttribute("x2", ex);
      vecE0.setAttribute("y2", ey);

      const labelE0 = document.getElementById("labelE0");
      labelE0.setAttribute("x", ex + (sinVal >= 0 ? 8 : -8));
      labelE0.setAttribute("y", ey + (cosVal >= 0 ? -4 : 12));
      labelE0.textContent = "E₀";

      // E_parallel (transmitted along vertical axis)
      const parY = oy - L * cosVal;
      const vecPar = document.getElementById("vecParallel");
      vecPar.setAttribute("x1", ox);
      vecPar.setAttribute("y1", oy);
      vecPar.setAttribute("x2", ox);
      vecPar.setAttribute("y2", Math.abs(cosVal) < 0.05 ? oy : parY);
      vecPar.style.display = Math.abs(cosVal) < 0.03 ? "none" : "inline";

      const labelPar = document.getElementById("labelParallel");
      labelPar.setAttribute("x", ox - 6);
      labelPar.setAttribute("y", oy - (L * cosVal) / 2 + 4);
      labelPar.textContent = `E∥ = E₀ cos(${deg}°)`;

      // E_perp (absorbed along horizontal axis)
      const perpX = ox + L * sinVal;
      const vecPerp = document.getElementById("vecPerp");
      vecPerp.setAttribute("x1", ox);
      vecPerp.setAttribute("y1", oy);
      vecPerp.setAttribute("x2", Math.abs(sinVal) < 0.05 ? ox : perpX);
      vecPerp.setAttribute("y2", oy);
      vecPerp.style.display = Math.abs(sinVal) < 0.03 ? "none" : "inline";

      const labelPerp = document.getElementById("labelPerp");
      labelPerp.setAttribute("x", ox + (L * sinVal) / 2);
      labelPerp.setAttribute("y", oy + 14);
      labelPerp.textContent = `E⊥ (Absorbed)`;

      // Projections (Dotted)
      const projPar = document.getElementById("projParallel");
      projPar.setAttribute("x1", ex);
      projPar.setAttribute("y1", ey);
      projPar.setAttribute("x2", ox);
      projPar.setAttribute("y2", parY);

      const projPerp = document.getElementById("projPerp");
      projPerp.setAttribute("x1", ex);
      projPerp.setAttribute("y1", ey);
      projPerp.setAttribute("x2", perpX);
      projPerp.setAttribute("y2", oy);

      // Arc for angle theta
      const arcR = 30;
      const arcEndAngle = Math.PI / 2 - rad;
      const arcEndX = ox + arcR * Math.cos(arcEndAngle);
      const arcEndY = oy - arcR * Math.sin(arcEndAngle);
      const sweep = deg > 0 ? 1 : 0;
      const largeArc = deg > 180 ? 1 : 0;

      const thetaArc = document.getElementById("thetaArc");
      if (deg > 2) {
        thetaArc.setAttribute("d", `M ${ox} ${oy - arcR} A ${arcR} ${arcR} 0 ${largeArc} ${sweep} ${arcEndX} ${arcEndY}`);
        thetaArc.style.display = "inline";
      } else {
        thetaArc.style.display = "none";
      }

      const midRad = rad / 2;
      const midX = ox + (arcR + 10) * Math.sin(midRad);
      const midY = oy - (arcR + 10) * Math.cos(midRad);
      const thetaLabel = document.getElementById("thetaLabel");
      thetaLabel.setAttribute("x", midX);
      thetaLabel.setAttribute("y", midY + 4);

      // --- 2. Intensity Graph ---
      const curX = gx0 + (deg / 180) * gw;
      const curY = (gy0 + gh) - intensity * gh;

      const dot = document.getElementById("graphDot");
      dot.setAttribute("cx", curX);
      dot.setAttribute("cy", curY);

      const dropX = document.getElementById("graphDropX");
      dropX.setAttribute("x1", curX);
      dropX.setAttribute("y1", curY);
      dropX.setAttribute("x2", curX);
      dropX.setAttribute("y2", gy0 + gh);

      const dropY = document.getElementById("graphDropY");
      dropY.setAttribute("x1", gx0);
      dropY.setAttribute("y1", curY);
      dropY.setAttribute("x2", curX);
      dropY.setAttribute("y2", curY);

      // Partial curve highlighting up to current angle
      let activePath = "";
      for (let d = 0; d <= deg; d += 2) {
        const r = (d * Math.PI) / 180;
        const x = gx0 + (d / 180) * gw;
        const y = (gy0 + gh) - Math.pow(Math.cos(r), 2) * gh;
        activePath += (d === 0 ? "M " : " L ") + x.toFixed(1) + " " + y.toFixed(1);
      }
      activePath += ` L ${curX.toFixed(1)} ${curY.toFixed(1)}`;
      document.getElementById("graphCurveActive").setAttribute("d", activePath);
    }

    function setAngle(deg) {
      slider.value = deg;
      update(deg);
    }

    slider.addEventListener("input", (e) => {
      update(parseInt(e.target.value));
    });

    // Initial call
    update(45);
  </script>
</body>
</html>

Transverse Wave Polarization and Malus's Law

<!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: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      user-select: none;
    }
    .toggle-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      width: 100%;
      max-width: 620px;
      justify-content: center;
    }
    .btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
    }
    .svg-wrap {
      width: 100%;
      max-width: 650px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .filter-plate {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .filter-hidden {
      opacity: 0.15;
      stroke-dasharray: 4 4;
    }
    .ray-segment, .intensity-text, .badge-group {
      transition: opacity 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="toggle-bar">
    <button id="btn3" class="btn active" onclick="setMode(3)">3 Filters (45° Inserted)</button>
    <button id="btn2" class="btn" onclick="setMode(2)">2 Filters (Crossed 90°)</button>
  </div>

  <div class="svg-wrap">
    <svg viewBox="0 0 650 310">
      <defs>
        
        <linearGradient id="unpolGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#f59e0b" stop-opacity="0.9" />
          <stop offset="100%" stop-color="#f59e0b" stop-opacity="0.6" />
        </linearGradient>
        <linearGradient id="rayGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.8" />
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0.5" />
        </linearGradient>
        <linearGradient id="rayGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.5" />
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0.3" />
        </linearGradient>
        <linearGradient id="rayGrad3" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.3" />
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0.15" />
        </linearGradient>
        
        
        <linearGradient id="filterBg" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#e0f2fe" stop-opacity="0.85" />
          <stop offset="100%" stop-color="#bae6fd" stop-opacity="0.85" />
        </linearGradient>

        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7" />
        </marker>
        <marker id="arrowAmber" 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="#d97706" />
        </marker>
      </defs>

      
      <path d="M 35 140 L 140 140" stroke="#f59e0b" stroke-width="4" stroke-linecap="round" />
      <path d="M 170 140 L 290 140" stroke="#0284c7" stroke-width="3" stroke-linecap="round" />
      
      
      <path id="rayMid" d="M 320 140 L 440 140" stroke="#0284c7" stroke-width="2" stroke-linecap="round" />
      
      
      <path id="rayEnd" d="M 470 140 L 590 140" stroke="#0284c7" stroke-width="1.5" stroke-linecap="round" marker-end="url(#arrow)" />

      
      <g transform="translate(60, 140)">
        
        <line x1="0" y1="-28" x2="0" y2="28" stroke="#d97706" stroke-width="2" marker-start="url(#arrowAmber)" marker-end="url(#arrowAmber)" />
        <line x1="-28" y1="0" x2="28" y2="0" stroke="#d97706" stroke-width="2" marker-start="url(#arrowAmber)" marker-end="url(#arrowAmber)" />
        <line x1="-20" y1="-20" x2="20" y2="20" stroke="#d97706" stroke-width="1.5" marker-start="url(#arrowAmber)" marker-end="url(#arrowAmber)" />
        <line x1="-20" y1="20" x2="20" y2="-20" stroke="#d97706" stroke-width="1.5" marker-start="url(#arrowAmber)" marker-end="url(#arrowAmber)" />
        <circle cx="0" cy="0" r="4" fill="#d97706" />
      </g>
      <text x="60" y="70" text-anchor="middle" font-size="14" font-weight="700" fill="#b45309">Incident</text>
      <text x="60" y="88" text-anchor="middle" font-size="13" font-weight="600" fill="#64748b">I₀ (Unpolarized)</text>

      
      <g transform="translate(140, 70)">
        <rect x="0" y="0" width="30" height="140" rx="6" fill="url(#filterBg)" stroke="#0284c7" stroke-width="2" />
        
        <line x1="10" y1="12" x2="10" y2="128" stroke="#0369a1" stroke-width="1.5" stroke-dasharray="6 3" />
        <line x1="15" y1="8" x2="15" y2="132" stroke="#0369a1" stroke-width="2" />
        <line x1="20" y1="12" x2="20" y2="128" stroke="#0369a1" stroke-width="1.5" stroke-dasharray="6 3" />
        <text x="15" y="-12" text-anchor="middle" font-size="13" font-weight="700" fill="#0f172a">Filter 1</text>
        <text x="15" y="156" text-anchor="middle" font-size="12" font-weight="600" fill="#0284c7">0° (Vertical)</text>
      </g>

      
      <g transform="translate(230, 140)">
        <line x1="0" y1="-26" x2="0" y2="26" stroke="#0284c7" stroke-width="2.5" marker-start="url(#arrow)" marker-end="url(#arrow)" />
        <circle cx="0" cy="0" r="3" fill="#0284c7" />
      </g>
      <text x="230" y="88" text-anchor="middle" font-size="14" font-weight="700" fill="#0284c7">½ I₀</text>

      
      <g id="badge1" class="badge-group" transform="translate(230, 202)">
        <rect x="-36" y="-12" width="72" height="24" rx="12" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" />
        <text x="0" y="4" text-anchor="middle" font-size="11" font-weight="700" fill="#334155">Δθ = 45°</text>
      </g>

      
      <g id="filter2Group" class="filter-plate" transform="translate(290, 70)">
        <rect id="filter2Rect" x="0" y="0" width="30" height="140" rx="6" fill="url(#filterBg)" stroke="#0284c7" stroke-width="2" />
        
        <line x1="4" y1="40" x2="26" y2="18" stroke="#0369a1" stroke-width="1.5" />
        <line x1="4" y1="75" x2="26" y2="53" stroke="#0369a1" stroke-width="2" />
        <line x1="4" y1="110" x2="26" y2="88" stroke="#0369a1" stroke-width="2" />
        <line x1="4" y1="135" x2="20" y2="119" stroke="#0369a1" stroke-width="1.5" />
        <text id="filter2Label" x="15" y="-12" text-anchor="middle" font-size="13" font-weight="700" fill="#0f172a">Filter 2</text>
        <text id="filter2Sub" x="15" y="156" text-anchor="middle" font-size="12" font-weight="600" fill="#0284c7">45°</text>
      </g>

      
      <g id="osc2" class="ray-segment" transform="translate(380, 140)">
        <line x1="-18" y1="18" x2="18" y2="-18" stroke="#0284c7" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)" />
        <circle cx="0" cy="0" r="3" fill="#0284c7" />
      </g>
      <text id="txtInt2" class="intensity-text" x="380" y="88" text-anchor="middle" font-size="14" font-weight="700" fill="#0284c7">¼ I₀</text>

      
      <g id="badge2" class="badge-group" transform="translate(380, 202)">
        <rect id="badge2Rect" x="-36" y="-12" width="72" height="24" rx="12" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" />
        <text id="badge2Text" x="0" y="4" text-anchor="middle" font-size="11" font-weight="700" fill="#334155">Δθ = 45°</text>
      </g>

      
      <g transform="translate(440, 70)">
        <rect x="0" y="0" width="30" height="140" rx="6" fill="url(#filterBg)" stroke="#0284c7" stroke-width="2" />
        
        <line x1="5" y1="35" x2="25" y2="35" stroke="#0369a1" stroke-width="1.5" />
        <line x1="4" y1="70" x2="26" y2="70" stroke="#0369a1" stroke-width="2" />
        <line x1="4" y1="105" x2="26" y2="105" stroke="#0369a1" stroke-width="2" />
        <line x1="5" y1="125" x2="25" y2="125" stroke="#0369a1" stroke-width="1.5" />
        <text x="15" y="-12" text-anchor="middle" font-size="13" font-weight="700" fill="#0f172a">Filter 3</text>
        <text x="15" y="156" text-anchor="middle" font-size="12" font-weight="600" fill="#0284c7">90° (Horiz)</text>
      </g>

      
      <g id="outGroup" transform="translate(530, 140)">
        <line id="outOsc" x1="-18" y1="0" x2="18" y2="0" stroke="#0284c7" stroke-width="1.5" marker-start="url(#arrow)" marker-end="url(#arrow)" />
        <circle id="outDot" cx="0" cy="0" r="3" fill="#0284c7" />
        
        <path id="outBlocked" d="M -8 -8 L 8 8 M 8 -8 L -8 8" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" style="display:none;" />
      </g>
      <text id="txtOut" x="530" y="88" text-anchor="middle" font-size="15" font-weight="800" fill="#059669">⅛ I₀</text>

      
      <g transform="translate(325, 270)">
        <rect x="-240" y="-18" width="480" height="34" rx="8" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />
        <text id="formulaText" x="0" y="4" text-anchor="middle" font-size="13" font-weight="600" fill="#334155">
          I = ½I₀ × cos²(45°) × cos²(45°) = <tspan fill="#059669" font-weight="700">⅛ I₀</tspan>
        </text>
      </g>
    </svg>
  </div>

  <script>
    function setMode(filters) {
      const btn3 = document.getElementById('btn3');
      const btn2 = document.getElementById('btn2');
      const f2Group = document.getElementById('filter2Group');
      const f2Rect = document.getElementById('filter2Rect');
      const osc2 = document.getElementById('osc2');
      const txtInt2 = document.getElementById('txtInt2');
      const badge1 = document.getElementById('badge1');
      const badge2Text = document.getElementById('badge2Text');
      const rayMid = document.getElementById('rayMid');
      const rayEnd = document.getElementById('rayEnd');
      const outOsc = document.getElementById('outOsc');
      const outDot = document.getElementById('outDot');
      const outBlocked = document.getElementById('outBlocked');
      const txtOut = document.getElementById('txtOut');
      const formulaText = document.getElementById('formulaText');

      if (filters === 3) {
        btn3.classList.add('active');
        btn2.classList.remove('active');

        f2Group.style.opacity = '1';
        f2Rect.setAttribute('stroke-dasharray', 'none');
        osc2.style.opacity = '1';
        txtInt2.style.opacity = '1';
        badge1.style.opacity = '1';
        
        badge2Text.textContent = 'Δθ = 45°';
        rayMid.setAttribute('stroke', '#0284c7');
        rayMid.setAttribute('stroke-width', '2');

        rayEnd.setAttribute('stroke', '#0284c7');
        rayEnd.setAttribute('stroke-dasharray', 'none');
        
        outOsc.style.display = 'block';
        outDot.style.display = 'block';
        outBlocked.style.display = 'none';
        
        txtOut.textContent = '⅛ I₀';
        txtOut.setAttribute('fill', '#059669');

        formulaText.innerHTML = 'I = ½I₀ × cos²(45°) × cos²(45°) = <tspan fill="#059669" font-weight="700">⅛ I₀ (Light passes)</tspan>';
      } else {
        btn2.classList.add('active');
        btn3.classList.remove('active');

        f2Group.style.opacity = '0.2';
        f2Rect.setAttribute('stroke-dasharray', '4 4');
        osc2.style.opacity = '0';
        txtInt2.style.opacity = '0';
        badge1.style.opacity = '0';

        badge2Text.textContent = 'Δθ = 90°';
        rayMid.setAttribute('stroke', '#0284c7');
        rayMid.setAttribute('stroke-width', '3');

        rayEnd.setAttribute('stroke', '#cbd5e1');
        rayEnd.setAttribute('stroke-dasharray', '4 4');

        outOsc.style.display = 'none';
        outDot.style.display = 'none';
        outBlocked.style.display = 'block';

        txtOut.textContent = '0';
        txtOut.setAttribute('fill', '#dc2626');

        formulaText.innerHTML = 'Without Filter 2: Δθ = 90° ⟹ cos²(90°) = 0 <tspan fill="#dc2626" font-weight="700">(Total darkness)</tspan>';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      padding: 10px 12px;
      user-select: none;
    }

    /* Top Section: Diagram Canvas & Floating Labels */
    .viewport {
      position: relative;
      width: 100%;
      flex: 1;
      min-height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .labels-row {
      position: absolute;
      top: 4px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
      padding: 0 8px;
    }

    .label-tag {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      background: rgba(255, 255, 255, 0.9);
      padding: 3px 8px;
      border-radius: 6px;
    }

    .tag-left { color: #0284c7; }
    .tag-mid { color: #334155; }
    .tag-right { color: #0284c7; }

    /* Bottom Section: Minimalist Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding-top: 6px;
    }

    .btn-group {
      display: flex;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
      gap: 3px;
    }

    .btn {
      border: none;
      background: transparent;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .play-btn {
      border: 1px solid #e2e8f0;
      background: #ffffff;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
      color: #334155;
    }
  </style>
</head>
<body>

  <div class="viewport">
    <div class="labels-row">
      <div class="label-tag tag-left">Unpolarized Light</div>
      <div class="label-tag tag-mid">Polarizing Filter</div>
      <div class="label-tag tag-right" id="rightLabel">Linearly Polarized</div>
    </div>
    <canvas id="stage"></canvas>
  </div>

  <div class="controls">
    <div class="btn-group">
      <button class="btn active" data-angle="0">0° Vertical</button>
      <button class="btn" data-angle="45">45°</button>
      <button class="btn" data-angle="90">90° Horizontal</button>
    </div>
    <button class="play-btn" id="playBtn" title="Play/Pause">⏸</button>
  </div>

  <script>
    const canvas = document.getElementById('stage');
    const ctx = canvas.getContext('2d');
    const playBtn = document.getElementById('playBtn');
    const angleBtns = document.querySelectorAll('.btn-group .btn');
    const rightLabel = document.getElementById('rightLabel');

    let isPlaying = true;
    let time = 0;
    let targetAngle = 0;
    let currentAngle = 0;

    // Responsive Canvas Resizing
    let width = 0;
    let height = 0;
    let dpr = 1;

    function resize() {
      dpr = window.devicePixelRatio || 1;
      const rect = canvas.getBoundingClientRect();
      width = rect.width;
      height = rect.height;
      canvas.width = width * dpr;
      canvas.height = height * dpr;
      ctx.scale(dpr, dpr);
    }

    window.addEventListener('resize', resize);
    resize();

    // 3D Isometric Projection
    // x: along beam (0 to 1), y: vertical, z: depth
    function project(xNorm, y, z) {
      const startX = width * 0.08;
      const endX = width * 0.92;
      const originX = startX + xNorm * (endX - startX);
      const originY = height * 0.52;

      // isometric depth slant
      const cosZ = 0.866;
      const sinZ = 0.5;
      const depthScale = width < 480 ? 0.35 : 0.45;

      const px = originX + z * cosZ * depthScale;
      const py = originY - y - z * sinZ * depthScale;
      return { x: px, y: py };
    }

    function drawArrow(p1, p2, color, lineWidth = 1.5, headSize = 4) {
      const dx = p2.x - p1.x;
      const dy = p2.y - p1.y;
      const len = Math.hypot(dx, dy);
      if (len < 1) return;

      ctx.strokeStyle = color;
      ctx.fillStyle = color;
      ctx.lineWidth = lineWidth;
      ctx.beginPath();
      ctx.moveTo(p1.x, p1.y);
      ctx.lineTo(p2.x, p2.y);
      ctx.stroke();

      const angle = Math.atan2(dy, dx);
      ctx.beginPath();
      ctx.moveTo(p2.x, p2.y);
      ctx.lineTo(
        p2.x - headSize * Math.cos(angle - Math.PI / 6),
        p2.y - headSize * Math.sin(angle - Math.PI / 6)
      );
      ctx.lineTo(
        p2.x - headSize * Math.cos(angle + Math.PI / 6),
        p2.y - headSize * Math.sin(angle + Math.PI / 6)
      );
      ctx.closePath();
      ctx.fill();
    }

    function render() {
      ctx.clearRect(0, 0, width, height);

      // Smooth angle interpolation
      currentAngle += (targetAngle - currentAngle) * 0.1;

      const filterX = 0.48;
      const amp = Math.min(height * 0.28, 65);
      const k = Math.PI * 4; // wave spatial frequency

      // 1. Central Propagation Axis
      const startAxis = project(0.02, 0, 0);
      const endAxis = project(0.96, 0, 0);
      ctx.beginPath();
      ctx.strokeStyle = '#94a3b8';
      ctx.lineWidth = 2;
      ctx.setLineDash([4, 4]);
      ctx.moveTo(startAxis.x, startAxis.y);
      ctx.lineTo(endAxis.x, endAxis.y);
      ctx.stroke();
      ctx.setLineDash([]);

      // Axis Arrow at right end
      drawArrow(project(0.94, 0, 0), project(0.98, 0, 0), '#94a3b8', 2, 6);

      // 2. Unpolarized Waves (Left side: x = 0.05 to 0.45)
      // 4 different transverse angles: 0° (vertical), 90° (horizontal), 45°, 135°
      const waveAngles = [0, Math.PI / 2, Math.PI / 4, -Math.PI / 4];
      const leftSteps = 24;

      for (let i = 0; i <= leftSteps; i++) {
        const xN = 0.05 + (i / leftSteps) * (filterX - 0.08);
        const thetaAngle = waveAngles[i % waveAngles.length];
        const phase = xN * k - time;
        const val = Math.sin(phase) * amp;

        const y = val * Math.cos(thetaAngle);
        const z = val * Math.sin(thetaAngle);

        const pOrigin = project(xN, 0, 0);
        const pTip = project(xN, y, z);

        if (Math.abs(val) > 2) {
          drawArrow(pOrigin, pTip, 'rgba(2, 132, 199, 0.75)', 1.5, 3.5);
        }
      }

      // Continuous unpolarized sine wave envelopes for clarity
      waveAngles.forEach((ang, idx) => {
        ctx.beginPath();
        ctx.strokeStyle = idx === 0 ? 'rgba(2, 132, 199, 0.6)' : 'rgba(2, 132, 199, 0.2)';
        ctx.lineWidth = idx === 0 ? 2 : 1;
        for (let i = 0; i <= 60; i++) {
          const xN = 0.05 + (i / 60) * (filterX - 0.08);
          const val = Math.sin(xN * k - time) * amp;
          const pt = project(xN, val * Math.cos(ang), val * Math.sin(ang));
          if (i === 0) ctx.moveTo(pt.x, pt.y);
          else ctx.lineTo(pt.x, pt.y);
        }
        ctx.stroke();
      });

      // 3. Polarizing Filter Plate (at filterX)
      const radFilter = currentAngle * (Math.PI / 180);
      const plateSize = amp * 1.35;

      // Filter corners in Y-Z plane
      const pC = project(filterX, 0, 0);
      const corners = [
        project(filterX, plateSize, -plateSize),
        project(filterX, plateSize, plateSize),
        project(filterX, -plateSize, plateSize),
        project(filterX, -plateSize, -plateSize)
      ];

      // Plate background
      ctx.beginPath();
      ctx.moveTo(corners[0].x, corners[0].y);
      corners.forEach(c => ctx.lineTo(c.x, c.y));
      ctx.closePath();
      ctx.fillStyle = 'rgba(241, 245, 249, 0.7)';
      ctx.fill();
      ctx.strokeStyle = '#64748b';
      ctx.lineWidth = 2;
      ctx.stroke();

      // Slits on Filter
      const slitCount = 9;
      for (let s = -slitCount / 2; s <= slitCount / 2; s++) {
        const offset = (s / (slitCount / 2)) * (plateSize * 0.85);
        // Slit perpendicular direction:
        const perpY = -Math.sin(radFilter) * offset;
        const perpZ = Math.cos(radFilter) * offset;

        // Slit length parallel to transmission axis:
        const len = plateSize * 0.9;
        const p1 = project(filterX, perpY + Math.cos(radFilter) * len, perpZ + Math.sin(radFilter) * len);
        const p2 = project(filterX, perpY - Math.cos(radFilter) * len, perpZ - Math.sin(radFilter) * len);

        ctx.beginPath();
        ctx.strokeStyle = '#334155';
        ctx.lineWidth = 1.8;
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();
      }

      // 4. Linearly Polarized Wave (Right side: x = filterX + 0.02 to 0.94)
      // Amplitude follows Malus transmission for vertical incident component: cos(angle)
      const transAmp = amp * Math.cos(radFilter);
      const rightSteps = 32;

      for (let i = 0; i <= rightSteps; i++) {
        const xN = (filterX + 0.03) + (i / rightSteps) * (0.92 - filterX - 0.03);
        const phase = xN * k - time;
        const val = Math.sin(phase) * transAmp;

        const y = val * Math.cos(radFilter);
        const z = val * Math.sin(radFilter);

        const pOrigin = project(xN, 0, 0);
        const pTip = project(xN, y, z);

        if (Math.abs(val) > 1.5) {
          drawArrow(pOrigin, pTip, '#0284c7', 2, 4);
        }
      }

      // Continuous Polarized Sine Wave Curve
      ctx.beginPath();
      ctx.strokeStyle = '#0284c7';
      ctx.lineWidth = 2.5;
      for (let i = 0; i <= 80; i++) {
        const xN = (filterX + 0.03) + (i / 80) * (0.92 - filterX - 0.03);
        const val = Math.sin(xN * k - time) * transAmp;
        const pt = project(xN, val * Math.cos(radFilter), val * Math.sin(radFilter));
        if (i === 0) ctx.moveTo(pt.x, pt.y);
        else ctx.lineTo(pt.x, pt.y);
      }
      ctx.stroke();

      if (isPlaying) {
        time += 0.045;
      }
      requestAnimationFrame(render);
    }

    requestAnimationFrame(render);

    // Controls Handling
    angleBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        angleBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        targetAngle = parseFloat(btn.dataset.angle);

        if (targetAngle === 90) {
          rightLabel.textContent = 'Blocked (0% Light)';
        } else if (targetAngle === 45) {
          rightLabel.textContent = 'Polarized (45° Plane)';
        } else {
          rightLabel.textContent = 'Linearly Polarized';
        }
      });
    });

    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
    });
  </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>Polarization of Unpolarized Light</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: flex-start;
      padding: 12px;
      min-height: 100%;
    }

    .main-wrap {
      width: 100%;
      max-width: 680px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Interactive Angle Bar */
    .controls-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .ctrl-label {
      font-size: 14px;
      font-weight: 600;
      color: #475569;
    }

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

    .angle-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

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

    /* SVG Canvas Area */
    .svg-container {
      width: 100%;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      position: relative;
      overflow: hidden;
    }

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

    /* Equation Inset Panel */
    .equation-inset {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }

    .eq-title {
      font-size: 13px;
      font-weight: 600;
      color: #166534;
    }

    .eq-math {
      font-size: 15px;
      font-weight: 700;
      color: #14532d;
      font-family: 'Cambria Math', 'Times New Roman', serif;
      letter-spacing: 0.5px;
    }

    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
    }

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

    .badge-pol {
      background: #dbeafe;
      color: #1d4ed8;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="controls-row">
      <span class="ctrl-label">Polarizer 1 Axis:</span>
      <div class="btn-group">
        <button class="angle-btn active" onclick="setAxis(0, this)">0° (Vertical)</button>
        <button class="angle-btn" onclick="setAxis(45, this)">45°</button>
        <button class="angle-btn" onclick="setAxis(90, this)">90° (Horizontal)</button>
      </div>
    </div>

    
    <div class="svg-container">
      <svg viewBox="0 0 680 340" preserveAspectRatio="xMidYMid meet">
        <defs>
          
          <marker id="arrow-red" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#ef4444" />
          </marker>
          <marker id="arrow-blue" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7" />
          </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 1.5 L 8 5 L 0 8.5 z" fill="#64748b" />
          </marker>
          
          
          <linearGradient id="lensGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#f8fafc" stop-opacity="0.9" />
            <stop offset="100%" stop-color="#cbd5e1" stop-opacity="0.7" />
          </linearGradient>
        </defs>

        
        <line x1="40" y1="160" x2="640" y2="160" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4 4" marker-end="url(#arrow-axis)" />
        <text x="645" y="164" font-size="12" fill="#64748b" font-weight="600">Ray Path</text>

        
        <g transform="translate(140, 160)">
          
          <circle cx="0" cy="0" r="50" fill="#fef2f2" stroke="#fca5a5" stroke-width="1" stroke-dasharray="3 3" />
          
          
          
          <line x1="0" y1="46" x2="0" y2="-46" stroke="#ef4444" stroke-width="2.5" marker-start="url(#arrow-red)" marker-end="url(#arrow-red)" />
          
          <line x1="-46" y1="0" x2="46" y2="0" stroke="#ef4444" stroke-width="2.5" marker-start="url(#arrow-red)" marker-end="url(#arrow-red)" />
          
          <line x1="-33" y1="33" x2="33" y2="-33" stroke="#ef4444" stroke-width="2" opacity="0.7" marker-start="url(#arrow-red)" marker-end="url(#arrow-red)" />
          
          <line x1="-33" y1="-33" x2="33" y2="33" stroke="#ef4444" stroke-width="2" opacity="0.7" marker-start="url(#arrow-red)" marker-end="url(#arrow-red)" />

          
          <circle cx="0" cy="0" r="3.5" fill="#dc2626" />

          
          <text x="0" y="-58" text-anchor="middle" font-size="13" font-weight="700" fill="#dc2626">Random E-Vectors</text>
        </g>

        
        <g transform="translate(140, 265)">
          <rect x="-105" y="0" width="210" height="52" rx="6" fill="#ffffff" stroke="#fca5a5" stroke-width="1.5" />
          <text x="0" y="21" text-anchor="middle" font-size="14" font-weight="700" fill="#991b1b">Intensity = I₀</text>
          <text x="0" y="40" text-anchor="middle" font-size="13" font-weight="600" fill="#dc2626">Unpolarized Light</text>
        </g>

        
        <g id="polarizerGroup" transform="translate(340, 160)">
          
          <rect x="-35" y="-85" width="70" height="170" rx="12" fill="url(#lensGrad)" stroke="#475569" stroke-width="2" />

          
          <g id="gridLines">
            <line x1="-24" y1="-65" x2="-24" y2="65" stroke="#334155" stroke-width="1.5" opacity="0.4" />
            <line x1="-12" y1="-72" x2="-12" y2="72" stroke="#334155" stroke-width="1.5" opacity="0.4" />
            <line x1="0" y1="-75" x2="0" y2="75" stroke="#0284c7" stroke-width="2.5" />
            <line x1="12" y1="-72" x2="12" y2="72" stroke="#334155" stroke-width="1.5" opacity="0.4" />
            <line x1="24" y1="-65" x2="24" y2="65" stroke="#334155" stroke-width="1.5" opacity="0.4" />
          </g>

          
          <text x="0" y="-95" text-anchor="middle" font-size="14" font-weight="700" fill="#0f172a">Polarizer 1</text>
          <text id="axisLabelText" x="0" y="105" text-anchor="middle" font-size="12" font-weight="600" fill="#475569">Vertical Axis (0°)</text>
        </g>

        
        <path d="M 235 160 L 285 160" stroke="#cbd5e1" stroke-width="2" marker-end="url(#arrow-axis)" />
        <path d="M 395 160 L 445 160" stroke="#cbd5e1" stroke-width="2" marker-end="url(#arrow-axis)" />

        
        <g transform="translate(540, 160)">
          
          <circle cx="0" cy="0" r="50" fill="#f0f9ff" stroke="#bae6fd" stroke-width="1" stroke-dasharray="3 3" />
          
          
          <g id="transmittedVector">
            
            <line x1="0" y1="46" x2="0" y2="-46" stroke="#0284c7" stroke-width="3.5" marker-start="url(#arrow-blue)" marker-end="url(#arrow-blue)" />
          </g>

          
          <circle cx="0" cy="0" r="3.5" fill="#0369a1" />

          
          <text x="0" y="-58" text-anchor="middle" font-size="13" font-weight="700" fill="#0284c7">Single E-Plane</text>
        </g>

        
        <g transform="translate(540, 265)">
          <rect x="-105" y="0" width="210" height="52" rx="6" fill="#ffffff" stroke="#93c5fd" stroke-width="1.5" />
          <text x="0" y="21" text-anchor="middle" font-size="14" font-weight="700" fill="#1e40af">Intensity I₁ = ½ I₀</text>
          <text x="0" y="40" text-anchor="middle" font-size="13" font-weight="600" fill="#0284c7">Linearly Polarized</text>
        </g>
      </svg>
    </div>

    
    <div class="equation-inset">
      <div class="eq-title">Average over all angles:</div>
      <div class="eq-math">⟨cos²(ϕ)⟩ = ½ &nbsp;⟹&nbsp; I₁ = ½ I₀</div>
    </div>
  </div>

  <script>
    let currentAngle = 0;

    function setAxis(angle, btn) {
      currentAngle = angle;
      
      // Update active button state
      const buttons = document.querySelectorAll('.angle-btn');
      buttons.forEach(b => b.classList.remove('active'));
      if (btn) btn.classList.add('active');

      // Update Polarizer visual grid lines rotation
      const grid = document.getElementById('gridLines');
      if (grid) {
        grid.setAttribute('transform', `rotate(${angle})`);
      }

      // Update Transmitted vector rotation
      const transVec = document.getElementById('transmittedVector');
      if (transVec) {
        transVec.setAttribute('transform', `rotate(${angle})`);
      }

      // Update text badge
      const axisText = document.getElementById('axisLabelText');
      if (axisText) {
        if (angle === 0) axisText.textContent = "Vertical Axis (0°)";
        else if (angle === 90) axisText.textContent = "Horizontal Axis (90°)";
        else axisText.textContent = `Transmission Axis (${angle}°)`;
      }
    }
  </script>
</body>
</html>

OGS.13.PS.6

Aligned learning resources

Related diagrams