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

    /* Container without outer card shell */
    .scene-box {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* Tab Switcher */
    .tabs {
      display: flex;
      width: 100%;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 10px;
      margin-bottom: 10px;
      gap: 4px;
    }
    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.3s ease, color 0.3s ease;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .tab-btn.danger.active {
      color: #dc2626;
    }

    /* SVG Circuit Diagram */
    svg.circuit {
      width: 100%;
      height: auto;
      max-height: 200px;
      overflow: visible;
    }

    /* Current Flow Animation (smooth and non-strobing) */
    .current-line {
      stroke-dasharray: 6, 6;
      animation: dash 1s linear infinite;
    }
    .current-fast {
      animation: dash 0.45s linear infinite;
    }
    @keyframes dash {
      to { stroke-dashoffset: -24; }
    }

    /* Formula & Meter Cards */
    .metrics {
      display: flex;
      width: 100%;
      gap: 8px;
      margin-top: 10px;
    }
    .metric-card {
      flex: 1;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 6px;
      text-align: center;
      transition: border-color 0.3s ease;
    }
    .metric-title {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .metric-value {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
      transition: color 0.3s ease;
    }
    .metric-math {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
      transition: color 0.3s ease;
    }
    .danger-text {
      color: #dc2626 !important;
    }
    .danger-glow {
      filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.8));
    }
    .bulb-glow {
      filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.9));
    }
  </style>
