<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 10px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      padding: 4px 0;
    }
    .slider-container {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      max-width: 280px;
    }
    input[type=range] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #cbd5e1;
      outline: none;
      -webkit-appearance: none;
      cursor: pointer;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #2563eb;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    }
    input[type=range]::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #2563eb;
      border: none;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <svg viewBox="0 0 590 230" aria-label="Interactive shadow formation diagram">
      <defs>
        
        <linearGradient id="torchGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#475569"/>
          <stop offset="50%" stop-color="#64748b"/>
          <stop offset="100%" stop-color="#334155"/>
        </linearGradient>
        
        <radialGradient id="ballGrad" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#60a5fa"/>
          <stop offset="70%" stop-color="#2563eb"/>
          <stop offset="100%" stop-color="#1e40af"/>
        </radialGradient>
      </defs>

      
      <polygon id="topBeam" fill="#fef08a" opacity="0.45"/>
      <polygon id="bottomBeam" fill="#fef08a" opacity="0.45"/>
      <polygon id="shadowZone" fill="#f1f5f9" opacity="0.9"/>

      
      <line id="rayTopPass" stroke="#d97706" stroke-width="1.75" stroke-dasharray="4 3"/>
      <line id="rayTopTan" stroke="#d97706" stroke-width="2.25"/>
      <line id="rayMidTop" stroke="#d97706" stroke-width="1.75"/>
      <line id="rayMidCenter" stroke="#d97706" stroke-width="1.75"/>
      <line id="rayMidBot" stroke="#d97706" stroke-width="1.75"/>
      <line id="rayBotTan" stroke="#d97706" stroke-width="2.25"/>
      <line id="rayBotPass" stroke="#d97706" stroke-width="1.75" stroke-dasharray="4 3"/>

      
      <g id="blockedMarks" stroke="#dc2626" stroke-width="2.2" stroke-linecap="round"></g>

      
      <g transform="translate(14, 100)">
        <rect x="0" y="6" width="26" height="18" rx="2" fill="url(#torchGrad)"/>
        <path d="M 26 6 L 42 0 L 42 30 L 26 24 Z" fill="url(#torchGrad)"/>
        <ellipse cx="42" cy="15" rx="3.5" ry="15" fill="#fde047" stroke="#ca8a04" stroke-width="1"/>
      </g>
      <text x="35" y="146" font-size="11" font-weight="700" fill="#475569" text-anchor="middle">Light</text>

      
      <g id="ballGroup">
        <circle id="ball" r="24" fill="url(#ballGrad)"/>
        <text id="ballLabel" y="38" font-size="11" font-weight="700" fill="#1e2945" text-anchor="middle">Opaque Object</text>
      </g>

      
      <rect x="440" y="15" width="9" height="200" rx="3" fill="#cbd5e1"/>
      <rect id="screenLitTop" x="440" width="9" fill="#facc15" rx="2"/>
      <rect id="screenShadow" x="438" width="13" fill="#1e2945" rx="2"/>
      <rect id="screenLitBot" x="440" width="9" fill="#facc15" rx="2"/>

      
      <text id="labelLitTop" x="456" y="28" font-size="11" font-weight="700" fill="#9a3412">Light</text>
      <text id="shadowLabel" x="456" y="119" font-size="11" font-weight="700" fill="#1e2945">Shadow (No Light)</text>
      <text id="labelLitBot" x="456" y="206" font-size="11" font-weight="700" fill="#9a3412">Light</text>
    </svg>

    <div class="controls">
      <span>Move Ball:</span>
      <div class="slider-container">
        <input type="range" id="distSlider" min="140" max="330" value="215" aria-label="Distance of ball from light">
      </div>
    </div>
  </div>

  <script>
    const srcX = 56;
    const srcY = 115;
    const screenX = 440;
    const ballR = 24;
    const screenTop = 15;
    const screenBottom = 215;

    const ballGroup = document.getElementById('ballGroup');
    const slider = document.getElementById('distSlider');
    const shadowLabel = document.getElementById('shadowLabel');
    const labelLitTop = document.getElementById('labelLitTop');
    const labelLitBot = document.getElementById('labelLitBot');
    const blockedMarks = document.getElementById('blockedMarks');

    function update() {
      const bx = parseFloat(slider.value);
      const by = 115;

      // Position Ball
      ballGroup.setAttribute('transform', `translate(${bx}, ${by})`);

      // Tangent math from light source to ball
      const d = bx - srcX;
      const angle = Math.asin(ballR / d);

      // Projected shadow boundaries on screen
      const slope = Math.tan(angle);
      const shadowTop = srcY - (screenX - srcX) * slope;
      const shadowBot = srcY + (screenX - srcX) * slope;

      // Update Screen segments
      const topLit = document.getElementById('screenLitTop');
      const topLitHeight = Math.max(0, shadowTop - screenTop);
      topLit.setAttribute('y', screenTop);
      topLit.setAttribute('height', topLitHeight);

      const shadowRect = document.getElementById('screenShadow');
      shadowRect.setAttribute('y', shadowTop);
      shadowRect.setAttribute('height', Math.max(0, shadowBot - shadowTop));

      const botLit = document.getElementById('screenLitBot');
      const botLitHeight = Math.max(0, screenBottom - shadowBot);
      botLit.setAttribute('y', shadowBot);
      botLit.setAttribute('height', botLitHeight);

      // Reposition labels
      shadowLabel.setAttribute('y', by + 4);
      labelLitTop.setAttribute('y', Math.max(26, Math.min(shadowTop - 8, 35)));
      labelLitBot.setAttribute('y', Math.min(208, Math.max(shadowBot + 16, 195)));

      // Tangent & Passing Rays
      const topPassY = Math.max(15, shadowTop - 28);
      const botPassY = Math.min(215, shadowBot + 28);

      document.getElementById('rayTopPass').setAttribute('x1', srcX);
      document.getElementById('rayTopPass').setAttribute('y1', srcY);
      document.getElementById('rayTopPass').setAttribute('x2', screenX);
      document.getElementById('rayTopPass').setAttribute('y2', topPassY);

      document.getElementById('rayTopTan').setAttribute('x1', srcX);
      document.getElementById('rayTopTan').setAttribute('y1', srcY);
      document.getElementById('rayTopTan').setAttribute('x2', screenX);
      document.getElementById('rayTopTan').setAttribute('y2', shadowTop);

      document.getElementById('rayBotTan').setAttribute('x1', srcX);
      document.getElementById('rayBotTan').setAttribute('y1', srcY);
      document.getElementById('rayBotTan').setAttribute('x2', screenX);
      document.getElementById('rayBotTan').setAttribute('y2', shadowBot);

      document.getElementById('rayBotPass').setAttribute('x1', srcX);
      document.getElementById('rayBotPass').setAttribute('y1', srcY);
      document.getElementById('rayBotPass').setAttribute('x2', screenX);
      document.getElementById('rayBotPass').setAttribute('y2', botPassY);

      // Blocked Rays hitting ball surface
      const midRays = [
        { id: 'rayMidTop', targetY: by - ballR * 0.55 },
        { id: 'rayMidCenter', targetY: by },
        { id: 'rayMidBot', targetY: by + ballR * 0.55 }
      ];

      let marksHTML = '';
      midRays.forEach(ray => {
        const dy = ray.targetY - by;
        const hitX = bx - Math.sqrt(Math.max(0, ballR * ballR - dy * dy));
        const hitY = ray.targetY;
        const el = document.getElementById(ray.id);
        el.setAttribute('x1', srcX);
        el.setAttribute('y1', srcY);
        el.setAttribute('x2', hitX);
        el.setAttribute('y2', hitY);

        marksHTML += `
          <line x1="${hitX - 3}" y1="${hitY - 3}" x2="${hitX + 3}" y2="${hitY + 3}"/>
          <line x1="${hitX + 3}" y1="${hitY - 3}" x2="${hitX - 3}" y2="${hitY + 3}"/>
        `;
      });
      blockedMarks.innerHTML = marksHTML;

      // Update Light & Shadow Polygons
      document.getElementById('topBeam').setAttribute('points', 
        `${srcX},${srcY} ${screenX},${topPassY} ${screenX},${shadowTop}`
      );
      document.getElementById('bottomBeam').setAttribute('points', 
        `${srcX},${srcY} ${screenX},${shadowBot} ${screenX},${botPassY}`
      );
      document.getElementById('shadowZone').setAttribute('points', 
        `${bx},${by} ${screenX},${shadowTop} ${screenX},${shadowBot}`
      );
    }

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

