<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      padding: 12px;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
      justify-content: center;
    }

    /* Interactive current controller */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f1f5f9;
      padding: 8px 16px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      gap: 12px;
    }

    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      max-width: 260px;
    }

    input[type="range"] {
      flex: 1;
      accent-color: #2563eb;
      cursor: pointer;
      height: 6px;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

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

    .calc-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
    }

    .card-si {
      border-top: 4px solid #f97316;
    }

    .card-sk {
      border-top: 4px solid #10b981;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

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

    .diode-part {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }

    .badge-green {
      background: #dcfce7;
      color: #15803d;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid #bbf7d0;
    }

    .stat-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 13px;
      color: #475569;
      padding-bottom: 4px;
      border-bottom: 1px dashed #f1f5f9;
    }

    .stat-val {
      font-weight: 700;
      font-size: 14px;
      color: #1e2945;
      font-variant-numeric: tabular-nums;
    }

    .result-box {
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .res-si {
      background: #fff7ed;
      border: 1px solid #ffedd5;
    }

    .res-sk {
      background: #ecfdf5;
      border: 1px solid #d1fae5;
    }

    .result-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .res-si .result-label { color: #c2410c; }
    .res-sk .result-label { color: #047857; }

    .result-calc {
      font-size: 12px;
      color: #64748b;
      font-family: monospace;
    }

    .result-main {
      font-size: 19px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .res-si .result-main { color: #ea580c; }
    .res-sk .result-main { color: #059669; }

    /* Visual Loss Bar */
    .bar-bg {
      height: 6px;
      background: #e2e8f0;
      border-radius: 999px;
      overflow: hidden;
      margin-top: 2px;
    }

    .bar-fill-si {
      height: 100%;
      background: #ea580c;
      width: 100%;
      transition: width 0.15s ease;
    }

    .bar-fill-sk {
      height: 100%;
      background: #10b981;
      width: 50%;
      transition: width 0.15s ease;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <span><i>V</i><sub>in</sub> = 12.0 V</span>
    <div class="slider-wrap">
      <label for="currentSlider" style="font-size:12px; color:#475569;"><i>I</i><sub>load</sub>:</label>
      <input type="range" id="currentSlider" min="0.5" max="5.0" step="0.5" value="3.0">
      <span id="currentVal" style="min-width: 44px; color:#0f172a;">3.0 A</span>
    </div>
  </div>

  
  <div class="cards-grid">
    
    
    <div class="calc-card card-si">
      <div class="card-header">
        <div>
          <div class="diode-title">Silicon Diode</div>
          <div class="diode-part">1N5400 Series</div>
        </div>
      </div>

      <div class="stat-row">
        <span>Drop (<i>V</i><sub>F</sub>)</span>
        <span class="stat-val">0.70 V</span>
      </div>

      <div class="stat-row">
        <span>Load (<i>V</i><sub>load</sub>)</span>
        <span class="stat-val">11.30 V</span>
      </div>

      <div class="result-box res-si">
        <div class="result-label">
          <span>Heat Loss (<i>P</i><sub>loss</sub>)</span>
          <span>🔥</span>
        </div>
        <div class="result-calc" id="siCalc">3.0A × 0.70V</div>
        <div class="result-main" id="siPower">2.10 W</div>
        <div class="bar-bg">
          <div class="bar-fill-si" id="siBar"></div>
        </div>
      </div>
    </div>

    
    <div class="calc-card card-sk">
      <div class="card-header">
        <div>
          <div class="diode-title">Schottky Diode</div>
          <div class="diode-part">1N5822 Series</div>
        </div>
        <span class="badge-green">−50% Loss</span>
      </div>

      <div class="stat-row">
        <span>Drop (<i>V</i><sub>F</sub>)</span>
        <span class="stat-val">0.35 V</span>
      </div>

      <div class="stat-row">
        <span>Load (<i>V</i><sub>load</sub>)</span>
        <span class="stat-val" style="color:#059669;">11.65 V</span>
      </div>

      <div class="result-box res-sk">
        <div class="result-label">
          <span>Heat Loss (<i>P</i><sub>loss</sub>)</span>
          <span>⚡</span>
        </div>
        <div class="result-calc" id="skCalc">3.0A × 0.35V</div>
        <div class="result-main" id="skPower">1.05 W</div>
        <div class="bar-bg">
          <div class="bar-fill-sk" id="skBar"></div>
        </div>
      </div>
    </div>

  </div>

  <script>
    const slider = document.getElementById('currentSlider');
    const currentVal = document.getElementById('currentVal');
    const siCalc = document.getElementById('siCalc');
    const siPower = document.getElementById('siPower');
    const skCalc = document.getElementById('skCalc');
    const skPower = document.getElementById('skPower');
    const siBar = document.getElementById('siBar');
    const skBar = document.getElementById('skBar');

    const VF_SI = 0.70;
    const VF_SK = 0.35;
    const MAX_POWER = 5.0 * VF_SI; // 3.5 W max at 5A

    function update() {
      const i = parseFloat(slider.value);
      currentVal.textContent = i.toFixed(1) + ' A';

      const pSi = i * VF_SI;
      const pSk = i * VF_SK;

      siCalc.textContent = `${i.toFixed(1)}A × ${VF_SI.toFixed(2)}V`;
      siPower.textContent = `${pSi.toFixed(2)} W`;

      skCalc.textContent = `${i.toFixed(1)}A × ${VF_SK.toFixed(2)}V`;
      skPower.textContent = `${pSk.toFixed(2)} W`;

      siBar.style.width = `${(pSi / MAX_POWER) * 100}%`;
      skBar.style.width = `${(pSk / MAX_POWER) * 100}%`;
    }

    slider.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Diode Polarity Protection and Reverse-Battery Circuits

<!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: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
    }
    .badge-fwd {
      color: #15803d;
      background: #dcfce7;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 13px;
    }
    .badge-rev {
      color: #b91c1c;
      background: #fee2e2;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 13px;
    }
    .circuit-svg {
      width: 100%;
      height: 105px;
      display: block;
    }
    .flow-line {
      stroke-dasharray: 6, 6;
      animation: flow 1.2s linear infinite;
    }
    @keyframes flow {
      from { stroke-dashoffset: 24; }
      to { stroke-dashoffset: 0; }
    }
    .toggle-row {
      display: flex;
      gap: 8px;
      justify-content: center;
    }
    .mode-btn {
      flex: 1;
      max-width: 180px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, border-color 0.2s;
    }
    .mode-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
    .panel.highlight {
      box-shadow: 0 0 0 2px #22b7ff;
    }
  </style>
</head>
<body>

  <div class="toggle-row">
    <button class="mode-btn active" id="btnBoth" onclick="setMode('both')">View Both</button>
    <button class="mode-btn" id="btnFwd" onclick="setMode('fwd')">Forward Bias</button>
    <button class="mode-btn" id="btnRev" onclick="setMode('rev')">Reverse Bias</button>
  </div>

  
  <div class="panel" id="panelFwd">
    <div class="panel-header">
      <span style="color:#15803d">Forward Bias</span>
      <span class="badge-fwd">V<sub>F</sub> ≈ 0.7V &bull; Current Flows</span>
    </div>
    <svg class="circuit-svg" viewBox="0 0 460 100">
      
      <g transform="translate(30, 50)">
        <circle cx="0" cy="0" r="16" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5"/>
        <text x="0" y="5" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">+</text>
        <text x="0" y="28" text-anchor="middle" font-size="11" fill="#64748b">+12V</text>
      </g>

      
      <line x1="46" y1="50" x2="160" y2="50" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round"/>
      <line x1="46" y1="50" x2="160" y2="50" stroke="#22c55e" stroke-width="2" class="flow-line"/>

      
      <g transform="translate(210, 50)">
        
        <text x="-40" y="-18" text-anchor="middle" font-size="12" font-weight="600" fill="#1e2945">Anode (+)</text>
        
        <text x="40" y="-18" text-anchor="middle" font-size="12" font-weight="600" fill="#1e2945">Cathode (–)</text>
        
        
        <polygon points="-25,-20 -25,20 15,0" fill="#22c55e" stroke="#15803d" stroke-width="2" stroke-linejoin="round"/>
        
        <line x1="15" y1="-20" x2="15" y2="20" stroke="#15803d" stroke-width="3" stroke-linecap="round"/>
        
        <line x1="-50" y1="0" x2="-25" y2="0" stroke="#16a34a" stroke-width="2.5"/>
        <line x1="15" y1="0" x2="50" y2="0" stroke="#16a34a" stroke-width="2.5"/>
      </g>

      
      <line x1="260" y1="50" x2="390" y2="50" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round"/>
      <line x1="260" y1="50" x2="390" y2="50" stroke="#22c55e" stroke-width="2" class="flow-line"/>

      
      <g transform="translate(410, 50)">
        <rect x="-18" y="-16" width="36" height="32" rx="4" fill="#dcfce7" stroke="#16a34a" stroke-width="1.5"/>
        <text x="0" y="4" text-anchor="middle" font-size="11" font-weight="bold" fill="#15803d">LOAD</text>
        <text x="0" y="28" text-anchor="middle" font-size="11" fill="#15803d">I &gt; 0</text>
      </g>
    </svg>
  </div>

  
  <div class="panel" id="panelRev">
    <div class="panel-header">
      <span style="color:#b91c1c">Reverse Bias</span>
      <span class="badge-rev">I = 0 &bull; Blocked</span>
    </div>
    <svg class="circuit-svg" viewBox="0 0 460 100">
      
      <g transform="translate(30, 50)">
        <circle cx="0" cy="0" r="16" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5"/>
        <text x="0" y="5" text-anchor="middle" font-size="14" font-weight="bold" fill="#b91c1c">–</text>
        <text x="0" y="28" text-anchor="middle" font-size="11" fill="#64748b">Reverse</text>
      </g>

      
      <line x1="46" y1="50" x2="160" y2="50" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4,4"/>

      
      <g transform="translate(210, 50)">
        
        <text x="-40" y="-18" text-anchor="middle" font-size="12" font-weight="600" fill="#64748b">Anode (+)</text>
        
        <text x="40" y="-18" text-anchor="middle" font-size="12" font-weight="600" fill="#64748b">Cathode (–)</text>
        
        
        <polygon points="-25,-20 -25,20 15,0" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5" stroke-linejoin="round"/>
        
        <line x1="15" y1="-20" x2="15" y2="20" stroke="#94a3b8" stroke-width="2" stroke-linecap="round"/>
        
        
        <rect x="-8" y="-24" width="16" height="48" rx="3" fill="#fee2e2" stroke="#dc2626" stroke-width="1.5"/>
        <line x1="-4" y1="-14" x2="4" y2="14" stroke="#dc2626" stroke-width="2"/>
        <line x1="4" y1="-14" x2="-4" y2="14" stroke="#dc2626" stroke-width="2"/>

        
        <line x1="-50" y1="0" x2="-25" y2="0" stroke="#94a3b8" stroke-width="2"/>
        <line x1="15" y1="0" x2="50" y2="0" stroke="#94a3b8" stroke-width="2"/>
      </g>

      
      <line x1="260" y1="50" x2="390" y2="50" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4,4"/>

      
      <g transform="translate(410, 50)">
        <rect x="-18" y="-16" width="36" height="32" rx="4" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5"/>
        <text x="0" y="4" text-anchor="middle" font-size="11" font-weight="bold" fill="#64748b">LOAD</text>
        <text x="0" y="28" text-anchor="middle" font-size="11" fill="#b91c1c">Safe (I = 0)</text>
      </g>
    </svg>
  </div>

  <script>
    function setMode(mode) {
      const pFwd = document.getElementById('panelFwd');
      const pRev = document.getElementById('panelRev');
      const bBoth = document.getElementById('btnBoth');
      const bFwd = document.getElementById('btnFwd');
      const bRev = document.getElementById('btnRev');

      bBoth.classList.toggle('active', mode === 'both');
      bFwd.classList.toggle('active', mode === 'fwd');
      bRev.classList.toggle('active', mode === 'rev');

      if (mode === 'both') {
        pFwd.style.opacity = '1';
        pRev.style.opacity = '1';
        pFwd.classList.remove('highlight');
        pRev.classList.remove('highlight');
      } else if (mode === 'fwd') {
        pFwd.style.opacity = '1';
        pRev.style.opacity = '0.35';
        pFwd.classList.add('highlight');
        pRev.classList.remove('highlight');
      } else {
        pFwd.style.opacity = '0.35';
        pRev.style.opacity = '1';
        pFwd.classList.remove('highlight');
        pRev.classList.add('highlight');
      }
    }
  </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>Diode Reverse Polarity Protection</title>
  <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: #1e2945;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 20px;
    }

    .toggle-btn {
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid transparent;
      border-radius: 16px;
      background: transparent;
      color: #64748b;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #0f172a;
      border-color: #cbd5e1;
    }

    .schematic-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

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

    .wire {
      stroke: #334155;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .current-line {
      stroke: #16a34a;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 8, 8;
      animation: flow 2.2s linear infinite;
      fill: none;
    }

    @keyframes flow {
      from { stroke-dashoffset: 0; }
      to { stroke-dashoffset: -16; }
    }

    .blocked-x {
      stroke: #dc2626;
      stroke-width: 3;
      stroke-linecap: round;
    }

    .metric-box {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 8px 12px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      font-size: 13px;
      font-weight: 600;
    }

    .val-active { color: #16a34a; }
    .val-blocked { color: #dc2626; }
    .math { font-family: "Cambria Math", "Times New Roman", serif; font-style: italic; }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="toggle-btn active" id="btnNormal" onclick="setMode('normal')">✓ Normal Supply</button>
    <button class="toggle-btn" id="btnReverse" onclick="setMode('reverse')">✕ Reverse Supply</button>
  </div>

  <div class="schematic-container">
    <svg viewBox="0 0 340 180" aria-label="Diode Circuit Schematic">
      
      <path class="wire" d="M 60 70 L 60 40 L 130 40" />
      <path class="wire" d="M 170 40 L 270 40 L 270 70" />
      <path class="wire" d="M 60 110 L 60 145 L 270 145 L 270 110" />

      
      <g id="flowLayer">
        <path class="current-line" d="M 60 70 L 60 40 L 130 40" />
        <path class="current-line" d="M 170 40 L 270 40 L 270 70" />
        <path class="current-line" d="M 270 110 L 270 145 L 60 145 L 60 110" />
      </g>

      
      <g id="batteryGroup" transform="translate(60, 90)">
        
        <line x1="0" y1="-20" x2="0" y2="-8" stroke="#334155" stroke-width="2.5"/>
        
        <line id="batPl1" x1="-14" y1="-8" x2="14" y2="-8" stroke="#334155" stroke-width="2.5"/>
        
        <line id="batPl2" x1="-8" y1="8" x2="8" y2="8" stroke="#334155" stroke-width="4"/>
        
        <line x1="0" y1="8" x2="0" y2="20" stroke="#334155" stroke-width="2.5"/>
        
        <text id="batLabelTop" x="-22" y="-5" font-size="12" font-weight="bold" fill="#16a34a">+</text>
        <text id="batLabelBtm" x="-20" y="12" font-size="14" font-weight="bold" fill="#64748b">−</text>
        <text id="batLabelText" x="22" y="4" font-size="11" font-weight="bold" fill="#1e2945">12V</text>
      </g>

      
      <g transform="translate(150, 40)">
        
        <polygon points="-12,-10 10,0 -12,10" fill="#2563eb" stroke="#2563eb" stroke-width="1.5" stroke-linejoin="round"/>
        
        <line x1="10" y1="-11" x2="10" y2="11" stroke="#2563eb" stroke-width="3" stroke-linecap="round"/>
        <text x="-14" y="-14" font-size="10" fill="#64748b" font-weight="bold">A</text>
        <text x="8" y="-14" font-size="10" fill="#64748b" font-weight="bold">K</text>
        <text x="-4" y="24" font-size="11" font-weight="bold" fill="#2563eb">Diode</text>
      </g>

      
      <g id="blockIndicator" opacity="0" transform="translate(150, 40)" style="transition: opacity 0.3s ease;">
        <circle cx="0" cy="0" r="18" fill="none" stroke="#dc2626" stroke-width="2" stroke-dasharray="3,3"/>
        <line class="blocked-x" x1="-8" y1="-8" x2="8" y2="8" />
        <line class="blocked-x" x1="8" y1="-8" x2="-8" y2="8" />
      </g>

      
      <g transform="translate(270, 90)">
        <rect x="-10" y="-18" width="20" height="36" fill="#f8fafc" stroke="#334155" stroke-width="2" rx="2"/>
        <text x="16" y="4" font-size="11" font-weight="bold" fill="#1e2945">Load (R<tspan dy="3" font-size="8">L</tspan>)</text>
      </g>
    </svg>

    <div class="metric-box">
      <span id="stateLabel" class="val-active">Forward Biased (ON)</span>
      <span id="mathLabel" class="math">V<sub style="font-size:9px">load</sub> = V<sub style="font-size:9px">in</sub> − V<sub style="font-size:9px">F</sub> ≈ 11.3V</span>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const btnN = document.getElementById('btnNormal');
      const btnR = document.getElementById('btnReverse');
      const flow = document.getElementById('flowLayer');
      const block = document.getElementById('blockIndicator');
      const stateLbl = document.getElementById('stateLabel');
      const mathLbl = document.getElementById('mathLabel');
      
      const topPl = document.getElementById('batPl1');
      const btmPl = document.getElementById('batPl2');
      const topTxt = document.getElementById('batLabelTop');
      const btmTxt = document.getElementById('batLabelBtm');

      if (mode === 'normal') {
        btnN.classList.add('active');
        btnR.classList.remove('active');
        flow.style.display = 'inline';
        block.setAttribute('opacity', '0');
        
        topPl.setAttribute('x1', '-14'); topPl.setAttribute('x2', '14'); topPl.setAttribute('stroke-width', '2.5');
        btmPl.setAttribute('x1', '-8');  btmPl.setAttribute('x2', '8');  btmPl.setAttribute('stroke-width', '4');
        topTxt.textContent = '+'; topTxt.setAttribute('fill', '#16a34a');
        btmTxt.textContent = '−'; btmTxt.setAttribute('fill', '#64748b');

        stateLbl.className = 'val-active';
        stateLbl.textContent = 'Forward Biased (ON)';
        mathLbl.innerHTML = 'V<sub style="font-size:9px">load</sub> = V<sub style="font-size:9px">in</sub> − V<sub style="font-size:9px">F</sub> ≈ 11.3V';
      } else {
        btnR.classList.add('active');
        btnN.classList.remove('active');
        flow.style.display = 'none';
        block.setAttribute('opacity', '1');

        topPl.setAttribute('x1', '-8');  topPl.setAttribute('x2', '8');  topPl.setAttribute('stroke-width', '4');
        btmPl.setAttribute('x1', '-14'); btmPl.setAttribute('x2', '14'); btmPl.setAttribute('stroke-width', '2.5');
        topTxt.textContent = '−'; topTxt.setAttribute('fill', '#dc2626');
        btmTxt.textContent = '+'; btmTxt.setAttribute('fill', '#64748b');

        stateLbl.className = 'val-blocked';
        stateLbl.textContent = 'Reverse Biased (OFF)';
        mathLbl.innerHTML = 'V<sub style="font-size:9px">load</sub> = 0V (Protected)';
      }
    }
  </script>
</body>
</html>

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

    .nav-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 580px;
    }

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

    .nav-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .nav-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }

    .graph-container {
      width: 100%;
      max-width: 580px;
      position: relative;
    }

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

    .axis-line {
      stroke: #64748b;
      stroke-width: 1.5;
    }

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

    .axis-text {
      font-size: 12px;
      fill: #475569;
      font-weight: 500;
    }

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

    .curve-bg {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .curve-fwd {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3.5;
      stroke-linecap: round;
      transition: stroke-width 0.25s, stroke 0.25s;
    }

    .curve-rev {
      fill: none;
      stroke: #0d9488;
      stroke-width: 3.5;
      stroke-linecap: round;
      transition: stroke-width 0.25s, stroke 0.25s;
    }

    .curve-brk {
      fill: none;
      stroke: #e11d48;
      stroke-width: 3.5;
      stroke-linecap: round;
      transition: stroke-width 0.25s, stroke 0.25s;
    }

    .zone-rect {
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .annotation {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .knee-marker {
      fill: #0284c7;
      stroke: #ffffff;
      stroke-width: 2;
    }

    .info-pill {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 20px;
      text-align: center;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="nav-btn active" onclick="setZone('all')">All Zones</button>
    <button class="nav-btn" onclick="setZone('fwd')">1. Forward Bias</button>
    <button class="nav-btn" onclick="setZone('rev')">2. Reverse Bias</button>
    <button class="nav-btn" onclick="setZone('brk')">3. Breakdown</button>
  </div>

  <div class="graph-container">
    <svg viewBox="0 0 540 340">
      <defs>
        
        <marker id="arr" 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="#64748b"/>
        </marker>
        <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
          <feDropShadow dx="0" dy="1" stdDeviation="2" flood-color="#000" flood-opacity="0.08"/>
        </filter>
      </defs>

      
      <rect id="zoneFwd" class="zone-rect" x="330" y="25" width="185" height="175" fill="#e0f2fe" opacity="0" rx="6" />
      <rect id="zoneRev" class="zone-rect" x="120" y="175" width="210" height="70" fill="#ccfbf1" opacity="0" rx="6" />
      <rect id="zoneBrk" class="zone-rect" x="25" y="175" width="95" height="145" fill="#ffe4e6" opacity="0" rx="6" />

      
      <line x1="80" y1="20" x2="80" y2="310" class="grid-line" />
      <line x1="435" y1="20" x2="435" y2="310" class="grid-line" />
      <line x1="25" y1="100" x2="515" y2="100" class="grid-line" />

      
      
      <line x1="20" y1="200" x2="525" y2="200" class="axis-line" marker-end="url(#arr)" />
      
      <line x1="330" y1="325" x2="330" y2="15" class="axis-line" marker-end="url(#arr)" />

      
      <text x="525" y="194" text-anchor="end" class="axis-title">V<tspan font-size="10" dy="3">D</tspan><tspan font-size="12" dy="-3"> (V)</tspan></text>
      <text x="340" y="24" class="axis-title">I<tspan font-size="10" dy="3">D</tspan><tspan font-size="12" dy="-3"> (mA)</tspan></text>
      <text x="340" y="320" class="axis-title" fill="#0d9488">I<tspan font-size="10" dy="3">D</tspan><tspan font-size="12" dy="-3"> (µA / nA)</tspan></text>

      
      
      <text x="322" y="215" text-anchor="end" class="axis-text" font-weight="700">0</text>
      
      
      <line x1="435" y1="197" x2="435" y2="203" stroke="#64748b" stroke-width="1.5" />
      <text x="435" y="216" text-anchor="middle" class="axis-text">+0.7V</text>

      <line x1="495" y1="197" x2="495" y2="203" stroke="#64748b" stroke-width="1.5" />
      <text x="495" y="216" text-anchor="middle" class="axis-text">+1.0V</text>

      
      <line x1="80" y1="197" x2="80" y2="203" stroke="#64748b" stroke-width="1.5" />
      <text x="80" y="216" text-anchor="middle" class="axis-text">-50V</text>
      <text x="80" y="230" text-anchor="middle" font-size="10" fill="#e11d48" font-weight="700">(V<tspan font-size="8" dy="2">BR</tspan><tspan font-size="10" dy="-2">)</tspan></text>

      
      <g stroke="#94a3b8" stroke-width="1.5" fill="none">
        <line x1="200" y1="194" x2="206" y2="206" />
        <line x1="206" y1="194" x2="212" y2="206" />
      </g>

      
      
      <path id="curveBrk" class="curve-brk" d="M 80 305 L 80 205 Q 80 202 95 202" />
      
      
      <path id="curveRev" class="curve-rev" d="M 95 202 L 330 200" />
      
      
      <path id="curveFwd" class="curve-fwd" d="M 330 200 L 415 200 Q 435 198 450 150 Q 465 95 475 35" />

      
      
      <g id="calloutBrk" class="annotation">
        <circle cx="80" cy="250" r="4" fill="#e11d48" />
        <rect x="15" y="240" width="125" height="42" rx="6" fill="#ffffff" stroke="#e11d48" stroke-width="1.5" filter="url(#shadow)" />
        <text x="77" y="257" text-anchor="middle" font-size="11" font-weight="700" fill="#e11d48">Breakdown V<tspan font-size="9" dy="2">BR</tspan></text>
        <text x="77" y="272" text-anchor="middle" font-size="10" font-weight="500" fill="#64748b">Avalanche Surge</text>
      </g>

      
      <g id="calloutRev" class="annotation">
        <line x1="250" y1="202" x2="250" y2="245" stroke="#0d9488" stroke-width="1" stroke-dasharray="2 2" />
        <rect x="180" y="245" width="140" height="42" rx="6" fill="#ffffff" stroke="#0d9488" stroke-width="1.5" filter="url(#shadow)" />
        <text x="250" y="262" text-anchor="middle" font-size="11" font-weight="700" fill="#0d9488">Leakage Current I<tspan font-size="9" dy="2">S</tspan></text>
        <text x="250" y="277" text-anchor="middle" font-size="10" font-weight="500" fill="#64748b">≈ nanoamps (flat)</text>
      </g>

      
      <g id="calloutFwd" class="annotation">
        <circle cx="435" cy="190" r="5" class="knee-marker" />
        <line x1="435" y1="190" x2="435" y2="120" stroke="#0284c7" stroke-width="1" stroke-dasharray="2 2" />
        <rect x="365" y="75" width="145" height="44" rx="6" fill="#ffffff" stroke="#0284c7" stroke-width="1.5" filter="url(#shadow)" />
        <text x="437" y="93" text-anchor="middle" font-size="11" font-weight="700" fill="#0284c7">Turn-On Knee ≈ 0.7 V</text>
        <text x="437" y="108" text-anchor="middle" font-size="10" font-weight="500" fill="#64748b">Conducts heavily (mA)</text>
      </g>
    </svg>
  </div>

  <div id="infoPill" class="info-pill">
    Silicon Diode: Zero current until 0.7 V threshold
  </div>

  <script>
    const descriptions = {
      all: "Silicon Diode: Zero current until 0.7 V threshold",
      fwd: "Forward Bias: Conduction turns ON sharply at V_F ≈ 0.7 V",
      rev: "Reverse Bias: Tiny leakage current I_S (nanoamps)",
      brk: "Reverse Breakdown: Heavy conduction at V_BR ≈ -50 V"
    };

    function setZone(zone) {
      // Update Buttons
      const btns = document.querySelectorAll('.nav-btn');
      btns.forEach(b => b.classList.remove('active'));
      const activeIdx = ['all', 'fwd', 'rev', 'brk'].indexOf(zone);
      if (activeIdx >= 0) btns[activeIdx].classList.add('active');

      // Elements
      const zFwd = document.getElementById('zoneFwd');
      const zRev = document.getElementById('zoneRev');
      const zBrk = document.getElementById('zoneBrk');

      const cFwd = document.getElementById('curveFwd');
      const cRev = document.getElementById('curveRev');
      const cBrk = document.getElementById('curveBrk');

      const aFwd = document.getElementById('calloutFwd');
      const aRev = document.getElementById('calloutRev');
      const aBrk = document.getElementById('calloutBrk');

      const pill = document.getElementById('infoPill');
      pill.textContent = descriptions[zone];

      if (zone === 'all') {
        zFwd.style.opacity = '0.35';
        zRev.style.opacity = '0.35';
        zBrk.style.opacity = '0.35';

        cFwd.style.opacity = '1'; cFwd.style.strokeWidth = '3.5';
        cRev.style.opacity = '1'; cRev.style.strokeWidth = '3.5';
        cBrk.style.opacity = '1'; cBrk.style.strokeWidth = '3.5';

        aFwd.style.opacity = '1';
        aRev.style.opacity = '1';
        aBrk.style.opacity = '1';
      } else if (zone === 'fwd') {
        zFwd.style.opacity = '0.7';
        zRev.style.opacity = '0';
        zBrk.style.opacity = '0';

        cFwd.style.opacity = '1'; cFwd.style.strokeWidth = '5';
        cRev.style.opacity = '0.25'; cRev.style.strokeWidth = '2';
        cBrk.style.opacity = '0.25'; cBrk.style.strokeWidth = '2';

        aFwd.style.opacity = '1';
        aRev.style.opacity = '0.15';
        aBrk.style.opacity = '0.15';
      } else if (zone === 'rev') {
        zFwd.style.opacity = '0';
        zRev.style.opacity = '0.7';
        zBrk.style.opacity = '0';

        cFwd.style.opacity = '0.25'; cFwd.style.strokeWidth = '2';
        cRev.style.opacity = '1'; cRev.style.strokeWidth = '5';
        cBrk.style.opacity = '0.25'; cBrk.style.strokeWidth = '2';

        aFwd.style.opacity = '0.15';
        aRev.style.opacity = '1';
        aBrk.style.opacity = '0.15';
      } else if (zone === 'brk') {
        zFwd.style.opacity = '0';
        zRev.style.opacity = '0';
        zBrk.style.opacity = '0.7';

        cFwd.style.opacity = '0.25'; cFwd.style.strokeWidth = '2';
        cRev.style.opacity = '0.25'; cRev.style.strokeWidth = '2';
        cBrk.style.opacity = '1'; cBrk.style.strokeWidth = '5';

        aFwd.style.opacity = '0.15';
        aRev.style.opacity = '0.15';
        aBrk.style.opacity = '1';
      }
    }

    // Initialize in 'all' view
    setZone('all');
  </script>
</body>
</html>

Silicon PN Junction I-V Characteristics and Turn-On Voltage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Diode Dynamic Resistance Calculation</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: #ffffff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1.18fr 0.82fr;
      gap: 12px;
      align-items: stretch;
    }

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

    .panel-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

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

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

    .axis-line { stroke: #64748b; stroke-width: 1.5; }
    .grid-line { stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 2,3; }
    .proj-line { stroke: #94a3b8; stroke-width: 1.2; stroke-dasharray: 3,3; }
    .secant-line { stroke: #9333ea; stroke-width: 1.8; stroke-dasharray: 4,4; opacity: 0.85; }
    .curve-path { fill: none; stroke: #0284c7; stroke-width: 3.2; stroke-linecap: round; }
    .delta-tri { fill: rgba(245, 158, 11, 0.12); stroke: none; }
    .delta-v { stroke: #059669; stroke-width: 2.5; stroke-linecap: round; }
    .delta-i { stroke: #d97706; stroke-width: 2.5; stroke-linecap: round; }

    .tick-label {
      font-size: 11px;
      fill: #64748b;
      font-weight: 500;
      font-family: system-ui, sans-serif;
    }
    .axis-title {
      font-size: 11.5px;
      fill: #0f172a;
      font-weight: 700;
      font-family: system-ui, sans-serif;
    }

    .point-dot {
      fill: #0f172a;
      stroke: #ffffff;
      stroke-width: 2;
      cursor: pointer;
      transition: opacity 0.2s ease;
    }
    .point-dot:hover {
      opacity: 0.8;
    }

    .calc-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .step-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
      flex: 1;
    }

    .step-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 12px;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .step-box.active {
      border-color: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.18);
      background: #f0f9ff;
    }

    .frac-row {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 4px;
      white-space: nowrap;
      overflow-x: auto;
    }
    .frac {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      padding: 0 3px;
      font-size: 11.5px;
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .frac-top {
      border-bottom: 1.5px solid #1e2945;
      padding-bottom: 1px;
      text-align: center;
      width: 100%;
      white-space: nowrap;
    }
    .frac-bot {
      padding-top: 1px;
      text-align: center;
      width: 100%;
      white-space: nowrap;
    }

    .val-dv { color: #059669; font-weight: 700; }
    .val-di { color: #d97706; font-weight: 700; }
    .val-res { color: #0284c7; font-weight: 800; font-size: 13.5px; }

    .badge-result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #0284c7;
      color: #ffffff;
      padding: 6px 10px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 12.5px;
    }

    .key-note {
      font-size: 10.5px;
      color: #475569;
      line-height: 1.35;
      background: #ffffff;
      border-left: 3px solid #0284c7;
      padding: 5px 8px;
      border-radius: 0 6px 6px 0;
      margin-top: 6px;
      border-top: 1px solid #f1f5f9;
      border-right: 1px solid #f1f5f9;
      border-bottom: 1px solid #f1f5f9;
    }

    .tag-secant {
      color: #9333ea;
      font-weight: 600;
      font-size: 11.5px;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="panel-card">
      <div class="graph-container">
        <svg viewBox="0 0 340 260" aria-label="Silicon Diode Forward I-V Curve">
          <defs>
            <marker id="arrow-v" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto">
              <path d="M 0 6 L 3 0 L 6 6 z" fill="#64748b"/>
            </marker>
            <marker id="arrow-i" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto">
              <path d="M 0 0 L 6 3 L 0 6 z" fill="#64748b"/>
            </marker>
          </defs>

          
          <line x1="48" y1="185" x2="320" y2="185" class="grid-line"/>
          <line x1="48" y1="135" x2="320" y2="135" class="grid-line"/>
          <line x1="48" y1="85" x2="320" y2="85" class="grid-line"/>
          <line x1="48" y1="35" x2="320" y2="35" class="grid-line"/>

          
          <line x1="108" y1="235" x2="108" y2="35" class="grid-line"/>
          <line x1="168" y1="235" x2="168" y2="35" class="grid-line"/>
          <line x1="228" y1="235" x2="228" y2="35" class="grid-line"/>
          <line x1="288" y1="235" x2="288" y2="35" class="grid-line"/>

          
          <line x1="48" y1="235" x2="48" y2="20" class="axis-line" marker-end="url(#arrow-v)"/>
          <line x1="48" y1="235" x2="325" y2="235" class="axis-line" marker-end="url(#arrow-i)"/>

          
          <text x="48" y="12" text-anchor="middle" class="axis-title">I (mA)</text>
          <text x="42" y="238" text-anchor="end" class="tick-label">0</text>
          <text x="42" y="188" text-anchor="end" class="tick-label">10</text>
          <text x="42" y="138" text-anchor="end" class="tick-label">20</text>
          <text x="42" y="88" text-anchor="end" class="tick-label">30</text>
          <text x="42" y="38" text-anchor="end" class="tick-label">40</text>

          
          <text x="48" y="250" text-anchor="middle" class="tick-label">0.60</text>
          <text x="108" y="250" text-anchor="middle" class="tick-label">0.64</text>
          <text x="168" y="250" text-anchor="middle" class="tick-label">0.68</text>
          <text x="228" y="250" text-anchor="middle" class="tick-label">0.72</text>
          <text x="288" y="250" text-anchor="middle" class="tick-label">0.76</text>
          <text x="330" y="250" text-anchor="end" class="axis-title">V (V)</text>

          
          <line x1="48" y1="185" x2="168" y2="185" class="proj-line"/>
          <line x1="168" y1="235" x2="168" y2="185" class="proj-line"/>
          <line x1="48" y1="85" x2="228" y2="85" class="proj-line"/>
          <line x1="228" y1="235" x2="228" y2="85" class="proj-line"/>

          
          <line x1="138" y1="235" x2="258" y2="35" class="secant-line"/>

          
          <polygon points="168,185 228,185 228,85" class="delta-tri"/>

          
          <line x1="168" y1="185" x2="228" y2="185" class="delta-v"/>
          <line x1="228" y1="185" x2="228" y2="85" class="delta-i"/>

          
          <rect x="170" y="191" width="56" height="15" rx="3.5" fill="#ecfdf5" stroke="#a7f3d0" stroke-width="0.8"/>
          <text x="198" y="202.5" text-anchor="middle" font-size="9.5" font-weight="700" fill="#059669">ΔV = 0.04 V</text>

          <rect x="234" y="127" width="58" height="15" rx="3.5" fill="#fffbeb" stroke="#fde68a" stroke-width="0.8"/>
          <text x="263" y="138.5" text-anchor="middle" font-size="9.5" font-weight="700" fill="#d97706">ΔI = 20 mA</text>

          
          <path d="M 48 232 
                   C 108 230, 145 220, 168 185 
                   C 192 148, 214 110, 228 85 
                   C 238 66, 247 46, 255 30" 
                class="curve-path"/>

          
          <circle cx="168" cy="185" r="4.5" class="point-dot" id="dotA"/>
          <circle cx="228" cy="85" r="4.5" class="point-dot" id="dotB"/>

          
          <g transform="translate(68, 160)">
            <rect width="92" height="19" rx="4" fill="#0f172a" opacity="0.95"/>
            <text x="46" y="13" text-anchor="middle" fill="#ffffff" font-size="9.5" font-weight="700">A (0.68 V, 10 mA)</text>
          </g>

          <g transform="translate(128, 55)">
            <rect width="92" height="19" rx="4" fill="#0f172a" opacity="0.95"/>
            <text x="46" y="13" text-anchor="middle" fill="#ffffff" font-size="9.5" font-weight="700">B (0.72 V, 30 mA)</text>
          </g>
        </svg>
      </div>
    </div>

    
    <div class="panel-card">
      <div class="calc-title">
        <span>Dynamic Resistance (r<sub>d</sub>)</span>
        <span class="tag-secant">1 / Slope</span>
      </div>

      <div class="step-list">
        
        <div class="step-box active" id="step1">
          <div class="frac-row">
            <strong>1. Definition:</strong>
            <span style="margin-left: 2px;">r<sub>d</sub> =</span>
            <div class="frac">
              <span class="frac-top val-dv">ΔV<sub>D</sub></span>
              <span class="frac-bot val-di">ΔI<sub>D</sub></span>
            </div>
            <span>=</span>
            <div class="frac">
              <span class="frac-top">1</span>
              <span class="frac-bot">Slope</span>
            </div>
          </div>
        </div>

        
        <div class="step-box" id="step2">
          <div class="frac-row">
            <strong>2. Δ Values:</strong>
            <span style="margin-left: 2px;">r<sub>d</sub> =</span>
            <div class="frac">
              <span class="frac-top val-dv">0.72 V − 0.68 V</span>
              <span class="frac-bot val-di">30 mA − 10 mA</span>
            </div>
            <span>=</span>
            <div class="frac">
              <span class="frac-top val-dv">0.04 V</span>
              <span class="frac-bot val-di">0.020 A</span>
            </div>
          </div>
        </div>

        
        <div class="step-box" id="step3">
          <div class="badge-result">
            <span>3. Final Result (r<sub>d</sub>):</span>
            <span class="val-res" style="color: #ffffff;">2.0 Ω</span>
          </div>
        </div>
      </div>

      <div class="key-note">
        <strong>A-Level Key:</strong> Dynamic resistance <em>r<sub>d</sub> = ΔV/ΔI</em> is the reciprocal of the I-V graph's local gradient and decreases as current increases in the forward-bias region.
      </div>
    </div>
  </div>

  <script>
    const steps = [document.getElementById('step1'), document.getElementById('step2'), document.getElementById('step3')];
    let currentStep = 0;

    function setStep(index) {
      currentStep = index;
      steps.forEach((el, i) => {
        if (i === currentStep) {
          el.classList.add('active');
        } else {
          el.classList.remove('active');
        }
      });
    }

    steps.forEach((s, idx) => {
      s.addEventListener('click', () => setStep(idx));
    });

    // Auto-cycle steps smoothly every 4 seconds
    setInterval(() => {
      setStep((currentStep + 1) % steps.length);
    }, 4000);
  </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>PN Junction: Forward vs Reverse Bias</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #ffffff;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 10px;
  }

  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 660px;
  }

  @media (max-width: 500px) {
    .grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }
  }

  .panel {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .badge {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .badge-fwd {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
  }

  .badge-rev {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
  }

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

  .footer-stat {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    text-align: center;
    width: 100%;
  }

  .stat-fwd {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
  }

  .stat-rev {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
  }

  /* Animated carriers */
  @keyframes flowRight {
    0% { transform: translateX(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(45px); opacity: 0; }
  }

  @keyframes flowLeft {
    0% { transform: translateX(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(-45px); opacity: 0; }
  }

  @keyframes slowDrift {
    0% { transform: translateX(0); opacity: 0.2; }
    50% { opacity: 0.9; }
    100% { transform: translateX(50px); opacity: 0.2; }
  }

  .carrier-fwd-p { animation: flowRight 1.6s ease-in-out infinite; }
  .carrier-fwd-n { animation: flowLeft 1.6s ease-in-out infinite; }
  .carrier-drift { animation: slowDrift 3.5s linear infinite; }
</style>
</head>
<body>

<div class="grid">
  
  <div class="panel">
    <div class="badge badge-fwd">Forward Bias (V &gt; 0.7 V)</div>
    <svg viewBox="0 0 300 170" aria-label="Forward bias PN junction">
      <defs>
        
        <linearGradient id="pGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#fed7aa" />
          <stop offset="100%" stop-color="#ffedd5" />
        </linearGradient>
        <linearGradient id="nGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#dbeafe" />
          <stop offset="100%" stop-color="#bfdbfe" />
        </linearGradient>
        <marker id="arrowR" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#ea580c" />
        </marker>
        <marker id="arrowL" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#2563eb" />
        </marker>
      </defs>

      
      <rect x="20" y="25" width="125" height="110" fill="url(#pGrad)" rx="6" />
      <rect x="155" y="25" width="125" height="110" fill="url(#nGrad)" rx="6" />

      
      <rect x="135" y="25" width="30" height="110" fill="#cbd5e1" opacity="0.65" />
      <line x1="135" y1="25" x2="135" y2="135" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
      <line x1="165" y1="25" x2="165" y2="135" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />

      
      <path d="M 5 80 L 20 80" stroke="#ea580c" stroke-width="3" stroke-linecap="round" />
      <text x="12" y="70" font-size="14" font-weight="bold" fill="#ea580c" text-anchor="middle">+</text>

      <path d="M 280 80 L 295 80" stroke="#2563eb" stroke-width="3" stroke-linecap="round" />
      <text x="288" y="70" font-size="16" font-weight="bold" fill="#2563eb" text-anchor="middle">−</text>

      
      <text x="50" y="44" font-size="13" font-weight="bold" fill="#c2410c">p-type</text>
      <text x="250" y="44" font-size="13" font-weight="bold" fill="#1d4ed8" text-anchor="end">n-type</text>

      
      <text x="150" y="18" font-size="10.5" font-weight="700" fill="#64748b" text-anchor="middle">Narrow Barrier</text>
      <path d="M 137 21 L 163 21" stroke="#64748b" stroke-width="1" marker-start="url(#arrowL)" marker-end="url(#arrowR)" />

      
      <g class="carrier-fwd-p">
        <circle cx="50" cy="65" r="7" fill="#ea580c" />
        <text x="50" y="69" fill="#fff" font-size="11" font-weight="bold" text-anchor="middle">+</text>
        <circle cx="85" cy="85" r="7" fill="#ea580c" />
        <text x="85" y="89" fill="#fff" font-size="11" font-weight="bold" text-anchor="middle">+</text>
        <circle cx="60" cy="110" r="7" fill="#ea580c" />
        <text x="60" y="114" fill="#fff" font-size="11" font-weight="bold" text-anchor="middle">+</text>
      </g>
      
      
      <line x1="98" y1="85" x2="128" y2="85" stroke="#ea580c" stroke-width="2" marker-end="url(#arrowR)" />

      <g class="carrier-fwd-n">
        <circle cx="250" cy="65" r="7" fill="#2563eb" />
        <text x="250" y="69" fill="#fff" font-size="11" font-weight="bold" text-anchor="middle">−</text>
        <circle cx="215" cy="85" r="7" fill="#2563eb" />
        <text x="215" y="89" fill="#fff" font-size="11" font-weight="bold" text-anchor="middle">−</text>
        <circle cx="240" cy="110" r="7" fill="#2563eb" />
        <text x="240" y="114" fill="#fff" font-size="11" font-weight="bold" text-anchor="middle">−</text>
      </g>

      <line x1="202" y1="85" x2="172" y2="85" stroke="#2563eb" stroke-width="2" marker-end="url(#arrowL)" />

      
      <path d="M 90 152 L 210 152" stroke="#16a34a" stroke-width="3" marker-end="url(#arrowR)" />
      <text x="150" y="165" font-size="11" font-weight="bold" fill="#15803d" text-anchor="middle">Surging Diffusion Current</text>
    </svg>
    <div class="footer-stat stat-fwd">Current: <strong>mA (Large)</strong></div>
  </div>

  
  <div class="panel">
    <div class="badge badge-rev">Reverse Bias (V &lt; 0 V)</div>
    <svg viewBox="0 0 300 170" aria-label="Reverse bias PN junction">
      <defs>
        <marker id="arrowRevL" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#ea580c" />
        </marker>
        <marker id="arrowRevR" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#2563eb" />
        </marker>
        <marker id="driftArr" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#dc2626" />
        </marker>
      </defs>

      
      <rect x="20" y="25" width="125" height="110" fill="url(#pGrad)" rx="6" />
      <rect x="155" y="25" width="125" height="110" fill="url(#nGrad)" rx="6" />

      
      <rect x="95" y="25" width="110" height="110" fill="#cbd5e1" opacity="0.8" />
      <line x1="95" y1="25" x2="95" y2="135" stroke="#64748b" stroke-width="1.5" stroke-dasharray="3 3" />
      <line x1="205" y1="25" x2="205" y2="135" stroke="#64748b" stroke-width="1.5" stroke-dasharray="3 3" />

      
      <g fill="#94a3b8" font-size="10" font-weight="bold" text-anchor="middle">
        <circle cx="115" cy="55" r="6" fill="#e2e8f0" stroke="#94a3b8" />
        <text x="115" y="58" fill="#64748b">−</text>
        <circle cx="115" cy="95" r="6" fill="#e2e8f0" stroke="#94a3b8" />
        <text x="115" y="98" fill="#64748b">−</text>
        
        <circle cx="185" cy="55" r="6" fill="#e2e8f0" stroke="#94a3b8" />
        <text x="185" y="58" fill="#64748b">+</text>
        <circle cx="185" cy="95" r="6" fill="#e2e8f0" stroke="#94a3b8" />
        <text x="185" y="98" fill="#64748b">+</text>
      </g>

      
      <path d="M 5 80 L 20 80" stroke="#2563eb" stroke-width="3" stroke-linecap="round" />
      <text x="12" y="70" font-size="16" font-weight="bold" fill="#2563eb" text-anchor="middle">−</text>

      <path d="M 280 80 L 295 80" stroke="#ea580c" stroke-width="3" stroke-linecap="round" />
      <text x="288" y="70" font-size="14" font-weight="bold" fill="#ea580c" text-anchor="middle">+</text>

      
      <text x="45" y="44" font-size="13" font-weight="bold" fill="#c2410c">p-type</text>
      <text x="255" y="44" font-size="13" font-weight="bold" fill="#1d4ed8" text-anchor="end">n-type</text>

      
      <text x="150" y="18" font-size="10.5" font-weight="700" fill="#475569" text-anchor="middle">Wide Barrier (Expanded)</text>
      <path d="M 97 21 L 203 21" stroke="#475569" stroke-width="1" />

      
      <g>
        <circle cx="55" cy="75" r="7" fill="#ea580c" />
        <text x="55" y="79" fill="#fff" font-size="11" font-weight="bold" text-anchor="middle">+</text>
        <line x1="45" y1="75" x2="30" y2="75" stroke="#ea580c" stroke-width="2" marker-end="url(#arrowRevL)" />

        <circle cx="245" cy="75" r="7" fill="#2563eb" />
        <text x="245" y="79" fill="#fff" font-size="11" font-weight="bold" text-anchor="middle">−</text>
        <line x1="255" y1="75" x2="270" y2="75" stroke="#2563eb" stroke-width="2" marker-end="url(#arrowRevR)" />
      </g>

      
      <g class="carrier-drift">
        <circle cx="110" cy="115" r="4.5" fill="#dc2626" />
        <text x="110" y="118.5" fill="#fff" font-size="7" font-weight="bold" text-anchor="middle">+</text>
      </g>
      <path d="M 130 115 L 165 115" stroke="#dc2626" stroke-width="1.5" stroke-dasharray="2 2" marker-end="url(#driftArr)" />
      <text x="150" y="127" font-size="9" fill="#b91c1c" font-weight="600" text-anchor="middle">Thermal Drift</text>

      
      <text x="150" y="162" font-size="11" font-weight="bold" fill="#64748b" text-anchor="middle">Zero Majority Diffusion</text>
    </svg>
    <div class="footer-stat stat-rev">Leakage: <strong>I<sub>S</sub> ≈ 1–10 nA</strong> (&gt;100 MΩ)</div>
  </div>
</div>

</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 {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }
    .diagram-svg {
      width: 100%;
      max-width: 520px;
      height: auto;
      display: block;
    }
    /* Flow animation for forward bias */
    @keyframes hole-move {
      0% { transform: translateX(0); opacity: 0.9; }
      50% { opacity: 1; }
      100% { transform: translateX(56px); opacity: 0; }
    }
    @keyframes electron-move {
      0% { transform: translateX(0); opacity: 0.9; }
      50% { opacity: 1; }
      100% { transform: translateX(-56px); opacity: 0; }
    }
    @keyframes current-pulse {
      0%, 100% { stroke-dashoffset: 0; }
      50% { stroke-dashoffset: -12; }
    }
    .flow-hole {
      animation: hole-move 2.2s linear infinite;
    }
    .flow-electron {
      animation: electron-move 2.2s linear infinite;
    }
    .current-line {
      stroke-dasharray: 6 4;
      animation: current-pulse 1.2s linear infinite;
    }
  </style>
</head>
<body>
  <svg class="diagram-svg" viewBox="0 0 500 480" xmlns="http://www.w3.org/2000/svg">
    
    <defs>
      
      <marker id="arrow-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 1 2 L 7 5 L 1 8 z" fill="#2563eb" />
      </marker>
      <marker id="arrow-current" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 1 2 L 7 5 L 1 8 z" fill="#059669" />
      </marker>
      <marker id="arrow-dim" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
        <path d="M 1 2 L 7 5 L 1 8 z" fill="#64748b" />
      </marker>
    </defs>

    
    <g transform="translate(10, 10)">
      
      <rect x="0" y="0" width="480" height="205" rx="10" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5" />
      
      
      <text x="16" y="24" font-size="13" font-weight="700" fill="#1e2945">Unbiased (0 V)</text>

      
      
      <rect x="40" y="38" width="140" height="100" rx="4" fill="#eff6ff" stroke="#cbd5e1" stroke-width="1" />
      
      <rect x="180" y="38" width="120" height="100" fill="#f8fafc" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
      
      <rect x="300" y="38" width="140" height="100" rx="4" fill="#fffbeb" stroke="#cbd5e1" stroke-width="1" />

      
      <text x="100" y="58" font-size="14" font-weight="700" fill="#1d4ed8" text-anchor="middle">P-Type</text>
      <text x="380" y="58" font-size="14" font-weight="700" fill="#b45309" text-anchor="middle">N-Type</text>

      
      <g fill="#2563eb" font-size="12" font-weight="700" text-anchor="middle" dominant-baseline="central">
        <circle cx="70" cy="80" r="10" fill="#2563eb" /><text x="70" y="80" fill="#fff">+</text>
        <circle cx="120" cy="80" r="10" fill="#2563eb" /><text x="120" y="80" fill="#fff">+</text>
        <circle cx="70" cy="115" r="10" fill="#2563eb" /><text x="70" y="115" fill="#fff">+</text>
        <circle cx="120" cy="115" r="10" fill="#2563eb" /><text x="120" y="115" fill="#fff">+</text>
      </g>

      
      
      <g fill="#64748b" font-size="13" font-weight="700" text-anchor="middle" dominant-baseline="central">
        <circle cx="210" cy="72" r="11" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5" /><text x="210" y="71" fill="#64748b">−</text>
        <circle cx="210" cy="104" r="11" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5" /><text x="210" y="103" fill="#64748b">−</text>
      </g>
      
      <g fill="#64748b" font-size="13" font-weight="700" text-anchor="middle" dominant-baseline="central">
        <circle cx="270" cy="72" r="11" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5" /><text x="270" y="72" fill="#64748b">+</text>
        <circle cx="270" cy="104" r="11" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5" /><text x="270" y="104" fill="#64748b">+</text>
      </g>

      
      <g fill="#d97706" font-size="13" font-weight="700" text-anchor="middle" dominant-baseline="central">
        <circle cx="360" cy="80" r="10" fill="#f59e0b" /><text x="360" y="79" fill="#fff">−</text>
        <circle cx="410" cy="80" r="10" fill="#f59e0b" /><text x="410" y="79" fill="#fff">−</text>
        <circle cx="360" cy="115" r="10" fill="#f59e0b" /><text x="360" y="115" fill="#fff">−</text>
        <circle cx="410" cy="115" r="10" fill="#f59e0b" /><text x="410" y="115" fill="#fff">−</text>
      </g>

      
      <path d="M 180 148 L 300 148" stroke="#64748b" stroke-width="1.2" marker-start="url(#arrow-dim)" marker-end="url(#arrow-dim)" />
      <text x="240" y="166" font-size="12" font-weight="600" fill="#475569" text-anchor="middle">Depletion Layer (Wide)</text>
      
      
      <rect x="155" y="174" width="170" height="22" rx="11" fill="#fee2e2" stroke="#fca5a5" stroke-width="1" />
      <text x="240" y="189" font-size="11.5" font-weight="700" fill="#b91c1c" text-anchor="middle">Built-in Barrier ≈ 0.7 V</text>
    </g>


    
    <g transform="translate(10, 230)">
      
      <rect x="0" y="0" width="480" height="235" rx="10" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5" />
      
      
      <text x="16" y="24" font-size="13" font-weight="700" fill="#1e2945">Forward Bias (V &gt; 0.7 V)</text>

      
      <rect x="340" y="10" width="124" height="20" rx="10" fill="#ecfdf5" stroke="#a7f3d0" stroke-width="1" />
      <text x="402" y="24" font-size="11" font-weight="700" fill="#047857" text-anchor="middle">Current Flow ➔</text>

      
      
      <rect x="40" y="36" width="180" height="96" rx="4" fill="#eff6ff" stroke="#cbd5e1" stroke-width="1" />
      
      <rect x="220" y="36" width="40" height="96" fill="#f8fafc" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
      
      <rect x="260" y="36" width="180" height="96" rx="4" fill="#fffbeb" stroke="#cbd5e1" stroke-width="1" />

      
      <text x="110" y="54" font-size="13" font-weight="700" fill="#1d4ed8" text-anchor="middle">P-Type</text>
      <text x="370" y="54" font-size="13" font-weight="700" fill="#b45309" text-anchor="middle">N-Type</text>

      
      <text x="240" y="145" font-size="11.5" font-weight="600" fill="#047857" text-anchor="middle">Barrier Collapses</text>

      
      
      <g fill="#2563eb" font-size="12" font-weight="700" text-anchor="middle" dominant-baseline="central">
        <circle cx="70" cy="74" r="9" fill="#2563eb" /><text x="70" y="74" fill="#fff">+</text>
        <circle cx="120" cy="74" r="9" fill="#2563eb" /><text x="120" y="74" fill="#fff">+</text>
        <circle cx="70" cy="106" r="9" fill="#2563eb" /><text x="70" y="106" fill="#fff">+</text>
        <circle cx="120" cy="106" r="9" fill="#2563eb" /><text x="120" y="106" fill="#fff">+</text>
        
        
        <g class="flow-hole">
          <circle cx="180" cy="74" r="9" fill="#2563eb" /><text x="180" y="74" fill="#fff">+</text>
          <circle cx="180" cy="106" r="9" fill="#2563eb" /><text x="180" y="106" fill="#fff">+</text>
        </g>
      </g>

      
      <circle cx="230" cy="90" r="7" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1" />
      <text x="230" y="89" font-size="10" font-weight="700" fill="#64748b" text-anchor="middle" dominant-baseline="central">−</text>
      
      <circle cx="250" cy="90" r="7" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1" />
      <text x="250" y="90" font-size="10" font-weight="700" fill="#64748b" text-anchor="middle" dominant-baseline="central">+</text>

      
      <g fill="#d97706" font-size="12" font-weight="700" text-anchor="middle" dominant-baseline="central">
        <circle cx="370" cy="74" r="9" fill="#f59e0b" /><text x="370" y="73" fill="#fff">−</text>
        <circle cx="415" cy="74" r="9" fill="#f59e0b" /><text x="415" y="73" fill="#fff">−</text>
        <circle cx="370" cy="106" r="9" fill="#f59e0b" /><text x="370" y="105" fill="#fff">−</text>
        <circle cx="415" cy="106" r="9" fill="#f59e0b" /><text x="415" y="105" fill="#fff">−</text>

        
        <g class="flow-electron">
          <circle cx="300" cy="74" r="9" fill="#f59e0b" /><text x="300" y="73" fill="#fff">−</text>
          <circle cx="300" cy="106" r="9" fill="#f59e0b" /><text x="300" y="105" fill="#fff">−</text>
        </g>
      </g>

      
      
      <path d="M 40 84 L 20 84 L 20 195 L 210 195" fill="none" stroke="#2563eb" stroke-width="2" />
      
      <path d="M 440 84 L 460 84 L 460 195 L 270 195" fill="none" stroke="#d97706" stroke-width="2" />
      
      
      <path d="M 20 150 L 20 130" fill="none" stroke="#059669" stroke-width="2.5" marker-end="url(#arrow-current)" />
      <path d="M 460 130 L 460 150" fill="none" stroke="#059669" stroke-width="2.5" marker-end="url(#arrow-current)" />

      
      
      <line x1="210" y1="180" x2="210" y2="210" stroke="#2563eb" stroke-width="3" />
      <text x="198" y="199" font-size="14" font-weight="700" fill="#2563eb">+</text>
      
      
      <line x1="222" y1="186" x2="222" y2="204" stroke="#d97706" stroke-width="4.5" />

      
      <line x1="234" y1="180" x2="234" y2="210" stroke="#2563eb" stroke-width="3" />

      
      <line x1="246" y1="186" x2="246" y2="204" stroke="#d97706" stroke-width="4.5" />
      <text x="258" y="198" font-size="16" font-weight="700" fill="#d97706">−</text>

      
      <line x1="246" y1="195" x2="270" y2="195" stroke="#d97706" stroke-width="2" />

      
      <text x="240" y="224" font-size="12" font-weight="700" fill="#1e2945" text-anchor="middle">Supply &gt; 0.7 V</text>
    </g>
  </svg>
</body>
</html>

ELEC-7.1

Aligned learning resources

Related diagrams