<!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;
      background: #ffffff;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
      user-select: none;
    }

    .header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e2e8f0;
    }
    .title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }
    .formula-badge {
      font-size: 11px;
      font-weight: 700;
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
      padding: 3px 8px;
      border-radius: 999px;
      letter-spacing: 0.2px;
    }

    .legend-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
      padding: 0 2px;
    }

    .scales-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .scale-row {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 9px 11px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
      cursor: pointer;
    }
    .scale-row:hover {
      border-color: #cbd5e1;
      background: #f1f5f9;
    }
    .scale-row.active {
      border-color: #94a3b8;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
      background: #ffffff;
    }

    .row-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .scale-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }
    .scale-icon {
      font-size: 15px;
    }
    .metrics {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
    }
    .distance-tag {
      font-weight: 600;
      color: #475569;
      background: #e2e8f0;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .time-tag {
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .bar-container {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .bar-meta {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
    }
    .bar-track {
      width: 100%;
      height: 10px;
      background: #e2e8f0;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
    }
    .bar-fill {
      height: 100%;
      border-radius: 5px;
      width: 0%;
      transition: width 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Section Highlights */
    .row-cell .time-tag { color: #2a9d8f; }
    .row-cell .bar-fill { background: #2a9d8f; }

    .row-tissue .time-tag { color: #e76f51; }
    .row-tissue .bar-fill { background: #e76f51; }

    .row-body .time-tag { color: #e63946; }
    .row-body .bar-fill { background: #e63946; }

    /* Detail & Action Box */
    .detail-panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .detail-title {
      font-size: 12px;
      font-weight: 700;
      color: #1e293b;
    }
    .detail-desc {
      font-size: 11.5px;
      line-height: 1.4;
      color: #475569;
    }

    .controls-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 2px;
    }
    .takeaway-text {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }
    .btn-sim {
      background: #1e293b;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      transition: background-color 0.15s ease;
    }
    .btn-sim:hover {
      background: #334155;
    }
    .btn-sim:active {
      background: #0f172a;
    }
  </style>
</head>
<body>

  <div class="header">
    <span class="title">Oxygen Diffusion Across Physical Scales</span>
    <span class="formula-badge">Time ∝ Distance²</span>
  </div>

  <div class="legend-bar">
    <span>Scale &amp; Distance</span>
    <span>Diffusion Efficiency vs. Delay</span>
  </div>

  <div class="scales-list">
    
    <div class="scale-row row-cell active" id="rowCell" data-index="0">
      <div class="row-top">
        <span class="scale-label">
          <span class="scale-icon">🦠</span>
          Single Cell
        </span>
        <div class="metrics">
          <span class="distance-tag">10 µm</span>
          <span class="time-tag">⚡ 0.001 s (1 ms)</span>
        </div>
      </div>
      <div class="bar-container">
        <div class="bar-track">
          <div class="bar-fill" id="barCell" style="width: 100%;"></div>
        </div>
        <div class="bar-meta">
          <span>Relative Transport Speed</span>
          <span>Ultra-fast (100%)</span>
        </div>
      </div>
    </div>

    
    <div class="scale-row row-tissue" id="rowTissue" data-index="1">
      <div class="row-top">
        <span class="scale-label">
          <span class="scale-icon">🥩</span>
          1 mm Tissue Slab
        </span>
        <div class="metrics">
          <span class="distance-tag">1 mm</span>
          <span class="time-tag">⏱️ ~100 s (&gt;1.5 min)</span>
        </div>
      </div>
      <div class="bar-container">
        <div class="bar-track">
          <div class="bar-fill" id="barTissue" style="width: 38%;"></div>
        </div>
        <div class="bar-meta">
          <span>Relative Transport Speed</span>
          <span>Lagging delay</span>
        </div>
      </div>
    </div>

    
    <div class="scale-row row-body" id="rowBody" data-index="2">
      <div class="row-top">
        <span class="scale-label">
          <span class="scale-icon">🧍</span>
          10 cm Body Core
        </span>
        <div class="metrics">
          <span class="distance-tag">10 cm</span>
          <span class="time-tag">⏳ ~115 days</span>
        </div>
      </div>
      <div class="bar-container">
        <div class="bar-track">
          <div class="bar-fill" id="barBody" style="width: 5%;"></div>
        </div>
        <div class="bar-meta">
          <span>Relative Transport Speed</span>
          <span>Deadly slow (&lt;0.01%)</span>
        </div>
      </div>
    </div>
  </div>

  <div class="detail-panel">
    <div class="detail-title" id="infoTitle">Microscopic Efficiency: 10 µm Cell</div>
    <div class="detail-desc" id="infoDesc">
      Diffusion takes just 0.001 seconds over 10 µm. Single-celled organisms rely entirely on passive diffusion for oxygen delivery without specialized circulatory organs.
    </div>
  </div>

  <div class="controls-row">
    <span class="takeaway-text">💡 Complex organisms require bulk transport (blood).</span>
    <button class="btn-sim" id="replayBtn" type="button">
      <span>▶</span> Animate Bars
    </button>
  </div>

  <script>
    const scaleData = [
      {
        rowId: 'rowCell',
        barId: 'barCell',
        targetWidth: '100%',
        title: 'Microscopic Efficiency: 10 µm Single Cell',
        desc: 'Over 10 µm, oxygen diffuses in just 0.001 s (1 ms). Microscopic cells get instant nutrient delivery and waste clearance without any circulatory machinery.'
      },
      {
        rowId: 'rowTissue',
        barId: 'barTissue',
        targetWidth: '38%',
        title: 'Diffusion Barrier: 1 mm Tissue Slab',
        desc: 'Increasing distance 100-fold multiplies diffusion time 10,000-fold to ~100 seconds. Cells deep inside tissue would starve without capillary networks nearby.'
      },
      {
        rowId: 'rowBody',
        barId: 'barBody',
        targetWidth: '5%',
        title: 'Lethal Delay: 10 cm Body Core',
        desc: 'Over 10 cm, oxygen would take 115 days to reach interior tissues via pure diffusion. Complex multicellular life is only possible thanks to convective circulatory systems.'
      }
    ];

    const infoTitle = document.getElementById('infoTitle');
    const infoDesc = document.getElementById('infoDesc');
    const replayBtn = document.getElementById('replayBtn');

    function selectScale(index) {
      scaleData.forEach((item, i) => {
        const rowEl = document.getElementById(item.rowId);
        if (i === index) {
          rowEl.classList.add('active');
          infoTitle.textContent = item.title;
          infoDesc.textContent = item.desc;
        } else {
          rowEl.classList.remove('active');
        }
      });
    }

    scaleData.forEach((item, index) => {
      const rowEl = document.getElementById(item.rowId);
      rowEl.addEventListener('click', () => selectScale(index));
    });

    function runAnimation() {
      // Collapse bars first
      scaleData.forEach(item => {
        const barEl = document.getElementById(item.barId);
        barEl.style.transition = 'none';
        barEl.style.width = '0%';
      });

      // Stagger animation with natural CSS transition
      requestAnimationFrame(() => {
        setTimeout(() => {
          scaleData.forEach((item, i) => {
            const barEl = document.getElementById(item.barId);
            barEl.style.transition = 'width 0.8s cubic-bezier(0.16, 1, 0.3, 1)';
            setTimeout(() => {
              barEl.style.width = item.targetWidth;
            }, i * 160);
          });
        }, 40);
      });
    }

    replayBtn.addEventListener('click', runAnimation);
  </script>
</body>
</html>

The Need for a Circulatory System in Active Animals

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Direct Diffusion vs Mass Transport</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #0f172a;
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 8px 12px;
    }
    
    .comparison-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 680px;
    }

    @media (max-width: 480px) {
      .comparison-container {
        grid-template-columns: 1fr;
        gap: 14px;
      }
    }

    .column {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .col-header {
      text-align: center;
      margin-bottom: 4px;
      width: 100%;
    }

    .col-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      letter-spacing: -0.01em;
    }

    .col-subtitle {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      color: #0284c7;
      margin-top: 1px;
    }

    .diagram-svg {
      width: 100%;
      max-width: 280px;
      height: auto;
      display: block;
    }

    /* Calming, slow CSS animations without flicker */
    @keyframes diffuseRadial {
      0% {
        opacity: 0.15;
        transform: scale(1.12);
      }
      50% {
        opacity: 0.95;
      }
      100% {
        opacity: 0.15;
        transform: scale(0.65);
      }
    }

    @keyframes gentleHeartbeat {
      0%, 100% {
        transform: scale(1);
      }
      35% {
        transform: scale(1.08);
      }
      50% {
        transform: scale(1);
      }
      65% {
        transform: scale(1.05);
      }
    }

    @keyframes steadyBloodFlow {
      0% {
        stroke-dashoffset: 48;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }

    .o2-diffuse {
      transform-origin: 100px 88px;
      animation: diffuseRadial 4s ease-in-out infinite;
    }

    .heart-pump {
      transform-origin: 100px 78px;
      animation: gentleHeartbeat 2.2s ease-in-out infinite;
    }

    .blood-flow {
      stroke-dasharray: 8 8;
      animation: steadyBloodFlow 3.6s linear infinite;
    }

    .label-text {
      font-size: 9.5px;
      font-weight: 600;
      fill: #475569;
    }

    .sublabel-text {
      font-size: 8.5px;
      font-weight: 500;
      fill: #64748b;
    }
  </style>
</head>
<body>

  <div class="comparison-container">
    
    <div class="column">
      <div class="col-header">
        <div class="col-title">Direct Diffusion</div>
        <div class="col-subtitle">Unicellular (&lt; 50 µm)</div>
      </div>
      
      <svg class="diagram-svg" viewBox="0 0 200 156" preserveAspectRatio="xMidYMid meet">
        <defs>
          <marker id="arr-blue" viewBox="0 0 6 6" refX="4" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M0,1 L5,3 L0,5 Z" fill="#0284c7" />
          </marker>
        </defs>

        
        <g fill="#0284c7" opacity="0.6">
          <circle cx="22" cy="24" r="2.5" />
          <circle cx="48" cy="14" r="2.5" />
          <circle cx="152" cy="18" r="2.5" />
          <circle cx="178" cy="46" r="2.5" />
          <circle cx="172" cy="120" r="2.5" />
          <circle cx="28" cy="122" r="2.5" />
          <circle cx="14" cy="74" r="2.5" />
          <circle cx="186" cy="84" r="2.5" />
        </g>
        <text x="100" y="10" text-anchor="middle" class="sublabel-text">External Fluid (O₂ rich)</text>

        
        <path d="M58,58 C42,76 50,114 80,124 C116,132 152,116 148,88 C144,56 126,46 100,50 C74,42 68,46 58,58 Z" 
              fill="#f0f9ff" stroke="#38bdf8" stroke-width="2" />
        
        
        <circle cx="100" cy="88" r="13" fill="#bae6fd" stroke="#0284c7" stroke-width="1.5" />
        <text x="100" y="91.5" text-anchor="middle" font-size="7.5" font-weight="600" fill="#0369a1">Nucleus</text>

        
        <text x="74" y="112" font-size="7" font-weight="500" fill="#0284c7">Cytoplasm</text>

        
        <g class="o2-diffuse" stroke="#0284c7" stroke-width="1.5" stroke-linecap="round">
          <line x1="42" y1="42" x2="68" y2="68" marker-end="url(#arr-blue)" />
          <line x1="158" y1="42" x2="132" y2="68" marker-end="url(#arr-blue)" />
          <line x1="160" y1="120" x2="134" y2="102" marker-end="url(#arr-blue)" />
          <line x1="38" y1="116" x2="66" y2="102" marker-end="url(#arr-blue)" />
          
          <circle cx="68" cy="68" r="2.5" fill="#0284c7" />
          <circle cx="132" cy="68" r="2.5" fill="#0284c7" />
          <circle cx="134" cy="102" r="2.5" fill="#0284c7" />
          <circle cx="66" cy="102" r="2.5" fill="#0284c7" />
        </g>

        
        <line x1="52" y1="140" x2="148" y2="140" stroke="#64748b" stroke-width="1" stroke-dasharray="2 2" />
        <path d="M52,136 L52,144 M148,136 L148,144" stroke="#64748b" stroke-width="1" />
        <text x="100" y="152" text-anchor="middle" class="label-text">Diffusion Distance &lt; 50 µm</text>
      </svg>
    </div>

    
    <div class="column">
      <div class="col-header">
        <div class="col-title">Mass Transport</div>
        <div class="col-subtitle">Multicellular (Specialized System)</div>
      </div>
      
      <svg class="diagram-svg" viewBox="0 0 200 156" preserveAspectRatio="xMidYMid meet">
        <defs>
          <marker id="arr-cap" viewBox="0 0 6 6" refX="4" refY="3" markerWidth="3" markerHeight="3" orient="auto">
            <path d="M0,1 L5,3 L0,5 Z" fill="#0284c7" />
          </marker>
        </defs>

        
        <text x="100" y="10" text-anchor="middle" class="label-text">Exchange Surface</text>
        <path d="M 58,22 Q 68,14 78,22 Q 88,30 98,22 Q 108,14 118,22 Q 128,30 138,22 Q 144,16 148,22" 
              fill="none" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />

        
        <circle cx="80" cy="27" r="1.8" fill="#0284c7" />
        <circle cx="100" cy="27" r="1.8" fill="#0284c7" />
        <circle cx="120" cy="27" r="1.8" fill="#0284c7" />

        
        
        <path d="M 130,26 C 162,26 166,62 166,82 C 166,104 150,118 130,118" 
              fill="none" stroke="#ef4444" stroke-width="4.5" stroke-linecap="round" />
        
        <path d="M 70,118 C 50,118 34,104 34,82 C 34,62 38,26 70,26" 
              fill="none" stroke="#3b82f6" stroke-width="4.5" stroke-linecap="round" />

        
        <path d="M 130,26 C 162,26 166,62 166,82 C 166,104 150,118 130,118" 
              fill="none" stroke="#ffffff" stroke-width="1.8" class="blood-flow" />
        <path d="M 70,118 C 50,118 34,104 34,82 C 34,62 38,26 70,26" 
              fill="none" stroke="#ffffff" stroke-width="1.8" class="blood-flow" />

        
        <g class="heart-pump">
          <circle cx="100" cy="74" r="12" fill="#dc2626" stroke="#991b1b" stroke-width="1.5" />
          <path d="M 96,74 L 104,74 M 100,70 L 100,78" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" />
        </g>
        <text x="100" y="96" text-anchor="middle" class="label-text">Bulk Flow Conduit</text>

        
        
        <path d="M 130,118 C 115,114 115,122 100,118 C 85,114 85,122 70,118" 
              fill="none" stroke="#a855f7" stroke-width="2.5" />

        
        <line x1="82" y1="120" x2="82" y2="127" stroke="#0284c7" stroke-width="1.2" marker-end="url(#arr-cap)" />
        <line x1="100" y1="120" x2="100" y2="127" stroke="#0284c7" stroke-width="1.2" marker-end="url(#arr-cap)" />
        <line x1="118" y1="120" x2="118" y2="127" stroke="#0284c7" stroke-width="1.2" marker-end="url(#arr-cap)" />

        
        <rect x="74" y="129" width="14" height="10" rx="2.5" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1" />
        <rect x="93" y="129" width="14" height="10" rx="2.5" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1" />
        <rect x="112" y="129" width="14" height="10" rx="2.5" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1" />

        <text x="100" y="152" text-anchor="middle" class="label-text">Capillary Exchange (&lt; 10 µm)</text>
      </svg>
    </div>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 620px;
    }

    .cube-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      user-select: none;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .cube-card:hover, .cube-card.active {
      border-color: #0284c7;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
    }

    .title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 4px;
    }

    .svg-wrap {
      width: 100%;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .stats {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 6px;
    }

    .stat-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11.5px;
      padding: 3px 6px;
      border-radius: 6px;
      font-weight: 600;
    }

    .stat-sa {
      background: rgba(2, 132, 199, 0.08);
      color: #0369a1;
      border-left: 3px solid #0284c7;
    }

    .stat-vol {
      background: rgba(124, 58, 237, 0.08);
      color: #6d28d9;
      border-left: 3px solid #7c3aed;
    }

    .ratio-box {
      width: 100%;
      margin-top: 6px;
      padding: 6px 4px;
      background: #f1f5f9;
      border-radius: 8px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
    }

    .cube-card.active .ratio-box {
      background: #0284c7;
      color: #ffffff;
    }

    .ratio-val {
      font-size: 15px;
      font-weight: 800;
      display: block;
    }

    @media (max-width: 440px) {
      .grid {
        gap: 6px;
      }
      .cube-card {
        padding: 8px 4px;
      }
      .stat-row {
        font-size: 10px;
        padding: 2px 4px;
      }
      .title {
        font-size: 12px;
      }
      .ratio-val {
        font-size: 13px;
      }
      .ratio-box {
        font-size: 10px;
        padding: 4px 2px;
      }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="cube-card active" onclick="selectCube(0)">
      <div class="title">1 cm Cube</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 100 100">
          
          <g transform="translate(50, 52)">
            
            <polygon points="0,-24 20.8,-12 0,0 -20.8,-12" fill="rgba(124, 58, 237, 0.2)" stroke="#0284c7" stroke-width="1.8" stroke-linejoin="round"/>
            
            <polygon points="-20.8,-12 0,0 0,24 -20.8,12" fill="rgba(124, 58, 237, 0.3)" stroke="#0284c7" stroke-width="1.8" stroke-linejoin="round"/>
            
            <polygon points="0,0 20.8,-12 20.8,12 0,24" fill="rgba(124, 58, 237, 0.15)" stroke="#0284c7" stroke-width="1.8" stroke-linejoin="round"/>
          </g>
        </svg>
      </div>
      <div class="stats">
        <div class="stat-row stat-sa">
          <span>SA</span>
          <span>6 cm²</span>
        </div>
        <div class="stat-row stat-vol">
          <span>Vol</span>
          <span>1 cm³</span>
        </div>
      </div>
      <div class="ratio-box">
        SA : V
        <span class="ratio-val">6 : 1</span>
      </div>
    </div>

    
    <div class="cube-card" onclick="selectCube(1)">
      <div class="title">2 cm Cube</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 100 100">
          
          <g transform="translate(50, 50)">
            
            <polygon points="0,-36 31.2,-18 0,0 -31.2,-18" fill="rgba(124, 58, 237, 0.2)" stroke="#0284c7" stroke-width="1.8" stroke-linejoin="round"/>
            <polygon points="-31.2,-18 0,0 0,36 -31.2,18" fill="rgba(124, 58, 237, 0.3)" stroke="#0284c7" stroke-width="1.8" stroke-linejoin="round"/>
            <polygon points="0,0 31.2,-18 31.2,18 0,36" fill="rgba(124, 58, 237, 0.15)" stroke="#0284c7" stroke-width="1.8" stroke-linejoin="round"/>
            
            <line x1="-15.6" y1="-9" x2="15.6" y2="-27" stroke="#0284c7" stroke-width="1" opacity="0.6"/>
            <line x1="15.6" y1="-9" x2="-15.6" y2="-27" stroke="#0284c7" stroke-width="1" opacity="0.6"/>
            
            <line x1="-15.6" y1="-9" x2="-15.6" y2="27" stroke="#0284c7" stroke-width="1" opacity="0.6"/>
            <line x1="-31.2" y1="0" x2="0" y2="18" stroke="#0284c7" stroke-width="1" opacity="0.6"/>
            
            <line x1="15.6" y1="-9" x2="15.6" y2="27" stroke="#0284c7" stroke-width="1" opacity="0.6"/>
            <line x1="0" y1="18" x2="31.2" y2="0" stroke="#0284c7" stroke-width="1" opacity="0.6"/>
          </g>
        </svg>
      </div>
      <div class="stats">
        <div class="stat-row stat-sa">
          <span>SA</span>
          <span>24 cm²</span>
        </div>
        <div class="stat-row stat-vol">
          <span>Vol</span>
          <span>8 cm³</span>
        </div>
      </div>
      <div class="ratio-box">
        SA : V
        <span class="ratio-val">3 : 1</span>
      </div>
    </div>

    
    <div class="cube-card" onclick="selectCube(2)">
      <div class="title">4 cm Cube</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 100 100">
          
          <g transform="translate(50, 48)">
            
            <polygon points="0,-46 39.8,-23 0,0 -39.8,-23" fill="rgba(124, 58, 237, 0.2)" stroke="#0284c7" stroke-width="1.8" stroke-linejoin="round"/>
            <polygon points="-39.8,-23 0,0 0,46 -39.8,23" fill="rgba(124, 58, 237, 0.3)" stroke="#0284c7" stroke-width="1.8" stroke-linejoin="round"/>
            <polygon points="0,0 39.8,-23 39.8,23 0,46" fill="rgba(124, 58, 237, 0.15)" stroke="#0284c7" stroke-width="1.8" stroke-linejoin="round"/>
            
            
            <line x1="-29.85" y1="-17.25" x2="9.95" y2="-40.25" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="-19.9" y1="-11.5" x2="19.9" y2="-34.5" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="-9.95" y1="-5.75" x2="29.85" y2="-28.75" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>

            <line x1="29.85" y1="-17.25" x2="-9.95" y2="-40.25" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="19.9" y1="-11.5" x2="-19.9" y2="-34.5" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="9.95" y1="-5.75" x2="-29.85" y2="-28.75" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>

            
            <line x1="-29.85" y1="-17.25" x2="-29.85" y2="28.75" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="-19.9" y1="-11.5" x2="-19.9" y2="34.5" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="-9.95" y1="-5.75" x2="-9.95" y2="40.25" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>

            <line x1="-39.8" y1="-11.5" x2="0" y2="11.5" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="-39.8" y1="0" x2="0" y2="23" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="-39.8" y1="11.5" x2="0" y2="34.5" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>

            
            <line x1="9.95" y1="-5.75" x2="9.95" y2="40.25" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="19.9" y1="-11.5" x2="19.9" y2="34.5" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="29.85" y1="-17.25" x2="29.85" y2="28.75" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>

            <line x1="0" y1="11.5" x2="39.8" y2="-11.5" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="0" y1="23" x2="39.8" y2="0" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
            <line x1="0" y1="34.5" x2="39.8" y2="11.5" stroke="#0284c7" stroke-width="0.8" opacity="0.6"/>
          </g>
        </svg>
      </div>
      <div class="stats">
        <div class="stat-row stat-sa">
          <span>SA</span>
          <span>96 cm²</span>
        </div>
        <div class="stat-row stat-vol">
          <span>Vol</span>
          <span>64 cm³</span>
        </div>
      </div>
      <div class="ratio-box">
        SA : V
        <span class="ratio-val">1.5 : 1</span>
      </div>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.cube-card');

    function selectCube(index) {
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === index);
      });
    }
  </script>
</body>
</html>

Calculating Surface Area to Volume Ratios for Cells and Organisms

Why Multicellular Organisms Need Specialised Exchange Surfaces

Adaptations of Alveoli for Gas Exchange

Adaptations of the Small Intestine Villi for Nutrient Absorption

Substances Transported in Animals and Metabolic Waste Removal

Exchange Surfaces in Fish Gills and Plant Leaves

science

Exchange Surfaces and Organism Transport Requirements

Heart Anatomy and Double Circulation Pathways

The Cardiac Cycle: How the Heart Pumps Blood

Arteries, Veins, and Capillaries: Structure and Function

Composition of Blood: Plasma, Red Cells, White Cells, and Platelets

Pulmonary Gas Exchange and Alveolar Adaptations

Mechanics of Ventilation and Pulmonary Measurements

Planning an Investigation: Heart Rate Response to Exercise

Human Circulatory and Gas Exchange Systems

The Double Circulatory System and Gas Exchange Relationship

The Human Heart: Structure and Function

Cardiovascular Disease and Medical Treatments

The Human Circulatory System and Blood

实验准备与活体鱼尾保护：湿棉絮包裹与人道实验规范

低倍镜下调焦与小鱼尾鳍血管网络的定位

血流方向与速度辨析：动脉、静脉与毛细血管的判读

微循环核心特征：毛细血管内红细胞单行通过现象

微血管流向图绘制、实验反思与小鱼安全放归

活体微循环探究：观察小鱼尾鳍内血液流动

Surface Area to Volume Ratio and Metabolic Scaling

Gas Exchange in Single-Celled Organisms

Single Versus Double and Open Versus Closed Circulations

Surface Area, Metabolic Rate, and Exchange Principles

Water: Dipolar Nature and Hydrogen Bonding Network

Thermal Properties of Water: Specific Heat and Latent Heat

Water as a Solvent and Medium for Metabolic Reactions

Cohesion, Adhesion, and Surface Tension in Mass Transport

Hydrogen Ions and pH Regulation in Biological Systems

Iron, Sodium, and Phosphate Ions in Physiology

Calcium and Potassium Ions in Signalling and Homeostasis

Water and Inorganic Ions in Biological Systems

抗凝血液的分层实验与血浆主要成分解析

人血永久涂片的显微镜观察与高倍镜使用技能

红细胞的形态结构特征及其运输氧气的功能

白细胞与血小板的形态识别及其免疫止血功能

血常规化验单解读：贫血、炎症与凝血异常的科学分析

血液成分分析与血涂片显微观察

Gas Exchange in Insects: Spiracles, Tracheae, and Tracheoles

Limiting Water Loss in Terrestrial Insects

Gas Exchange in Fish: Gill Filaments and Secondary Lamellae

The Countercurrent Exchange Mechanism in Bony Fish

Gas Exchange in Dicotyledonous Leaves: Mesophyll and Stomata

Stomatal Opening and Closing Mechanism in Guard Cells

Xerophytic Adaptations in Plants to Conserve Water

Comparative Gas Exchange in Insects, Fish, and Plants

Defining Health and Disease Interactions

Pathogens and Transmission of Communicable Diseases

Non-Specific and Immune Defences Against Pathogens

Vaccination, Herd Immunity, and Antibiotic Treatments

Antibiotic Resistance and Preventing Superbugs

Developing New Drugs and Clinical Trial Testing

Non-Communicable Diseases, Lifestyle Risk Factors, and Cancer

Health, Disease, and the Development of Medicines

Human Respiratory System: Gross and Microscopic Anatomy

Mechanism of Ventilation: Inspiration and Expiration

The Alveoli: Specialised Adaptations for Human Gas Exchange

Spirometry: Pulmonary Ventilation Rate and Tidal Volumes

Pathology of Lung Diseases: Emphysema, Asthma, and Fibrosis

Dissection of a Mammalian Lung and Gas Exchange Structures

Human Gas Exchange and Respiratory Physiology

Digestión comparada: cavidad gastrovascular vs. tubo digestivo completo

Sistemas digestivos en vertebrados: rumiantes, aves y carnívoros

Circulación comparada: sistemas abiertos vs. sistemas cerrados

Evolución cardíaca en vertebrados: de dos a cuatro cavidades

Respiración comparada: piel, tráqueas, branquias y pulmones

Eficiencia respiratoria en aves: sacos aéreos y parabronquios

Excreción en invertebrados: protonefridios, nefridios y túbulos de Malpighi

El riñón vertebrado y tipos de desechos nitrogenados

Sistemas de intercambio y transporte en animales: digestión, circulación, respiración y excreción

OGS.10.OP.2

Aligned learning resources

Related diagrams