How Shadows Form When Opaque Objects Block Light

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Light Rays in Straight Lines</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }

    .diagram-area {
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .svg-container {
      width: 100%;
      overflow: visible;
    }

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

    /* Ray animations */
    .ray-line {
      stroke: #d97706;
      stroke-width: 2.5;
      stroke-dasharray: 8 6;
      stroke-linecap: round;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .light-on .ray-line {
      opacity: 1;
      animation: rayTravel 2.4s linear infinite;
    }

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

    .beam-cone {
      fill: url(#beamGrad);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .light-on .beam-cone {
      opacity: 0.85;
    }

    .wall-glow {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .light-on .wall-glow {
      opacity: 1;
    }

    .bulb-glow {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .light-on .bulb-glow {
      opacity: 1;
    }

    /* Direction arrows */
    .ray-arrow {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .light-on .ray-arrow {
      opacity: 0.95;
    }

    /* Note badge */
    .concept-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #fef3c7;
      color: #78350f;
      border: 1px solid #fde68a;
      border-radius: 20px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      line-height: 1.3;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .concept-badge.active {
      background: #fef08a;
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
    }

    /* Button */
    .toggle-btn {
      background: #1e2945;
      color: #ffffff;
      border: none;
      border-radius: 10px;
      padding: 10px 22px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.2);
      transition: background 0.2s ease, opacity 0.2s ease;
    }

    .toggle-btn:hover {
      background: #2d3d66;
    }

    .toggle-btn:active {
      background: #0f172a;
    }

    @media (max-width: 400px) {
      .concept-badge {
        font-size: 13px;
        padding: 6px 12px;
      }
      .toggle-btn {
        padding: 8px 18px;
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    <div class="svg-container">
      <svg id="stage" viewBox="0 0 500 230" class="light-on" aria-label="Diagram showing light rays traveling in straight paths from a flashlight to a wall">
        <defs>
          
          <linearGradient id="beamGrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#fbbf24" stop-opacity="0.6"/>
            <stop offset="70%" stop-color="#fef08a" stop-opacity="0.3"/>
            <stop offset="100%" stop-color="#fef9c3" stop-opacity="0.1"/>
          </linearGradient>

          
          <radialGradient id="patchGrad" cx="30%" cy="50%" r="60%">
            <stop offset="0%" stop-color="#ffffff"/>
            <stop offset="40%" stop-color="#fef08a"/>
            <stop offset="75%" stop-color="#f59e0b"/>
            <stop offset="100%" stop-color="#d97706" stop-opacity="0"/>
          </radialGradient>
        </defs>

        
        <line x1="20" y1="208" x2="480" y2="208" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4 4" />

        
        <polygon class="beam-cone" points="112,98 438,45 438,175 112,122" />

        
        <line class="ray-line" x1="112" y1="102" x2="438" y2="55" />
        <line class="ray-line" x1="112" y1="106" x2="438" y2="80" />
        <line class="ray-line" x1="112" y1="110" x2="438" y2="110" />
        <line class="ray-line" x1="112" y1="114" x2="438" y2="140" />
        <line class="ray-line" x1="112" y1="118" x2="438" y2="165" />

        
        <rect x="438" y="25" width="28" height="185" rx="5" fill="#475569" />
        <rect x="442" y="28" width="6" height="179" rx="3" fill="#64748b" opacity="0.8" />
        
        
        <g class="wall-glow">
          <ellipse cx="438" cy="110" rx="14" ry="65" fill="url(#patchGrad)" />
          <ellipse cx="438" cy="110" rx="6" ry="40" fill="#ffffff" opacity="0.9" />
        </g>

        
        <text x="452" y="224" font-size="14" font-weight="700" fill="#0f172a" text-anchor="middle">Wall</text>

        
        
        <circle class="bulb-glow" cx="112" cy="110" r="12" fill="#fbbf24" opacity="0.75" />

        
        <rect x="36" y="98" width="46" height="24" rx="4" fill="#1e293b" />
        <rect x="36" y="103" width="46" height="4" fill="#0f172a" />
        <rect x="36" y="113" width="46" height="4" fill="#0f172a" />
        
        
        <rect x="52" y="93" width="14" height="5" rx="2" fill="#f59e0b" />

        
        <polygon points="82,96 112,86 112,134 82,124" fill="#334155" />
        
        <ellipse cx="112" cy="110" rx="4" ry="24" fill="#0284c7" />
        
        <ellipse cx="113" cy="110" rx="2" ry="22" fill="#e0f2fe" />

        
        <text x="68" y="148" font-size="14" font-weight="700" fill="#0f172a" text-anchor="middle">Flashlight</text>

        
        <g class="ray-arrow">
          <polygon points="275,107 283,110 275,113" fill="#d97706" />
          <polygon points="275,81 283,83 276,87" fill="#d97706" />
          <polygon points="275,133 283,137 276,139" fill="#d97706" />
        </g>
      </svg>
    </div>

    
    <div id="noteBadge" class="concept-badge active">
      <span>✦</span>
      <span>Light travels in straight paths (rays)</span>
    </div>

    
    <button id="toggleBtn" class="toggle-btn" type="button" aria-label="Toggle flashlight on or off">
      <span id="btnIcon">💡</span>
      <span id="btnText">Turn Off</span>
    </button>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const toggleBtn = document.getElementById('toggleBtn');
    const btnText = document.getElementById('btnText');
    const btnIcon = document.getElementById('btnIcon');
    const noteBadge = document.getElementById('noteBadge');

    let isOn = true;

    toggleBtn.addEventListener('click', () => {
      isOn = !isOn;
      if (isOn) {
        stage.classList.add('light-on');
        noteBadge.classList.add('active');
        btnText.textContent = 'Turn Off';
        btnIcon.textContent = '💡';
      } else {
        stage.classList.remove('light-on');
        noteBadge.classList.remove('active');
        btnText.textContent = 'Turn On';
        btnIcon.textContent = '🔦';
      }
    });
  </script>
</body>
</html>

science.ks2.y1.t4.s4

Aligned learning resources

Related diagrams