</head>
<body>

  <div class="scene-box">
    
    <div class="tabs">
      <button class="tab-btn active" id="tabClosed" onclick="setMode(0)">1. Closed</button>
      <button class="tab-btn" id="tabOpen" onclick="setMode(1)">2. Open</button>
      <button class="tab-btn danger" id="tabShort" onclick="setMode(2)">3. Short ⚠️</button>
    </div>

    
    <svg class="circuit" viewBox="0 0 320 195">
      <defs>
        <filter id="heatGlow">
          <feGaussianBlur stdDeviation="3" result="glow"/>
          <feMerge>
            <feMergeNode in="glow"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>

      
      <rect x="25" y="65" width="22" height="60" rx="3" fill="#334155" />
      <rect x="31" y="58" width="10" height="7" rx="1" fill="#94a3b8" />
      <text x="36" y="98" fill="#ffffff" font-size="11" font-weight="bold" text-anchor="middle">9V</text>
      <text x="36" y="75" fill="#f87171" font-size="10" font-weight="bold" text-anchor="middle">+</text>
      <text x="36" y="120" fill="#94a3b8" font-size="12" font-weight="bold" text-anchor="middle">−</text>

      
      
      <path id="topWire1" d="M 36 58 L 36 25 L 120 25" fill="none" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round"/>
      
      <path id="topWire2" d="M 170 25 L 265 25 L 265 58" fill="none" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round"/>
      
      <path id="bottomWire" d="M 265 128 L 265 165 L 36 165 L 36 125" fill="none" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round"/>

      
      
      <path id="flowNormal" class="current-line" d="M 36 58 L 36 25 L 265 25 L 265 165 L 36 165 Z" fill="none" stroke="#0284c7" stroke-width="4" stroke-linecap="round" opacity="1"/>

      
      <path id="shortWire" d="M 90 25 L 90 165" fill="none" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round"/>
      <path id="flowShort" class="current-line current-fast" d="M 36 58 L 36 25 L 90 25 L 90 165 L 36 165 Z" fill="none" stroke="#ef4444" stroke-width="5" stroke-linecap="round" opacity="0"/>

      
      <circle cx="120" cy="25" r="4" fill="#475569"/>
      <circle cx="170" cy="25" r="4" fill="#475569"/>
      <line id="switchArm" x1="120" y1="25" x2="170" y2="25" stroke="#0f172a" stroke-width="4" stroke-linecap="round" style="transition: all 0.3s ease;"/>

      
      <g id="bulbGroup" transform="translate(265, 86)">
        
        <circle id="bulbGlass" cx="0" cy="-10" r="18" fill="#fef08a" stroke="#ca8a04" stroke-width="2"/>
        
        <path id="bulbFilament" d="M -6 0 L -3 -12 L 3 -12 L 6 0" fill="none" stroke="#ca8a04" stroke-width="2"/>
        
        <rect x="-9" y="4" width="18" height="11" rx="2" fill="#94a3b8"/>
        <line x1="-7" y1="8" x2="7" y2="8" stroke="#64748b" stroke-width="1.5"/>
        <line x1="-7" y1="12" x2="7" y2="12" stroke="#64748b" stroke-width="1.5"/>
        
        <text id="bulbLabel" x="0" y="34" font-size="11" font-weight="700" fill="#475569" text-anchor="middle">10 Ω Bulb</text>
      </g>

      
      <g id="dangerGroup" opacity="0" transform="translate(90, 95)" style="transition: opacity 0.3s ease;">
        <circle cx="0" cy="0" r="15" fill="#fee2e2" />
        <text x="0" y="6" font-size="16" text-anchor="middle">🔥</text>
        <text x="0" y="25" font-size="10" font-weight="800" fill="#dc2626" text-anchor="middle">0.1 Ω WIRE</text>
      </g>

      
      <g transform="translate(180, 165)">
        <circle cx="0" cy="0" r="15" fill="#ffffff" stroke="#0284c7" stroke-width="3"/>
        <text x="0" y="4" font-size="11" font-weight="bold" fill="#0284c7" text-anchor="middle">A</text>
      </g>
    </svg>

    
    <div class="metrics">
      <div class="metric-card">
        <div class="metric-title">Current (I)</div>
        <div class="metric-value" id="currentVal">0.9 A</div>
        <div class="metric-math" id="statusVal">Normal Flow</div>
      </div>
      <div class="metric-card">
        <div class="metric-title">Ohm's Law</div>
        <div class="metric-value" id="mathVal">I = 9V / 10Ω</div>
        <div class="metric-math" id="stateVal">Closed Loop</div>
      </div>
    </div>
  </div>

  <script>
    let activeMode = 0;

    const modes = [
      {
        name: "closed",
        tabId: "tabClosed",
        current: "0.9 A",
        status: "Normal Glow 💡",
        math: "I = 9V / 10Ω",
        state: "Closed Loop",
        switchAngle: 0,
        bulbLit: true,
        shortActive: false,
        isDanger: false
      },
      {
        name: "open",
        tabId: "tabOpen",
        current: "0.0 A",
        status: "No Flow (Off)",
        math: "I = 9V / ∞Ω",
        state: "Gap in Circuit",
        switchAngle: -35,
        bulbLit: false,
        shortActive: false,
        isDanger: false
      },
      {
        name: "short",
        tabId: "tabShort",
        current: "90.0 A",
        status: "Overheating! 🔥",
        math: "I = 9V / 0.1Ω",
        state: "Zero-Ω Bypass",
        switchAngle: 0,
        bulbLit: false,
        shortActive: true,
        isDanger: true
      }
    ];

    function setMode(idx) {
      activeMode = idx;
      const m = modes[idx];

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

      // Update metrics text
      const currentVal = document.getElementById('currentVal');
      const mathVal = document.getElementById('mathVal');
      const statusVal = document.getElementById('statusVal');
      const stateVal = document.getElementById('stateVal');

      currentVal.textContent = m.current;
      mathVal.textContent = m.math;
      statusVal.textContent = m.status;
      stateVal.textContent = m.state;

      currentVal.className = 'metric-value' + (m.isDanger ? ' danger-text' : '');
      statusVal.className = 'metric-math' + (m.isDanger ? ' danger-text' : '');

      // Switch geometry
      const arm = document.getElementById('switchArm');
      if (m.switchAngle === 0) {
        arm.setAttribute('x2', '170');
        arm.setAttribute('y2', '25');
      } else {
        arm.setAttribute('x2', '160');
        arm.setAttribute('y2', '3');
      }

      // Bulb visuals
      const glass = document.getElementById('bulbGlass');
      const filament = document.getElementById('bulbFilament');
      if (m.bulbLit) {
        glass.setAttribute('fill', '#fef08a');
        glass.setAttribute('stroke', '#ca8a04');
        glass.classList.add('bulb-glow');
        filament.setAttribute('stroke', '#ea580c');
      } else {
        glass.setAttribute('fill', '#f1f5f9');
        glass.setAttribute('stroke', '#cbd5e1');
        glass.classList.remove('bulb-glow');
        filament.setAttribute('stroke', '#94a3b8');
      }

      // Flows & Short wire
      const flowNormal = document.getElementById('flowNormal');
      const flowShort = document.getElementById('flowShort');
      const shortWire = document.getElementById('shortWire');
      const dangerGroup = document.getElementById('dangerGroup');

      if (m.name === 'closed') {
        flowNormal.setAttribute('opacity', '1');
        flowShort.setAttribute('opacity', '0');
        shortWire.setAttribute('stroke', '#cbd5e1');
        shortWire.setAttribute('stroke-width', '4');
        dangerGroup.setAttribute('opacity', '0');
      } else if (m.name === 'open') {
        flowNormal.setAttribute('opacity', '0');
        flowShort.setAttribute('opacity', '0');
        shortWire.setAttribute('stroke', '#cbd5e1');
        shortWire.setAttribute('stroke-width', '4');
        dangerGroup.setAttribute('opacity', '0');
      } else if (m.name === 'short') {
        flowNormal.setAttribute('opacity', '0');
        flowShort.setAttribute('opacity', '1');
        shortWire.setAttribute('stroke', '#ef4444');
        shortWire.setAttribute('stroke-width', '6');
        shortWire.classList.add('danger-glow');
        dangerGroup.setAttribute('opacity', '1');
      }
      if (m.name !== 'short') {
        shortWire.classList.remove('danger-glow');
      }
    }

    // Initialize in closed state
    setMode(0);
  </script>
