<!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;
      color: #1e2945;
      background: #ffffff;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .split-view {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      width: 100%;
      max-width: 660px;
      justify-content: center;
    }

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

    .panel-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 6px;
      align-self: flex-start;
    }

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

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

    .btn {
      background: #0284c7;
      color: #ffffff;
      border: none;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn:active {
      opacity: 0.85;
    }
    .badge {
      font-size: 12px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 4px;
      background: #e0f2fe;
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="split-view">
    
    <div class="panel">
      <div class="panel-title">AC Circuit</div>
      <svg id="circuitSvg" viewBox="0 0 280 200">
        
        <rect x="40" y="30" width="200" height="140" rx="12" fill="none" stroke="#94a3b8" stroke-width="4" />

        
        <circle cx="40" cy="100" r="18" fill="#ffffff" stroke="#1e2945" stroke-width="2.5" />
        <path d="M 31 100 Q 35.5 93, 40 100 T 49 100" fill="none" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" />
        <text x="40" y="132" font-size="12" font-weight="700" fill="#1e2945" text-anchor="middle">AC Source</text>

        
        <circle cx="240" cy="100" r="18" fill="#ffffff" stroke="#1e2945" stroke-width="2.5" />
        
        <line x1="230" y1="90" x2="250" y2="110" stroke="#1e2945" stroke-width="2" stroke-linecap="round" />
        <line x1="230" y1="110" x2="250" y2="90" stroke="#1e2945" stroke-width="2" stroke-linecap="round" />
        <circle id="bulbGlow" cx="240" cy="100" r="26" fill="#facc15" opacity="0.4" pointer-events="none" />
        <text x="240" y="132" font-size="12" font-weight="700" fill="#1e2945" text-anchor="middle">Bulb</text>

        
        <g id="electrons"></g>
      </svg>
    </div>

    
    <div class="panel">
      <div class="panel-title">Oscilloscope (Voltage vs Time)</div>
      <svg id="graphSvg" viewBox="0 0 280 200">
        
        
        <line x1="45" y1="20" x2="45" y2="180" stroke="#cbd5e1" stroke-width="1.5" />
        
        <line x1="40" y1="100" x2="270" y2="100" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />

        
        <line x1="42" y1="40" x2="270" y2="40" stroke="#e2e8f0" stroke-width="1" />
        <line x1="42" y1="160" x2="270" y2="160" stroke="#e2e8f0" stroke-width="1" />

        
        <text x="38" y="44" font-size="11" font-weight="700" fill="#0284c7" text-anchor="end">+325 V</text>
        <text x="38" y="104" font-size="11" font-weight="600" fill="#64748b" text-anchor="end">0 V</text>
        <text x="38" y="164" font-size="11" font-weight="700" fill="#ef4444" text-anchor="end">-325 V</text>

        
        <path id="sinePath" fill="none" stroke="#64748b" stroke-width="2.5" />

        
        <rect x="80" y="24" width="76" height="18" rx="4" fill="#e0f2fe" />
        <text x="118" y="37" font-size="10" font-weight="700" fill="#0284c7" text-anchor="middle">+ Half-Cycle</text>

        <rect x="180" y="162" width="76" height="18" rx="4" fill="#fee2e2" />
        <text x="218" y="175" font-size="10" font-weight="700" fill="#ef4444" text-anchor="middle">- Half-Cycle</text>

        
        <circle id="cursorDot" cx="45" cy="100" r="5" fill="#0284c7" stroke="#ffffff" stroke-width="2" />
        <line id="cursorLine" x1="45" y1="20" x2="45" y2="180" stroke="#0284c7" stroke-width="1" stroke-dasharray="2 2" opacity="0.6" />
      </svg>
    </div>
  </div>

  <div class="controls">
    <button id="toggleBtn" class="btn">⏸ Pause</button>
    <div id="stateBadge" class="badge">Current: Forward Flow</div>
  </div>

  <script>
    const electronsG = document.getElementById('electrons');
    const sinePath = document.getElementById('sinePath');
    const cursorDot = document.getElementById('cursorDot');
    const cursorLine = document.getElementById('cursorLine');
    const bulbGlow = document.getElementById('bulbGlow');
    const toggleBtn = document.getElementById('toggleBtn');
    const stateBadge = document.getElementById('stateBadge');

    // Create Sine Wave path for graph
    // X goes from 45 to 265 (width = 220px = 1 complete cycle)
    const xStart = 45;
    const waveWidth = 220;
    const yCenter = 100;
    const amplitude = 60; // corresponds to 325V

    let d = `M ${xStart} ${yCenter}`;
    for (let x = 0; x <= waveWidth; x += 2) {
      const angle = (x / waveWidth) * Math.PI * 2;
      const y = yCenter - Math.sin(angle) * amplitude;
      d += ` L ${xStart + x} ${y.toFixed(2)}`;
    }
    sinePath.setAttribute('d', d);

    // Setup base electron positions along the circuit rectangle
    // Rect: x: 40..240, y: 30..170
    // We create fixed base sites where electrons vibrate locally
    const electronSites = [];

    // Top wire (y = 30, x from 60 to 220)
    for (let x = 65; x <= 215; x += 25) {
      electronSites.push({ baseX: x, baseY: 30, dirX: 1, dirY: 0 });
    }
    // Right wire (x = 240, top & bottom of bulb)
    electronSites.push({ baseX: 240, baseY: 55, dirX: 0, dirY: 1 });
    electronSites.push({ baseX: 240, baseY: 145, dirX: 0, dirY: 1 });

    // Bottom wire (y = 170, x from 220 down to 60)
    for (let x = 215; x >= 65; x -= 25) {
      electronSites.push({ baseX: x, baseY: 170, dirX: -1, dirY: 0 });
    }
    // Left wire (x = 40, bottom & top of AC source)
    electronSites.push({ baseX: 40, baseY: 145, dirX: 0, dirY: -1 });
    electronSites.push({ baseX: 40, baseY: 55, dirX: 0, dirY: -1 });

    // Create SVG circles for electrons
    const electronEls = electronSites.map(() => {
      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      circle.setAttribute('r', '4');
      circle.setAttribute('fill', '#0284c7');
      circle.setAttribute('stroke', '#ffffff');
      circle.setAttribute('stroke-width', '1');
      electronsG.appendChild(circle);
      return circle;
    });

    let isPlaying = true;
    let time = 0;
    const maxDisplacement = 12; // Back-and-forth vibration amplitude (px)

    function animate(timestamp) {
      if (isPlaying) {
        time += 0.025; // Gentle, clear speed
      }

      const phase = time % (Math.PI * 2);
      const voltageFactor = Math.sin(phase); // -1 to +1

      // 1. Update Electrons: vibrate back and forth without completing a loop
      electronSites.forEach((site, i) => {
        const dx = site.dirX * voltageFactor * maxDisplacement;
        const dy = site.dirY * voltageFactor * maxDisplacement;
        electronEls[i].setAttribute('cx', site.baseX + dx);
        electronEls[i].setAttribute('cy', site.baseY + dy);
      });

      // 2. Update Bulb Glow: glow power proportional to V^2
      const power = Math.pow(voltageFactor, 2);
      bulbGlow.setAttribute('opacity', (0.15 + power * 0.7).toFixed(2));
      bulbGlow.setAttribute('r', (20 + power * 8).toFixed(1));

      // 3. Update Oscilloscope Cursor
      const cursorX = xStart + (phase / (Math.PI * 2)) * waveWidth;
      const cursorY = yCenter - voltageFactor * amplitude;
      cursorDot.setAttribute('cx', cursorX);
      cursorDot.setAttribute('cy', cursorY);
      cursorLine.setAttribute('x1', cursorX);
      cursorLine.setAttribute('x2', cursorX);

      // Color cursor & state badge by polarity
      if (voltageFactor > 0.05) {
        cursorDot.setAttribute('fill', '#0284c7');
        stateBadge.textContent = 'Current: Forward Flow';
        stateBadge.style.color = '#0284c7';
        stateBadge.style.background = '#e0f2fe';
      } else if (voltageFactor < -0.05) {
        cursorDot.setAttribute('fill', '#ef4444');
        stateBadge.textContent = 'Current: Reverse Flow';
        stateBadge.style.color = '#ef4444';
        stateBadge.style.background = '#fee2e2';
      } else {
        cursorDot.setAttribute('fill', '#64748b');
        stateBadge.textContent = 'Zero Voltage (Reversing)';
        stateBadge.style.color = '#64748b';
        stateBadge.style.background = '#f1f5f9';
      }

      requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);

    toggleBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      toggleBtn.textContent = isPlaying ? '⏸ Pause' : '▶ Play';
    });
  </script>
