<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How Opaque Objects Form Shadows</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 12px;
      user-select: none;
    }

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

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

    /* Smooth, non-strobing ray animation (2.2s cycle) */
    .ray-travel {
      stroke: #d97706;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 8 8;
      animation: rayTravel 2.2s linear infinite;
    }

    .ray-base {
      stroke: #fbbf24;
      stroke-width: 3.5;
      stroke-linecap: round;
    }

    @keyframes rayTravel {
      from {
        stroke-dashoffset: 32;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

    /* Controls bar */
    .controls {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      align-items: center;
    }

    .slider-group {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }

    .slider-group input[type="range"] {
      width: 110px;
      cursor: pointer;
      accent-color: #2563eb;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s, border-color 0.15s;
    }

    .btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .hint-text {
      margin-top: 6px;
      font-size: 13px;
      color: #64748b;
      text-align: center;
      line-height: 1.3;
    }

    @media (max-width: 480px) {
      body {
        padding: 4px 6px;
      }
      .controls {
        gap: 6px;
      }
      .btn {
        padding: 5px 10px;
        font-size: 12px;
      }
      .slider-group {
        font-size: 12px;
      }
      .slider-group input[type="range"] {
        width: 90px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-container">
    <svg class="diagram-svg" viewBox="0 0 600 330" aria-label="Geometric diagram showing 5 light rays diverging from a flashlight, with middle rays blocked by an opaque block forming a shadow on the wall">
      <defs>
        
        <linearGradient id="woodGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#b45309" />
          <stop offset="40%" stop-color="#d97706" />
          <stop offset="100%" stop-color="#92400e" />
        </linearGradient>

        
        <linearGradient id="beamGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#fef08a" stop-opacity="0.55" />
          <stop offset="100%" stop-color="#fef08a" stop-opacity="0.12" />
        </linearGradient>

        
        <linearGradient id="torchGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#64748b" />
          <stop offset="50%" stop-color="#475569" />
          <stop offset="100%" stop-color="#334155" />
        </linearGradient>

        
        <marker id="rayArrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#d97706" />
        </marker>
      </defs>

      
      <line x1="20" y1="310" x2="580" y2="310" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="4 4" />

      
      <polygon id="beamCone" points="100,170 540,50 540,290" fill="url(#beamGrad)" />

      
      
      <line id="ray1-base" class="ray-base" x1="100" y1="170" x2="540" y2="50" />
      <line id="ray1-anim" class="ray-travel" x1="100" y1="170" x2="540" y2="50" marker-end="url(#rayArrow)" />

      
      <line id="ray2-base" class="ray-base" x1="100" y1="170" x2="275" y2="137" />
      <line id="ray2-anim" class="ray-travel" x1="100" y1="170" x2="275" y2="137" />
      <circle id="hit2" cx="275" cy="137" r="4" fill="#b45309" />

      
      <line id="ray3-base" class="ray-base" x1="100" y1="170" x2="275" y2="170" />
      <line id="ray3-anim" class="ray-travel" x1="100" y1="170" x2="275" y2="170" />
      <circle id="hit3" cx="275" cy="170" r="4" fill="#b45309" />

      
      <line id="ray4-base" class="ray-base" x1="100" y1="170" x2="275" y2="203" />
      <line id="ray4-anim" class="ray-travel" x1="100" y1="170" x2="275" y2="203" />
      <circle id="hit4" cx="275" cy="203" r="4" fill="#b45309" />

      
      <line id="ray5-base" class="ray-base" x1="100" y1="170" x2="540" y2="290" />
      <line id="ray5-anim" class="ray-travel" x1="100" y1="170" x2="540" y2="290" marker-end="url(#rayArrow)" />

      
      <g id="flashlight">
        
        <rect x="22" y="152" width="56" height="36" rx="4" fill="url(#torchGrad)" stroke="#1e293b" stroke-width="1.5" />
        <line x1="38" y1="154" x2="38" y2="186" stroke="#334155" stroke-width="2" />
        <line x1="48" y1="154" x2="48" y2="186" stroke="#334155" stroke-width="2" />
        
        <polygon points="78,150 100,132 100,208 78,190" fill="#334155" stroke="#1e293b" stroke-width="1.5" />
        
        <ellipse cx="100" cy="170" rx="3.5" ry="36" fill="#fef08a" stroke="#f59e0b" stroke-width="1.5" />
        
        <rect x="36" y="146" width="16" height="6" rx="2" fill="#ef4444" stroke="#991b1b" stroke-width="1" />
        
        <text x="60" y="222" font-size="14" font-weight="700" fill="#334155" text-anchor="middle">Flashlight</text>
      </g>

      
      <g id="opaque-block">
        
        <rect id="blockRect" x="275" y="118" width="38" height="104" rx="4" fill="url(#woodGrad)" stroke="#78350f" stroke-width="2" />
        
        <line id="grain1" x1="285" y1="126" x2="285" y2="214" stroke="#b45309" stroke-width="1.5" opacity="0.6" />
        <line id="grain2" x1="298" y1="132" x2="298" y2="208" stroke="#78350f" stroke-width="1.5" opacity="0.4" />
        
        <line id="stand" x1="294" y1="222" x2="294" y2="310" stroke="#94a3b8" stroke-width="4" stroke-linecap="round" />
        <ellipse id="baseStand" cx="294" cy="310" rx="20" ry="4" fill="#cbd5e1" />
        
        
        <g id="blockLabelGroup">
          <text id="blockLabel" x="294" y="85" font-size="15" font-weight="700" fill="#78350f" text-anchor="middle">Opaque Object</text>
          <path id="blockArrow" d="M 294 92 L 294 110" stroke="#78350f" stroke-width="2" marker-end="url(#rayArrow)" />
        </g>
      </g>

      
      <g id="wall-group">
        
        <rect x="540" y="24" width="18" height="286" rx="3" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5" />
        
        
        <rect id="wallLitTop" x="540" y="25" width="8" height="25" fill="#fef08a" />
        
        
        <rect id="wallShadow" x="537" y="50" width="14" height="240" rx="2" fill="#1e293b" />
        
        
        <rect id="wallLitBot" x="540" y="290" width="8" height="20" fill="#fef08a" />

        
        <path id="shadowBracket" d="M 522 50 L 512 50 L 512 170 L 500 170 L 512 170 L 512 290 L 522 290" fill="none" stroke="#0f172a" stroke-width="2" stroke-linejoin="round" />
        <text id="shadowText" x="492" y="175" font-size="15" font-weight="800" fill="#0f172a" text-anchor="end">Shadow</text>

        
        <text x="549" y="16" font-size="14" font-weight="700" fill="#475569" text-anchor="middle">Wall</text>
      </g>
    </svg>

    
    <div class="controls">
      <div class="slider-group">
        <label for="posSlider">Object Distance:</label>
        <input type="range" id="posSlider" min="200" max="380" value="275" step="1" aria-label="Adjust object distance">
      </div>
      <button class="btn active" id="btnToggleRays">Animation: Active</button>
    </div>
    
    <div class="hint-text">
      Light rays travel in straight lines. Rays hitting the opaque object are blocked, forming a shadow on the wall.
    </div>
  </div>

  <script>
    const btn = document.getElementById('btnToggleRays');
    const animatedLines = document.querySelectorAll('.ray-travel');
    const slider = document.getElementById('posSlider');

    let isPlaying = true;

    btn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      animatedLines.forEach(line => {
        line.style.animationPlayState = isPlaying ? 'running' : 'paused';
      });
      btn.textContent = isPlaying ? 'Animation: Active' : 'Animation: Paused';
      btn.classList.toggle('active', isPlaying);
    });

    // Optical geometry recalculation on distance adjustment
    const sourceX = 100;
    const sourceY = 170;
    const wallX = 540;
    const blockHeight = 104;
    const halfH = blockHeight / 2; // 52

    function updateOptics(bx) {
      const blockTopY = sourceY - halfH; // 118
      const blockBotY = sourceY + halfH; // 222
      const blockW = 38;

      // Project top and bottom boundary rays to wall
      const slopeTop = (blockTopY - sourceY) / (bx - sourceX);
      const wallTopY = Math.max(25, sourceY + slopeTop * (wallX - sourceX));

      const slopeBot = (blockBotY - sourceY) / (bx - sourceX);
      const wallBotY = Math.min(308, sourceY + slopeBot * (wallX - sourceX));

      // 1. Update Beam Cone
      document.getElementById('beamCone').setAttribute('points', 
        `${sourceX},${sourceY} ${wallX},${wallTopY} ${wallX},${wallBotY}`
      );

      // 2. Update Ray 1 (Top boundary ray)
      document.getElementById('ray1-base').setAttribute('x2', wallX);
      document.getElementById('ray1-base').setAttribute('y2', wallTopY);
      document.getElementById('ray1-anim').setAttribute('x2', wallX);
      document.getElementById('ray1-anim').setAttribute('y2', wallTopY);

      // 3. Update Ray 5 (Bottom boundary ray)
      document.getElementById('ray5-base').setAttribute('x2', wallX);
      document.getElementById('ray5-base').setAttribute('y2', wallBotY);
      document.getElementById('ray5-anim').setAttribute('x2', wallX);
      document.getElementById('ray5-anim').setAttribute('y2', wallBotY);

      // 4. Update Rays 2, 3, 4 (Blocked rays)
      const r2Y = sourceY - halfH * 0.63; // ~137
      const r4Y = sourceY + halfH * 0.63; // ~203

      document.getElementById('ray2-base').setAttribute('x2', bx);
      document.getElementById('ray2-base').setAttribute('y2', r2Y);
      document.getElementById('ray2-anim').setAttribute('x2', bx);
      document.getElementById('ray2-anim').setAttribute('y2', r2Y);
      document.getElementById('hit2').setAttribute('cx', bx);
      document.getElementById('hit2').setAttribute('cy', r2Y);

      document.getElementById('ray3-base').setAttribute('x2', bx);
      document.getElementById('ray3-base').setAttribute('y2', sourceY);
      document.getElementById('ray3-anim').setAttribute('x2', bx);
      document.getElementById('ray3-anim').setAttribute('y2', sourceY);
      document.getElementById('hit3').setAttribute('cx', bx);
      document.getElementById('hit3').setAttribute('cy', sourceY);

      document.getElementById('ray4-base').setAttribute('x2', bx);
      document.getElementById('ray4-base').setAttribute('y2', r4Y);
      document.getElementById('ray4-anim').setAttribute('x2', bx);
      document.getElementById('ray4-anim').setAttribute('y2', r4Y);
      document.getElementById('hit4').setAttribute('cx', bx);
      document.getElementById('hit4').setAttribute('cy', r4Y);

      // 5. Update Block Position
      document.getElementById('blockRect').setAttribute('x', bx);
      document.getElementById('grain1').setAttribute('x1', bx + 10);
      document.getElementById('grain1').setAttribute('x2', bx + 10);
      document.getElementById('grain2').setAttribute('x1', bx + 23);
      document.getElementById('grain2').setAttribute('x2', bx + 23);
      document.getElementById('stand').setAttribute('x1', bx + blockW/2);
      document.getElementById('stand').setAttribute('x2', bx + blockW/2);
      document.getElementById('baseStand').setAttribute('cx', bx + blockW/2);
      document.getElementById('blockLabel').setAttribute('x', bx + blockW/2);
      document.getElementById('blockArrow').setAttribute('d', `M ${bx + blockW/2} 92 L ${bx + blockW/2} 110`);

      // 6. Update Wall Shadow & Lit Areas
      const shadowH = wallBotY - wallTopY;
      document.getElementById('wallShadow').setAttribute('y', wallTopY);
      document.getElementById('wallShadow').setAttribute('height', shadowH);

      document.getElementById('wallLitTop').setAttribute('height', Math.max(0, wallTopY - 25));
      document.getElementById('wallLitBot').setAttribute('y', wallBotY);
      document.getElementById('wallLitBot').setAttribute('height', Math.max(0, 310 - wallBotY));

      // 7. Update Bracket & Label
      document.getElementById('shadowBracket').setAttribute('d', 
        `M 522 ${wallTopY} L 512 ${wallTopY} L 512 ${sourceY} L 500 ${sourceY} L 512 ${sourceY} L 512 ${wallBotY} L 522 ${wallBotY}`
      );
      document.getElementById('shadowText').setAttribute('y', sourceY + 5);
    }

    slider.addEventListener('input', (e) => {
      updateOptics(parseFloat(e.target.value));
    });
  </script>
</body>
</html>

How Opaque Objects Block Light to Form Shadows

<!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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .canvas-container {
      width: 100%;
      max-width: 600px;
      position: relative;
    }

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

    /* Ray animations */
    .ray-line {
      stroke-dasharray: 6, 4;
      animation: rayMove 1.5s linear infinite;
    }

    @keyframes rayMove {
      to { stroke-dashoffset: -20; }
    }

    /* Interactive Steps */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    /* Step display states */
    [data-step="1"] .blocked-elem,
    [data-step="1"] .shadow-elem {
      opacity: 0.25;
      transition: opacity 0.3s ease;
    }

    [data-step="2"] .shadow-elem {
      opacity: 0.35;
      transition: opacity 0.3s ease;
    }

    [data-step="2"] .blocked-elem {
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    [data-step="3"] .blocked-elem,
    [data-step="3"] .shadow-elem,
    [data-step="3"] .pass-elem {
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    .label-tag {
      font-size: 12px;
      font-weight: 700;
      fill: #1e2945;
    }
  </style>
</head>
<body>

  <div class="canvas-container" id="diagramRoot" data-step="3">
    <svg viewBox="0 0 600 370">
      <defs>
        
        <linearGradient id="beamGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#fef08a" stop-opacity="0.5"/>
          <stop offset="100%" stop-color="#fef08a" stop-opacity="0.05"/>
        </linearGradient>

        <linearGradient id="mugGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#f87171"/>
          <stop offset="35%" stop-color="#ef4444"/>
          <stop offset="100%" stop-color="#991b1b"/>
        </linearGradient>

        
        <filter id="crispShadow" x="-10%" y="-10%" width="120%" height="120%">
          <feGaussianBlur stdDeviation="1.5"/>
        </filter>
      </defs>

      
      <polygon points="40,210 560,210 590,360 10,360" fill="#f8fafc" stroke="#e2e8f0" stroke-width="2"/>
      
      
      <line x1="180" y1="210" x2="130" y2="360" stroke="#f1f5f9" stroke-width="1.5"/>
      <line x1="320" y1="210" x2="310" y2="360" stroke="#f1f5f9" stroke-width="1.5"/>
      <line x1="450" y1="210" x2="490" y2="360" stroke="#f1f5f9" stroke-width="1.5"/>

      
      <polygon points="120,115 540,215 390,360 110,135" fill="url(#beamGrad)"/>

      
      <g class="shadow-elem">
        
        <path d="M 285,275 
                 L 435,285 
                 A 28 12 0 0 1 450,298
                 L 380,332
                 A 30 14 0 0 1 315,310 
                 Z" 
              fill="#1e293b" opacity="0.85" filter="url(#crispShadow)"/>
        
        
        <path d="M 430,285 
                 Q 470,295 440,312 
                 L 420,305 
                 Q 442,298 420,290 Z" 
              fill="#1e293b" opacity="0.85" filter="url(#crispShadow)"/>
        
        
        <rect x="420" y="325" width="65" height="22" rx="4" fill="#ffffff" stroke="#94a3b8" stroke-width="1"/>
        <text x="452" y="340" text-anchor="middle" class="label-tag">Shadow</text>
        <line x1="420" y1="330" x2="395" y2="312" stroke="#64748b" stroke-width="1.5" stroke-dasharray="2,2"/>
      </g>

      
      <g class="pass-elem" stroke="#eab308" stroke-width="2.5">
        
        <line x1="120" y1="105" x2="465" y2="210" class="ray-line"/>
        <circle cx="465" cy="210" r="3" fill="#eab308"/>

        
        <line x1="120" y1="115" x2="520" y2="245" class="ray-line"/>
        <circle cx="520" cy="245" r="3" fill="#eab308"/>

        
        <line x1="110" y1="135" x2="280" y2="340" class="ray-line"/>
        <circle cx="280" cy="340" r="3" fill="#eab308"/>
      </g>

      
      <g class="blocked-elem" stroke="#f59e0b" stroke-width="2.5">
        
        <line x1="120" y1="112" x2="250" y2="195" class="ray-line"/>
        <circle cx="250" cy="195" r="3.5" fill="#ef4444" stroke="#ffffff" stroke-width="1"/>

        
        <line x1="115" y1="120" x2="255" y2="225" class="ray-line"/>
        <circle cx="255" cy="225" r="3.5" fill="#ef4444" stroke="#ffffff" stroke-width="1"/>

        
        <line x1="112" y1="128" x2="260" y2="255" class="ray-line"/>
        <circle cx="260" cy="255" r="3.5" fill="#ef4444" stroke="#ffffff" stroke-width="1"/>
      </g>

      
      <g id="mug">
        
        <ellipse cx="285" cy="275" rx="30" ry="10" fill="#0f172a" opacity="0.6"/>

        
        <path d="M 305,200 C 345,200 345,260 305,260" 
              fill="none" stroke="#dc2626" stroke-width="10" stroke-linecap="round"/>
        <path d="M 305,200 C 340,200 340,260 305,260" 
              fill="none" stroke="#991b1b" stroke-width="5" stroke-linecap="round"/>

        
        <path d="M 255,195 L 255,265 A 30 11 0 0 0 315,265 L 315,195 Z" fill="url(#mugGrad)"/>

        
        <ellipse cx="285" cy="195" rx="30" ry="10" fill="#78350f" stroke="#dc2626" stroke-width="2"/>
        <ellipse cx="285" cy="196" rx="26" ry="8" fill="#451a03"/>

        
        <rect x="235" y="145" width="100" height="22" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/>
        <text x="285" y="160" text-anchor="middle" class="label-tag">Opaque Object</text>
        <line x1="285" y1="167" x2="285" y2="188" stroke="#64748b" stroke-width="1.5"/>
      </g>

      
      <g id="lamp">
        
        <ellipse cx="75" cy="230" rx="30" ry="10" fill="#334155"/>
        <ellipse cx="75" cy="227" rx="28" ry="8" fill="#64748b"/>

        
        <path d="M 75,227 Q 60,150 95,95" fill="none" stroke="#475569" stroke-width="6" stroke-linecap="round"/>
        <circle cx="95" cy="95" r="5" fill="#334155"/>

        
        <polygon points="85,85 125,105 110,135 70,115" fill="#0284c7"/>
        <ellipse cx="117" cy="120" rx="10" ry="18" fill="#fef08a" transform="rotate(-30 117 120)"/>
        
        <circle cx="115" cy="120" r="7" fill="#ffffff"/>

        
        <rect x="40" y="45" width="90" height="22" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/>
        <text x="85" y="60" text-anchor="middle" class="label-tag">Light Source</text>
        <line x1="85" y1="67" x2="95" y2="88" stroke="#64748b" stroke-width="1.5"/>
      </g>

      
      <g class="blocked-elem">
        <rect x="175" y="275" width="90" height="22" rx="4" fill="#fee2e2" stroke="#f87171" stroke-width="1"/>
        <text x="220" y="290" text-anchor="middle" class="label-tag" fill="#991b1b">Light Blocked</text>
        <line x1="220" y1="275" x2="250" y2="245" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="2,2"/>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="step-btn" onclick="setStep(1)">1. Light Rays</button>
    <button class="step-btn" onclick="setStep(2)">2. Mug Blocks Light</button>
    <button class="step-btn active" onclick="setStep(3)">3. Shadow Forms</button>
  </div>

  <script>
    function setStep(stepNum) {
      const root = document.getElementById('diagramRoot');
      root.setAttribute('data-step', stepNum);
      
      const btns = document.querySelectorAll('.step-btn');
      btns.forEach((btn, idx) => {
        if (idx + 1 === stepNum) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Straight Light Rays Diagram</title>
  <style>
    * { 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
    }
    body {
      width: 100%;
      background: #0b0f19;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 10px 16px;
      user-select: none;
      overflow-x: hidden;
    }
    .scene-wrap {
      width: 100%;
      max-width: 620px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .ray-line {
      stroke: #facc15;
      stroke-width: 3.5;
      stroke-dasharray: 8 10;
      animation: rayTravel 2.4s linear infinite;
    }
    @keyframes rayTravel {
      from { stroke-dashoffset: 36; }
      to { stroke-dashoffset: 0; }
    }
    .controls {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
    }
    .toggle-btn {
      background: #1e293b;
      border: 1.5px solid #475569;
      color: #f8fafc;
      font-size: 15px;
      font-weight: 600;
      padding: 8px 20px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    }
    .toggle-btn:hover {
      opacity: 0.9;
    }
    .toggle-btn:active {
      opacity: 0.8;
    }
    .toggle-btn.active {
      background: #facc15;
      border-color: #facc15;
      color: #0f172a;
    }
    .diagram-label {
      font-family: system-ui, -apple-system, sans-serif;
      user-select: none;
    }
  </style>
</head>
<body>
  <div class="scene-wrap">
    <svg viewBox="0 0 700 350" xmlns="http://www.w3.org/2000/svg">
      <defs>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="7" 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="#facc15" />
        </marker>
        
        <linearGradient id="beamGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#facc15" stop-opacity="0.4" />
          <stop offset="100%" stop-color="#facc15" stop-opacity="0.04" />
        </linearGradient>
        
        <linearGradient id="torchBody" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fbbf24" />
          <stop offset="50%" stop-color="#d97706" />
          <stop offset="100%" stop-color="#b45309" />
        </linearGradient>
        <linearGradient id="torchHead" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#94a3b8" />
          <stop offset="50%" stop-color="#475569" />
          <stop offset="100%" stop-color="#1e293b" />
        </linearGradient>
      </defs>

      
      <g stroke="#1e293b" stroke-width="1" opacity="0.45">
        <line x1="0" y1="60" x2="700" y2="60" />
        <line x1="0" y1="130" x2="700" y2="130" />
        <line x1="0" y1="200" x2="700" y2="200" />
        <line x1="0" y1="270" x2="700" y2="270" />
      </g>

      
      <polygon id="beamArea" points="160,175 680,45 680,305" fill="url(#beamGrad)" />

      
      <g id="raysGroup">
        
        <line class="ray-line" x1="160" y1="175" x2="670" y2="55" marker-end="url(#arrow)" />
        
        <line class="ray-line" x1="160" y1="175" x2="670" y2="115" marker-end="url(#arrow)" />
        
        <line class="ray-line" x1="160" y1="175" x2="670" y2="175" marker-end="url(#arrow)" />
        
        <line class="ray-line" x1="160" y1="175" x2="670" y2="235" marker-end="url(#arrow)" />
        
        <line class="ray-line" x1="160" y1="175" x2="670" y2="295" marker-end="url(#arrow)" />
      </g>

      
      <g transform="translate(10, -25)">
        
        <rect x="25" y="180" width="85" height="40" rx="5" fill="url(#torchBody)" stroke="#78350f" stroke-width="2" />
        
        <line x1="45" y1="184" x2="45" y2="216" stroke="#92400e" stroke-width="3" stroke-linecap="round" />
        <line x1="60" y1="184" x2="60" y2="216" stroke="#92400e" stroke-width="3" stroke-linecap="round" />
        <line x1="75" y1="184" x2="75" y2="216" stroke="#92400e" stroke-width="3" stroke-linecap="round" />
        <line x1="90" y1="184" x2="90" y2="216" stroke="#92400e" stroke-width="3" stroke-linecap="round" />

        
        <rect id="switchBase" x="55" y="172" width="24" height="8" rx="2" fill="#334155" />
        <rect id="switchNub" x="67" y="170" width="10" height="6" rx="2" fill="#facc15" />

        
        <polygon points="110,180 150,155 150,245 110,220" fill="url(#torchHead)" stroke="#334155" stroke-width="2" />
        
        
        <rect x="148" y="153" width="6" height="94" rx="2" fill="#cbd5e1" />
        
        <ellipse id="bulbGlow" cx="152" cy="200" rx="4" ry="20" fill="#fef08a" />
      </g>

      
      <g class="diagram-label">
        <text x="80" y="248" fill="#e2e8f0" font-size="18" font-weight="700" text-anchor="middle">Flashlight</text>
        <text x="420" y="332" fill="#facc15" font-size="19" font-weight="700" letter-spacing="0.5" text-anchor="middle">Straight Light Rays →</text>
      </g>
    </svg>
  </div>

  <div class="controls">
    <button class="toggle-btn active" id="powerBtn" onclick="toggleLight()" aria-label="Toggle light beam">
      <span id="btnIcon">⚡</span> Light: <span id="btnStatus">ON</span>
    </button>
  </div>

  <script>
    let isOn = true;
    function toggleLight() {
      isOn = !isOn;
      const rays = document.getElementById('raysGroup');
      const beam = document.getElementById('beamArea');
      const bulb = document.getElementById('bulbGlow');
      const btn = document.getElementById('powerBtn');
      const status = document.getElementById('btnStatus');
      const nub = document.getElementById('switchNub');

      if (isOn) {
        rays.style.display = 'block';
        beam.style.display = 'block';
        bulb.style.display = 'block';
        btn.classList.add('active');
        status.textContent = 'ON';
        nub.setAttribute('x', '67');
        nub.setAttribute('fill', '#facc15');
      } else {
        rays.style.display = 'none';
        beam.style.display = 'none';
        bulb.style.display = 'none';
        btn.classList.remove('active');
        status.textContent = 'OFF';
        nub.setAttribute('x', '57');
        nub.setAttribute('fill', '#64748b');
      }
    }
  </script>
</body>
</html>

science.ks3.y2.t4.s4

Aligned learning resources

Related diagrams