</body>
</html>

Open and Closed Circuits: When Does Current Flow?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic DC Circuit</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      width: 100%;
      min-height: 100vh;
      background: #f8f9fa;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      user-select: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 8px;
    }

    .circuit-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

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

    /* Controls */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 2px;
    }

    .toggle-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 7px 18px;
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .toggle-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .toggle-btn:active {
      background: #e2e8f0;
    }

    .status-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
      transition: background-color 0.2s, box-shadow 0.2s;
    }

    .is-open .status-dot {
      background: #94a3b8;
      box-shadow: none;
    }

    /* Wire & Flow */
    .wire-base {
      stroke: #3b82f6;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .electron-flow {
      stroke: #facc15;
      stroke-width: 4.5;
      stroke-linecap: round;
      stroke-dasharray: 0 24;
      fill: none;
      opacity: 0.95;
      animation: moveElectrons 1.1s linear infinite;
    }

    @keyframes moveElectrons {
      from { stroke-dashoffset: 0; }
      to { stroke-dashoffset: 24; }
    }

    .is-open .electron-flow {
      display: none;
    }

    /* Switch Animation */
    .switch-lever {
      stroke: #1e293b;
      stroke-width: 4.5;
      stroke-linecap: round;
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: 220px 42px;
    }

    .is-open .switch-lever {
      transform: rotate(-32deg);
    }

    /* Bulb Glow */
    .bulb-glow {
      fill: #fde047;
      opacity: 0.4;
      filter: blur(6px);
      transition: opacity 0.25s ease;
      transform-origin: 410px 145px;
      animation: pulseGlow 1.8s ease-in-out infinite alternate;
    }

    @keyframes pulseGlow {
      from { opacity: 0.3; }
      to { opacity: 0.55; }
    }

    .bulb-core {
      fill: #fef08a;
      transition: fill 0.2s;
    }

    .filament {
      stroke: #ca8a04;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      transition: stroke 0.2s;
    }

    .is-open .bulb-glow {
      opacity: 0;
      animation: none;
    }

    .is-open .bulb-core {
      fill: #e2e8f0;
    }

    .is-open .filament {
      stroke: #94a3b8;
    }

    /* Labels */
    .tag-title {
      font-size: 12px;
      font-weight: 700;
      fill: #1e293b;
    }

    .tag-sub {
      font-size: 10.5px;
      font-weight: 600;
      fill: #64748b;
    }

    .terminal-text {
      font-size: 13px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
    }
  </style>
</head>
<body>