</body>
</html>

Direct Current Versus Alternating Current

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 6px;
      width: 100%;
    }
    .scope-wrap {
      position: relative;
      background: #061712;
      border-radius: 8px;
      overflow: hidden;
      width: 100%;
    }
    svg {
      display: block;
      width: 100%;
      height: auto;
    }
    .scale-tag {
      position: absolute;
      top: 6px;
      right: 8px;
      font-size: 11px;
      font-weight: 600;
      color: #6ee7b7;
      background: rgba(6, 23, 18, 0.85);
      border: 1px solid #134e38;
      border-radius: 4px;
      padding: 2px 6px;
      letter-spacing: 0.2px;
    }
    .btn-row {
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .btn {
      font-size: 12px;
      font-weight: 600;
      padding: 6px 10px;
      border-radius: 6px;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .btn.active {
      background: #10b981;
      border-color: #059669;
      color: #ffffff;
    }
    .info-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    @media (max-width: 440px) {
      .info-row { grid-template-columns: 1fr; }
    }
    .card-calc {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
    }
    .card-calc strong { color: #0284c7; }
    .card-mains {
      background: #ecfdf5;
      border: 1px solid #10b981;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      color: #064e3b;
    }
    .formula {
      font-size: 13px;
      font-weight: 700;
      color: #0369a1;
      margin-top: 2px;
    }
    /* SVG dynamic layer transitions */
    .annot-t, .annot-v, .wave-c2, .shade-c2 {
      transition: opacity 0.3s ease;
    }
    .dimmed { opacity: 0.15; }
    .highlight { opacity: 1; }
  </style>
</head>
<body>

  
  <div class="scope-wrap">
    <div class="scale-tag">Time Base: 5 ms / div</div>
    <svg viewBox="0 0 400 200" id="scopeSvg">
      <defs>
        
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="2" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
        
        <marker id="arrCyanL" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M5,0 L0,3 L5,6 Z" fill="#38bdf8" />
        </marker>
        <marker id="arrCyanR" markerWidth="6" markerHeight="6" refX="1" refY="3" orient="auto">
          <path d="M0,0 L5,3 L0,6 Z" fill="#38bdf8" />
        </marker>
        <marker id="arrAmberU" markerWidth="6" markerHeight="6" refX="3" refY="1" orient="auto">
          <path d="M0,5 L3,0 L6,5 Z" fill="#f59e0b" />
        </marker>
      </defs>

      
      <g stroke="#134e38" stroke-width="1">
        
        <line x1="50" y1="0" x2="50" y2="200" />
        <line x1="100" y1="0" x2="100" y2="200" />
        <line x1="150" y1="0" x2="150" y2="200" />
        <line x1="200" y1="0" x2="200" y2="200" />
        <line x1="250" y1="0" x2="250" y2="200" />
        <line x1="300" y1="0" x2="300" y2="200" />
        <line x1="350" y1="0" x2="350" y2="200" />
        
        <line x1="0" y1="50" x2="400" y2="50" />
        <line x1="0" y1="150" x2="400" y2="150" />
      </g>

      
      <line x1="0" y1="100" x2="400" y2="100" stroke="#059669" stroke-width="1.5" stroke-dasharray="3,3" />
      <line x1="200" y1="0" x2="200" y2="200" stroke="#059669" stroke-width="1" stroke-dasharray="3,3" />

      
      <text x="6" y="96" fill="#10b981" font-size="10" font-weight="600">0 V</text>
      <text x="368" y="112" fill="#10b981" font-size="10" font-weight="600">Time →</text>

      
      <rect id="shadeC2" class="shade-c2" x="200" y="0" width="200" height="200" fill="#061712" opacity="0" />

      
      
      <path id="waveC1" d="M 0,100 C 27.6,30 72.4,30 100,100 C 127.6,170 172.4,170 200,100"
            fill="none" stroke="#10b981" stroke-width="2.5" filter="url(#glow)" />
      <path id="waveC2" class="wave-c2" d="M 200,100 C 227.6,30 272.4,30 300,100 C 327.6,170 372.4,170 400,100"
            fill="none" stroke="#10b981" stroke-width="2.5" filter="url(#glow)" />

      
      <path id="fullWave" d="M 0,100 C 27.6,30 72.4,30 100,100 C 127.6,170 172.4,170 200,100 C 227.6,30 272.4,30 300,100 C 327.6,170 372.4,170 400,100"
            fill="none" stroke="transparent" />

      
      <circle r="4.5" fill="#a7f3d0">
        <animateMotion dur="2.4s" repeatCount="indefinite" path="M 0,100 C 27.6,30 72.4,30 100,100 C 127.6,170 172.4,170 200,100 C 227.6,30 272.4,30 300,100 C 327.6,170 372.4,170 400,100" />
      </circle>

      
      <g id="annotV" class="annot-v">
        <line x1="50" y1="100" x2="50" y2="47" stroke="#f59e0b" stroke-width="1.8" marker-end="url(#arrAmberU)" />
        <circle cx="50" cy="45" r="3" fill="#f59e0b" />
        <text x="56" y="75" fill="#fbbf24" font-size="11" font-weight="700">Peak Voltage</text>
      </g>

      
      <g id="annotT" class="annot-t">
        
        <line x1="0" y1="100" x2="0" y2="182" stroke="#38bdf8" stroke-width="1" stroke-dasharray="2,2" opacity="0.6" />
        <line x1="200" y1="100" x2="200" y2="182" stroke="#38bdf8" stroke-width="1" stroke-dasharray="2,2" opacity="0.6" />
        
        <line x1="4" y1="178" x2="196" y2="178" stroke="#38bdf8" stroke-width="1.8" marker-start="url(#arrCyanL)" marker-end="url(#arrCyanR)" />
        <rect x="24" y="166" width="152" height="15" rx="3" fill="rgba(6, 23, 18, 0.9)" />
        <text x="100" y="178" fill="#38bdf8" font-size="10.5" font-weight="700" text-anchor="middle">Period (T) = 4 div = 20 ms</text>
      </g>
    </svg>
  </div>

  
  <div class="btn-row">
    <button class="btn active" id="btnFull" onclick="setMode('full')">Full AC Wave</button>
    <button class="btn" id="btnPeriod" onclick="setMode('period')">Time Period (T)</button>
    <button class="btn" id="btnPeak" onclick="setMode('peak')">Peak Voltage</button>
  </div>

  
  <div class="info-row">
    <div class="card-calc">
      <div><strong>Step 1:</strong> T = 4 div × 5 ms = <strong>0.02 s</strong></div>
      <div class="formula">f = 1 / T = 1 / 0.02 s = 50 Hz</div>
    </div>
    <div class="card-mains">
      <strong>UK Mains:</strong> 230 V, 50 Hz<br>
      Changes direction 50 times/sec
    </div>
  </div>

  <script>
    function setMode(mode) {
      document.getElementById('btnFull').classList.remove('active');
      document.getElementById('btnPeriod').classList.remove('active');
      document.getElementById('btnPeak').classList.remove('active');

      const annotT = document.getElementById('annotT');
      const annotV = document.getElementById('annotV');
      const waveC2 = document.getElementById('waveC2');
      const shadeC2 = document.getElementById('shadeC2');

      if (mode === 'full') {
        document.getElementById('btnFull').classList.add('active');
        annotT.style.opacity = '1';
        annotV.style.opacity = '1';
        waveC2.style.opacity = '1';
        shadeC2.style.opacity = '0';
      } else if (mode === 'period') {
        document.getElementById('btnPeriod').classList.add('active');
        annotT.style.opacity = '1';
        annotV.style.opacity = '0.2';
        waveC2.style.opacity = '0.2';
        shadeC2.style.opacity = '0.7';
      } else if (mode === 'peak') {
        document.getElementById('btnPeak').classList.add('active');
        annotT.style.opacity = '0.2';
        annotV.style.opacity = '1';
        waveC2.style.opacity = '0.6';
        shadeC2.style.opacity = '0';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Direct Current (DC) Demonstration</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .panel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
      width: 100%;
    }
    .card-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 10px 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .panel-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0284c7;
      margin-bottom: 4px;
    }
    .svg-wrap {
      width: 100%;
      max-width: 290px;
      height: 180px;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .annotation {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
      text-align: center;
    }
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }
    .btn-toggle {
      background: #0284c7;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 8px 20px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, opacity 0.2s ease;
    }
    .btn-toggle:hover {
      background: #0369a1;
    }
    .btn-toggle.open {
      background: #475569;
    }
    .btn-toggle.open:hover {
      background: #334155;
    }
    .status-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      background: #e0f2fe;
      color: #0369a1;
    }
    .status-badge.off {
      background: #f1f5f9;
      color: #64748b;
    }
  </style>
</head>
<body>

  <div class="panel-grid">
    
    <div class="card-panel">
      <div class="panel-title">DC Circuit</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 290 180">
          <defs>
            <radialGradient id="lampGlow" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stop-color="#fef08a" stop-opacity="0.9" />
              <stop offset="60%" stop-color="#f59e0b" stop-opacity="0.4" />
              <stop offset="100%" stop-color="#f59e0b" stop-opacity="0" />
            </radialGradient>
          </defs>

          
          
          <path class="circuit-wire" d="M 125 30 L 45 30 L 45 150 L 125 150" fill="none" stroke="#94a3b8" stroke-width="3" stroke-linecap="round" />
          <path class="circuit-wire" d="M 165 150 L 245 150 L 245 105" fill="none" stroke="#94a3b8" stroke-width="3" stroke-linecap="round" />
          <path class="circuit-wire" d="M 245 65 L 245 30 L 165 30" fill="none" stroke="#94a3b8" stroke-width="3" stroke-linecap="round" />

          
          
          <line x1="165" y1="16" x2="165" y2="44" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" />
          <text x="171" y="24" font-size="12" font-weight="bold" fill="#1e2945">+</text>

          
          <line x1="135" y1="22" x2="135" y2="38" stroke="#1e2945" stroke-width="5" stroke-linecap="round" />
          <text x="123" y="24" font-size="14" font-weight="bold" fill="#1e2945">−</text>
          
          <text x="150" y="10" font-size="10" font-weight="bold" fill="#64748b" text-anchor="middle">1.5V Cell</text>

          
          <circle cx="245" cy="65" r="3.5" fill="#1e2945" />
          <circle cx="245" cy="105" r="3.5" fill="#1e2945" />
          
          <line id="switchBlade" x1="245" y1="105" x2="245" y2="65" stroke="#0284c7" stroke-width="3.5" stroke-linecap="round" style="transition: all 0.25s ease;" />

          
          <circle id="lampGlowCircle" cx="145" cy="150" r="26" fill="url(#lampGlow)" opacity="1" style="transition: opacity 0.2s ease;" />
          <circle cx="145" cy="150" r="14" fill="#ffffff" stroke="#1e2945" stroke-width="2" />
          
          <line x1="137" y1="142" x2="153" y2="158" stroke="#1e2945" stroke-width="1.8" />
          <line x1="153" y1="142" x2="137" y2="158" stroke="#1e2945" stroke-width="1.8" />

          
          <g id="electronGroup"></g>
        </svg>
      </div>
      <div class="annotation">Constant Direction (DC)</div>
    </div>

    
    <div class="card-panel">
      <div class="panel-title">Oscilloscope Trace</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 290 180">
          <defs>
            <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" stroke-width="1" />
            </pattern>
          </defs>

          
          <rect x="35" y="15" width="240" height="145" rx="6" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1.5" />
          <rect x="35" y="15" width="240" height="145" fill="url(#grid)" />

          
          
          <line x1="45" y1="115" x2="265" y2="115" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
          
          <line x1="50" y1="150" x2="50" y2="25" stroke="#64748b" stroke-width="1.5" />
          <polyline points="47,28 50,22 53,28" fill="none" stroke="#64748b" stroke-width="1.5" />
          <text x="42" y="24" font-size="11" font-weight="bold" fill="#1e2945">V</text>

          
          <text x="268" y="128" font-size="11" font-weight="bold" fill="#1e2945">t</text>

          
          <text x="44" y="119" font-size="10" font-weight="bold" fill="#64748b" text-anchor="end">0V</text>
          
          
          <line x1="47" y1="60" x2="53" y2="60" stroke="#64748b" stroke-width="1.5" />
          <text x="44" y="64" font-size="10" font-weight="bold" fill="#0284c7" text-anchor="end">+1.5V</text>

          
          <line id="scopeLine" x1="50" y1="60" x2="265" y2="60" stroke="#0284c7" stroke-width="3" stroke-linecap="round" style="transition: y1 0.2s ease, y2 0.2s ease;" />

          
          <circle id="tracerDot" cx="50" cy="60" r="4.5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5" />
        </svg>
      </div>
      <div class="annotation">Constant Potential Difference</div>
    </div>
  </div>

  
  <div class="controls">
    <button id="toggleBtn" class="btn-toggle" onclick="toggleSwitch()">
      <span id="btnIcon">⏻</span>
      <span id="btnText">Open Switch</span>
    </button>
    <div id="statusBadge" class="status-badge">Circuit Closed (DC Active)</div>
  </div>

  <script>
    let isClosed = true;
    let animId = null;
    let electronOffset = 0;
    let traceX = 50;

    // Electron loop path definition (Counter-clockwise: leaves negative '-' top-left, flows through bottom lamp to positive '+')
    // Perimeter segments:
    // Top-left: (135,30) -> (45,30) [L1 = 90]
    // Left:     (45,30)  -> (45,150) [L2 = 120]
    // Bottom:   (45,150) -> (245,150) [L3 = 200]
    // Right:    (245,150)-> (245,30) [L4 = 120]
    // Top-right:(245,30) -> (165,30) [L5 = 80]
    // Total path length = 610
    const TOTAL_LEN = 610;
    const NUM_ELECTRONS = 12;

    function getPointOnCircuit(dist) {
      let d = (dist % TOTAL_LEN + TOTAL_LEN) % TOTAL_LEN;
      // Segment 1: Top-left (135 -> 45 at y=30)
      if (d <= 90) {
        return { x: 135 - d, y: 30 };
      }
      d -= 90;
      // Segment 2: Left (y=30 -> 150 at x=45)
      if (d <= 120) {
        return { x: 45, y: 30 + d };
      }
      d -= 120;
      // Segment 3: Bottom (x=45 -> 245 at y=150)
      if (d <= 200) {
        return { x: 45 + d, y: 150 };
      }
      d -= 200;
      // Segment 4: Right (y=150 -> 30 at x=245)
      if (d <= 120) {
        return { x: 245, y: 150 - d };
      }
      d -= 120;
      // Segment 5: Top-right (x=245 -> 165 at y=30)
      return { x: 245 - d, y: 30 };
    }

    // Initialize Electron SVG DOM nodes
    const electronGroup = document.getElementById('electronGroup');
    const electronNodes = [];

    for (let i = 0; i < NUM_ELECTRONS; i++) {
      const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
      
      const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      circle.setAttribute("r", "5");
      circle.setAttribute("fill", "#0284c7");

      const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
      text.setAttribute("text-anchor", "middle");
      text.setAttribute("dy", "3.5");
      text.setAttribute("font-size", "9");
      text.setAttribute("font-weight", "bold");
      text.setAttribute("fill", "#ffffff");
      text.textContent = "−";

      g.appendChild(circle);
      g.appendChild(text);
      electronGroup.appendChild(g);
      electronNodes.push(g);
    }

    function renderElectrons() {
      for (let i = 0; i < NUM_ELECTRONS; i++) {
        const dist = electronOffset + (i * (TOTAL_LEN / NUM_ELECTRONS));
        const pt = getPointOnCircuit(dist);
        electronNodes[i].setAttribute("transform", `translate(${pt.x}, ${pt.y})`);
      }
    }

    function animate() {
      if (isClosed) {
        electronOffset += 0.8; // Smooth constant speed
      }
      renderElectrons();

      // Oscilloscope tracer sweep (50 -> 265)
      traceX += 1.2;
      if (traceX > 265) traceX = 50;

      const tracer = document.getElementById('tracerDot');
      tracer.setAttribute("cx", traceX);
      tracer.setAttribute("cy", isClosed ? "60" : "115");

      animId = requestAnimationFrame(animate);
    }

    function toggleSwitch() {
      isClosed = !isClosed;

      const switchBlade = document.getElementById('switchBlade');
      const lampGlow = document.getElementById('lampGlowCircle');
      const scopeLine = document.getElementById('scopeLine');
      const toggleBtn = document.getElementById('toggleBtn');
      const btnText = document.getElementById('btnText');
      const statusBadge = document.getElementById('statusBadge');

      if (isClosed) {
        // Close switch
        switchBlade.setAttribute("x2", "245");
        switchBlade.setAttribute("y2", "65");
        lampGlow.setAttribute("opacity", "1");
        scopeLine.setAttribute("y1", "60");
        scopeLine.setAttribute("y2", "60");
        scopeLine.setAttribute("stroke", "#0284c7");

        toggleBtn.classList.remove('open');
        btnText.textContent = "Open Switch";
        statusBadge.classList.remove('off');
        statusBadge.textContent = "Circuit Closed (DC Active)";
      } else {
        // Open switch
        switchBlade.setAttribute("x2", "230");
        switchBlade.setAttribute("y2", "72");
        lampGlow.setAttribute("opacity", "0");
        scopeLine.setAttribute("y1", "115");
        scopeLine.setAttribute("y2", "115");
        scopeLine.setAttribute("stroke", "#94a3b8");

        toggleBtn.classList.add('open');
        btnText.textContent = "Close Switch";
        statusBadge.classList.add('off');
        statusBadge.textContent = "Circuit Open (0V / No Flow)";
      }
    }

    // Start initial render & animation
    renderElectrons();
    animId = requestAnimationFrame(animate);
  </script>
</body>
</html>

UK-GCSE-SCIENCE-PHYS-ELE-03

Child standards (2)

Aligned learning resources

Related diagrams