<div class="circuit-container" id="circuit">
  <svg viewBox="0 0 540 265" aria-label="DC Circuit Diagram">
    <defs>
      
      <linearGradient id="batteryGrad" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#334155" />
        <stop offset="100%" stop-color="#1e293b" />
      </linearGradient>
    </defs>

    
    <path class="wire-base" d="M 220 42 H 130 V 222 H 410 V 170 M 410 120 V 42 H 290" />
    <path class="electron-flow" d="M 220 42 H 130 V 222 H 410 V 170 M 410 120 V 42 H 290" />

    
    <g style="cursor: pointer;" id="switchHitbox">
      
      <circle cx="220" cy="42" r="5" fill="#1e293b" />
      <circle cx="290" cy="42" r="5" fill="#1e293b" />
      
      <line class="switch-lever" x1="220" y1="42" x2="288" y2="42" />
      <text x="255" y="24" text-anchor="middle" class="tag-title" id="switchLabel">Switch (Closed)</text>
    </g>

    
    <text x="270" y="244" text-anchor="middle" class="tag-title">Conductive Loop</text>

    
    <g transform="translate(130, 132)">
      
      <rect x="-26" y="-38" width="52" height="76" rx="6" fill="url(#batteryGrad)" />
      
      <rect x="-9" y="-45" width="18" height="7" rx="2" fill="#ef4444" />
      
      
      <circle cx="0" cy="-21" r="8" fill="#ef4444" />
      <text x="0" y="-21" class="terminal-text">+</text>
      
      <text x="0" y="0" text-anchor="middle" dominant-baseline="central" fill="#f8fafc" font-size="11" font-weight="800">9V</text>

      <circle cx="0" cy="21" r="8" fill="#3b82f6" />
      <text x="0" y="20.5" class="terminal-text">−</text>

      
      <text x="-36" y="-4" text-anchor="end" class="tag-title">Voltage Source</text>
      <text x="-36" y="10" text-anchor="end" class="tag-sub">(Push)</text>
    </g>

    
    <g transform="translate(410, 145)">
      
      <circle class="bulb-glow" cx="0" cy="0" r="32" />
      
      
      <circle class="bulb-core" cx="0" cy="0" r="20" stroke="#94a3b8" stroke-width="1.8" />
      
      
      <path class="filament" d="M -6 9 L -3 -4 L 0 3 L 3 -4 L 6 9" />
      
      
      <rect x="-8" y="15" width="16" height="6" rx="1.5" fill="#64748b" />
      <rect x="-5" y="21" width="10" height="4" rx="1" fill="#475569" />

      
      <text x="32" y="-3" text-anchor="start" class="tag-title">Load</text>
      <text x="32" y="11" text-anchor="start" class="tag-sub">(Bulb)</text>
    </g>
  </svg>

  
  <div class="controls">
    <button class="toggle-btn" id="toggleBtn" aria-label="Toggle circuit state">
      <span class="status-dot"></span>
      <span id="btnText">Circuit: Closed</span>
    </button>
  </div>
</div>

<script>
  const circuit = document.getElementById('circuit');
  const toggleBtn = document.getElementById('toggleBtn');
  const btnText = document.getElementById('btnText');
  const switchLabel = document.getElementById('switchLabel');
  const switchHitbox = document.getElementById('switchHitbox');

  let isOpen = false;

  function toggleCircuit() {
    isOpen = !isOpen;
    if (isOpen) {
      circuit.classList.add('is-open');
      btnText.textContent = 'Circuit: Open';
      switchLabel.textContent = 'Switch (Open)';
    } else {
      circuit.classList.remove('is-open');
      btnText.textContent = 'Circuit: Closed';
      switchLabel.textContent = 'Switch (Closed)';
    }
  }

  toggleBtn.addEventListener('click', toggleCircuit);
  switchHitbox.addEventListener('click', toggleCircuit);
</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; }
    html, body {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    .diagram-svg {
      width: 100%;
      height: 100%;
      max-height: 100%;
      display: block;
      user-select: none;
    }
    .flow-line {
      stroke-dasharray: 10 14;
      animation: currentFlow 1.6s linear infinite;
    }
    @keyframes currentFlow {
      from { stroke-dashoffset: 48; }
      to { stroke-dashoffset: 0; }
    }
    .pulse-glow {
      animation: softGlow 2.4s ease-in-out infinite alternate;
    }
    @keyframes softGlow {
      from { opacity: 0.35; transform: scale(0.96); }
      to { opacity: 0.75; transform: scale(1.04); }
    }
  </style>
</head>
<body>
  <svg class="diagram-svg" viewBox="0 0 720 480" xmlns="http://www.w3.org/2000/svg">
    <defs>
      
      <filter id="bulb-glow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
        <feMerge>
          <feMergeNode in="blur" />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
      
      <radialGradient id="lightHalo" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="#fde047" stop-opacity="0.9" />
        <stop offset="60%" stop-color="#facc15" stop-opacity="0.3" />
        <stop offset="100%" stop-color="#facc15" stop-opacity="0" />
      </radialGradient>
      
      <marker id="callout-arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
        <path d="M0,0 L6,3 L0,6 Z" fill="#ef4444" />
      </marker>
    </defs>

    
    <line x1="360" y1="30" x2="360" y2="450" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="6 6" />

    
    
    <text x="180" y="45" text-anchor="middle" font-size="20" font-weight="700" fill="#0f172a">Closed Circuit</text>

    
    <rect x="65" y="80" width="230" height="250" rx="16" fill="none" stroke="#94a3b8" stroke-width="4" />
    
    
    <rect x="65" y="80" width="230" height="250" rx="16" fill="none" stroke="#0284c7" stroke-width="4" class="flow-line" />

    
    <polygon points="185,76 175,72 175,80" fill="#0284c7" />
    <polygon points="299,210 295,200 303,200" fill="#0284c7" />
    <polygon points="175,334 185,330 185,338" fill="#0284c7" />
    <polygon points="61,190 65,200 57,200" fill="#0284c7" />

    
    <g transform="translate(65, 205)">
      <rect x="-18" y="-30" width="36" height="60" fill="#ffffff" />
      <line x1="-16" y1="-12" x2="16" y2="-12" stroke="#0f172a" stroke-width="4" stroke-linecap="round" />
      <line x1="-8" y1="12" x2="8" y2="12" stroke="#0f172a" stroke-width="6" stroke-linecap="round" />
      <text x="-26" y="-8" font-size="13" font-weight="700" fill="#0f172a">+</text>
      <text x="-24" y="16" font-size="14" font-weight="700" fill="#64748b">−</text>
    </g>

    
    <g transform="translate(180, 80)">
      <rect x="-35" y="-14" width="70" height="28" fill="#ffffff" />
      
      <circle cx="-22" cy="0" r="4.5" fill="#0f172a" />
      <circle cx="22" cy="0" r="4.5" fill="#0f172a" />
      
      <line x1="-22" y1="0" x2="22" y2="0" stroke="#0f172a" stroke-width="4" stroke-linecap="round" />
    </g>

    
    <g transform="translate(180, 330)">
      <rect x="-40" y="-20" width="80" height="40" fill="#ffffff" />
      
      <circle cx="0" cy="0" r="44" fill="url(#lightHalo)" class="pulse-glow" style="transform-origin: 180px 330px;" />
      
      <circle cx="0" cy="0" r="18" fill="#facc15" stroke="#ca8a04" stroke-width="2.5" filter="url(#bulb-glow)" />
      
      <path d="M-6,8 L-3,-4 L3,-4 L6,8" fill="none" stroke="#a16207" stroke-width="2" stroke-linejoin="round" />
      
      <line x1="-26" y1="-26" x2="-33" y2="-33" stroke="#eab308" stroke-width="2.5" stroke-linecap="round" />
      <line x1="26" y1="-26" x2="33" y2="-33" stroke="#eab308" stroke-width="2.5" stroke-linecap="round" />
      <line x1="0" y1="-28" x2="0" y2="-38" stroke="#eab308" stroke-width="2.5" stroke-linecap="round" />
    </g>

    
    <g transform="translate(180, 410)">
      <rect x="-82" y="-18" width="164" height="36" rx="18" fill="#ecfdf5" stroke="#10b981" stroke-width="2" />
      <text x="0" y="5" text-anchor="middle" font-size="16" font-weight="700" fill="#047857">Current &gt; 0 A</text>
    </g>


    
    
    <text x="540" y="45" text-anchor="middle" font-size="20" font-weight="700" fill="#0f172a">Open Circuit</text>

    
    <rect x="425" y="80" width="230" height="250" rx="16" fill="none" stroke="#cbd5e1" stroke-width="4" />

    
    <g transform="translate(425, 205)">
      <rect x="-18" y="-30" width="36" height="60" fill="#ffffff" />
      <line x1="-16" y1="-12" x2="16" y2="-12" stroke="#64748b" stroke-width="4" stroke-linecap="round" />
      <line x1="-8" y1="12" x2="8" y2="12" stroke="#64748b" stroke-width="6" stroke-linecap="round" />
      <text x="-26" y="-8" font-size="13" font-weight="700" fill="#64748b">+</text>
      <text x="-24" y="16" font-size="14" font-weight="700" fill="#94a3b8">−</text>
    </g>

    
    <g transform="translate(540, 80)">
      <rect x="-40" y="-35" width="80" height="50" fill="#ffffff" />
      
      <circle cx="2" cy="-8" r="16" fill="none" stroke="#f87171" stroke-width="1.5" stroke-dasharray="3 3" />
      
      <circle cx="-22" cy="0" r="4.5" fill="#0f172a" />
      <circle cx="22" cy="0" r="4.5" fill="#0f172a" />
      
      <line x1="-22" y1="0" x2="12" y2="-22" stroke="#0f172a" stroke-width="4" stroke-linecap="round" />
    </g>

    
    <g transform="translate(540, 160)">
      
      <line x1="0" y1="-28" x2="2" y2="-60" stroke="#ef4444" stroke-width="2" marker-end="url(#callout-arrow)" />
      
      <rect x="-105" y="-28" width="210" height="34" rx="8" fill="#fef2f2" stroke="#fca5a5" stroke-width="1.5" />
      <text x="0" y="-6" text-anchor="middle" font-size="13" font-weight="700" fill="#b91c1c">Air gap = high resistance</text>
    </g>

    
    <g transform="translate(540, 330)">
      <rect x="-40" y="-20" width="80" height="40" fill="#ffffff" />
      
      <circle cx="0" cy="0" r="18" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" />
      
      <path d="M-6,8 L-3,-4 L3,-4 L6,8" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linejoin="round" />
    </g>

    
    <g transform="translate(540, 410)">
      <rect x="-82" y="-18" width="164" height="36" rx="18" fill="#f1f5f9" stroke="#94a3b8" stroke-width="2" />
      <text x="0" y="5" text-anchor="middle" font-size="16" font-weight="700" fill="#475569">Current = 0 A</text>
    </g>
  </svg>
</body>
</html>

电流的概念、物理意义与单位换算

电流表的结构、量程选择与准确读数

电流表接入电路的规范要求与操作禁忌

探究串联电路中各处电流大小的规律

探究并联电路干路与支路电流的分配规律

电流规律探究中换用不同规格灯泡与多次测量的意义

电路电流测量中的常见故障排查与分析

science

探究串联与并联电路的电流特点

Voltage, Current, and Resistance: Defining Circuit Variables

Ohm's Law: Calculating Voltage, Current, and Resistance

Series Circuits: Equivalent Resistance and Voltage Division

Parallel Circuits: Equivalent Resistance and Current Branching

Comparing Series and Parallel Circuits

Electric Power: Calculating Energy Consumption

Magnetic Fields Around Current-Carrying Wires and Solenoids

The Motor Effect: Force on a Current-Carrying Conductor

How Electric Motors Work

Faraday's Law and Electromagnetic Induction

The Electric Generator: Converting Mechanical Energy to Current

DC Circuits, Electrical Power, and Electromagnetism

电压的作用、常见电源电压与单位换算

电压表的结构、量程选择与准确读数

电压表并联接入电路的连接规范

干电池串联与并联电池组的电压特点

探究串联电路总电压与各用电器两端分电压的关系

探究并联电路各支路两端电压的规律

利用电压表示数分析电路断路与短路故障

探究串联与并联电路的电压特点

探究I、U、R三者关系时的控制变量设计思想

滑动变阻器的分压与限流作用及连接方法

探究电阻一定时电流与电压的正比关系

探究电压一定时电流与电阻的反比关系

欧姆定律公式I=U/R的建立与物理意义

实验数据图象化处理与拟合分析方法

探究电流与电压、电阻的关系（欧姆定律探究）

伏安法测电阻的原理（R=U/I）与电路设计

测定值电阻的阻值与多次测量求平均值

测小灯泡电阻与探究温度对金属电阻的影响

电流表内外接法与电表内阻引起的测量误差

特殊法测电阻（一）：只有电压表和已知定值电阻（伏阻法）

特殊法测电阻（二）：只有电流表和已知定值电阻（安阻法）

特殊法测电阻（三）：利用电阻箱的等效替代法

伏安法测电阻及其特殊测量方法

奥斯特实验与电流的磁效应

通电螺线管的磁场分布与安培右手螺旋定则

电磁铁的构造与插入铁芯增强磁性的原理

探究影响电磁铁磁性强弱的因素（电流大小与线圈匝数）

电磁继电器的结构、触点工作方式与电路原理

基于电磁继电器的温度自动报警控制装置制作

基于电磁继电器的光控路灯与水位自动控制设计

电磁铁磁性强弱探究与电磁继电器自动控制

法拉第的科学探索与电磁感应现象的发现

探究导体在磁场中产生感应电流的条件实验

探究影响感应电流方向的因素

探究感应电流大小与切割速度及磁场强弱的关系

发电机模型结构、交流电产生与机械能向电能转化

动圈式话筒与电磁感应在现代科技中的应用

对比实验：电磁感应（发电机）与磁场对电流的作用（电动机）

OGS.10.PS.4

Aligned learning resources

Related diagrams