<!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: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 8px 10px;
      user-select: none;
      overflow-x: hidden;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 6px;
      width: 100%;
      max-width: 540px;
    }

    .tab-btn {
      flex: 1;
      padding: 7px 10px;
      border: 1.5px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

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

    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
    }

    .svg-container {
      width: 100%;
      max-width: 580px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .formula-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 6px;
      padding: 6px 12px;
      background: #f1f5f9;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      width: 100%;
      max-width: 540px;
      text-align: center;
    }

    .f-highlight {
      color: #dc2626;
      font-weight: 700;
    }

    .f-blue {
      color: #2563eb;
      font-weight: 700;
    }

    .f-green {
      color: #047857;
      font-weight: 700;
    }

    @media (max-width: 420px) {
      .tab-btn {
        font-size: 11.5px;
        padding: 6px 4px;
      }
      .formula-bar {
        font-size: 12px;
        gap: 8px;
        padding: 5px 8px;
      }
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="tab-btn active" id="btnPrism" onclick="showView('prism')">1. 3D Right vs Oblique</button>
    <button class="tab-btn" id="btnUnroll" onclick="showView('unroll')">2. Lateral Area: L = P_rk · l</button>
  </div>

  <div class="svg-container">
    
    <svg id="viewPrism" viewBox="0 0 580 270">
      <defs>
        
        <linearGradient id="rightFace" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.25" />
          <stop offset="1%" stop-color="#2563eb" stop-opacity="0.45" />
        </linearGradient>
        <linearGradient id="obliqueFace" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#60a5fa" stop-opacity="0.3" />
          <stop offset="1%" stop-color="#1d4ed8" stop-opacity="0.5" />
        </linearGradient>
        <linearGradient id="sectionFill" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#ef4444" stop-opacity="0.5" />
          <stop offset="1%" stop-color="#dc2626" stop-opacity="0.8" />
        </linearGradient>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#475569" />
        </marker>
        <marker id="arrowGreen" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#047857" />
        </marker>
        <marker id="arrowRed" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#dc2626" />
        </marker>
      </defs>

      
      <g transform="translate(0, 0)">
        <text x="110" y="20" text-anchor="middle" font-size="13.5" font-weight="700" fill="#1e2945">Right Prism</text>
        <text x="110" y="36" text-anchor="middle" font-size="11.5" font-weight="600" fill="#64748b">Lateral Edges ⊥ Bases (h = l)</text>

        
        <polygon points="70,55 125,55 155,85 100,85" fill="#93c5fd" fill-opacity="0.6" stroke="#1d4ed8" stroke-width="1.6" />
        <text x="112" y="73" font-size="12" font-weight="700" fill="#1e40af">B</text>

        
        <line x1="70" y1="55" x2="70" y2="200" stroke="#94a3b8" stroke-width="1.3" stroke-dasharray="3 3" />
        <polygon points="70,200 125,200 155,230 100,230" fill="#bfdbfe" fill-opacity="0.3" stroke="#94a3b8" stroke-width="1.3" stroke-dasharray="3 3" />

        
        <polygon points="100,85 155,85 155,230 100,230" fill="url(#rightFace)" stroke="#1d4ed8" stroke-width="1.6" />
        <polygon points="100,85 70,55 70,200 100,230" fill="#60a5fa" fill-opacity="0.2" stroke="#1d4ed8" stroke-width="1.6" />
        <polygon points="70,200 125,200 155,230 100,230" fill="#93c5fd" fill-opacity="0.7" stroke="#1d4ed8" stroke-width="1.6" />

        
        <polyline points="100,217 111,217 111,230" fill="none" stroke="#1e2945" stroke-width="1.3" />

        
        <line x1="168" y1="85" x2="168" y2="230" stroke="#475569" stroke-width="1.4" marker-start="url(#arrow)" marker-end="url(#arrow)" />
        <text x="177" y="162" font-size="13" font-weight="700" fill="#1e2945">h = l</text>

        <text x="112" y="248" text-anchor="middle" font-size="12" font-weight="700" fill="#1e40af">Base Area B</text>
      </g>

      
      <line x1="228" y1="20" x2="228" y2="255" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="4 4" />

      
      <g transform="translate(240, 0)">
        <text x="165" y="20" text-anchor="middle" font-size="13.5" font-weight="700" fill="#1e2945">Oblique Prism</text>
        <text x="165" y="36" text-anchor="middle" font-size="11.5" font-weight="600" fill="#64748b">Slanted by edge l (Altitude h &lt; l)</text>

        
        <polygon points="105,55 160,55 190,85 135,85" fill="#93c5fd" fill-opacity="0.6" stroke="#1d4ed8" stroke-width="1.6" />
        <text x="147" y="73" font-size="12" font-weight="700" fill="#1e40af">B</text>

        
        <line x1="105" y1="55" x2="50" y2="200" stroke="#94a3b8" stroke-width="1.3" stroke-dasharray="3 3" />
        <polygon points="50,200 105,200 135,230 80,230" fill="#bfdbfe" fill-opacity="0.3" stroke="#94a3b8" stroke-width="1.3" stroke-dasharray="3 3" />

        
        <polygon points="135,85 190,85 135,230 80,230" fill="url(#obliqueFace)" stroke="#1d4ed8" stroke-width="1.6" />
        <polygon points="135,85 105,55 50,200 80,230" fill="#60a5fa" fill-opacity="0.2" stroke="#1d4ed8" stroke-width="1.6" />
        <polygon points="50,200 105,200 135,230 80,230" fill="#93c5fd" fill-opacity="0.7" stroke="#1d4ed8" stroke-width="1.6" />

        
        <g id="rightSection">
          
          <polygon points="40,132 186,188 208,158 62,102" fill="#fee2e2" fill-opacity="0.45" stroke="#fca5a5" stroke-width="1" stroke-dasharray="3 2" />

          
          <polygon points="82,118 132,137 159,157 109,138" fill="url(#sectionFill)" stroke="#dc2626" stroke-width="2.2" />

          
          <path d="M 152,143 L 143,140 L 148,127" fill="none" stroke="#dc2626" stroke-width="1.4" />

          
          <polyline points="145,138 185,114 202,114" fill="none" stroke="#dc2626" stroke-width="1.2" />
          <circle cx="145" cy="138" r="2.5" fill="#dc2626" />

          
          <text x="206" y="110" font-size="12" font-weight="700" fill="#dc2626">Right Section</text>
          <text x="206" y="124" font-size="11" font-weight="600" fill="#b91c1c">Perimeter P_rk (⊥ l)</text>
        </g>

        
        <line x1="190" y1="85" x2="135" y2="230" stroke="#1e2945" stroke-width="2" />
        <text x="175" y="180" font-size="14" font-weight="700" fill="#1e2945">l</text>

        
        
        <line x1="160" y1="55" x2="305" y2="55" stroke="#047857" stroke-width="1" stroke-dasharray="2 2" />
        <line x1="135" y1="230" x2="305" y2="230" stroke="#047857" stroke-width="1" stroke-dasharray="2 2" />
        <line x1="300" y1="55" x2="300" y2="230" stroke="#047857" stroke-width="1.4" marker-start="url(#arrowGreen)" marker-end="url(#arrowGreen)" />
        
        <polyline points="300,218 288,218 288,230" fill="none" stroke="#047857" stroke-width="1.1" />
        <text x="312" y="148" font-size="13" font-weight="700" fill="#047857">h</text>

        <text x="92" y="248" text-anchor="middle" font-size="12" font-weight="700" fill="#1e40af">Base Area B</text>
      </g>
    </svg>

    
    <svg id="viewUnroll" viewBox="0 0 580 270" style="display: none;">
      
      <text x="290" y="20" text-anchor="middle" font-size="13.5" font-weight="700" fill="#1e2945">Lateral Faces Flattened Along Slant Edge (l)</text>
      <text x="290" y="36" text-anchor="middle" font-size="11.5" font-weight="600" fill="#64748b">Each face is a parallelogram with height = right section perimeter component</text>

      
      <g transform="translate(52, 48)">
        
        <polygon points="45,15 155,15 110,145 0,145" fill="#93c5fd" fill-opacity="0.4" stroke="#2563eb" stroke-width="1.6" />
        <text x="78" y="85" text-anchor="middle" font-size="12" font-weight="600" fill="#1e40af">Face 1</text>

        
        <polygon points="155,15 245,15 200,145 110,145" fill="#60a5fa" fill-opacity="0.45" stroke="#2563eb" stroke-width="1.6" />
        <text x="178" y="85" text-anchor="middle" font-size="12" font-weight="600" fill="#1e40af">Face 2</text>

        
        <polygon points="245,15 355,15 310,145 200,145" fill="#93c5fd" fill-opacity="0.4" stroke="#2563eb" stroke-width="1.6" />
        <text x="278" y="85" text-anchor="middle" font-size="12" font-weight="600" fill="#1e40af">Face 3</text>

        
        <polygon points="355,15 445,15 400,145 310,145" fill="#60a5fa" fill-opacity="0.45" stroke="#2563eb" stroke-width="1.6" />
        <text x="378" y="85" text-anchor="middle" font-size="12" font-weight="600" fill="#1e40af">Face 4</text>

        
        <line x1="20" y1="88" x2="422" y2="88" stroke="#dc2626" stroke-width="2.6" stroke-dasharray="5 3" />

        
        <polyline points="63,88 63,78 59,67" fill="none" stroke="#dc2626" stroke-width="1.3" />

        
        <line x1="-10" y1="145" x2="35" y2="15" stroke="#1e2945" stroke-width="1.4" marker-start="url(#arrow)" marker-end="url(#arrow)" />
        <text x="2" y="75" font-size="13" font-weight="700" fill="#1e2945">l</text>

        
        <line x1="20" y1="162" x2="422" y2="162" stroke="#dc2626" stroke-width="1.6" marker-start="url(#arrowRed)" marker-end="url(#arrowRed)" />
        <text x="221" y="180" text-anchor="middle" font-size="12.5" font-weight="700" fill="#dc2626">Right Section Perimeter (P_rk = e₁ + e₂ + e₃ + e₄)</text>

        
        <g transform="translate(111, 192)">
          <rect x="0" y="0" width="220" height="24" rx="5" fill="#fef2f2" stroke="#fecaca" stroke-width="1.2" />
          <text x="110" y="16" text-anchor="middle" font-size="12.5" font-weight="700" fill="#b91c1c">Lateral Area L = P_rk · l</text>
        </g>
      </g>
    </svg>
  </div>

  
  <div class="formula-bar">
    <span>Right: <span class="f-blue">L = P · h</span> (h = l)</span>
    <span>•</span>
    <span>Oblique: <span class="f-highlight">L = P_rk · l</span></span>
    <span>•</span>
    <span>Volume: <span class="f-green">V = B · h</span></span>
  </div>

  <script>
    function showView(view) {
      const vPrism = document.getElementById('viewPrism');
      const vUnroll = document.getElementById('viewUnroll');
      const btnPrism = document.getElementById('btnPrism');
      const btnUnroll = document.getElementById('btnUnroll');

      if (view === 'prism') {
        vPrism.style.display = 'block';
        vUnroll.style.display = 'none';
        btnPrism.classList.add('active');
        btnUnroll.classList.remove('active');
      } else {
        vPrism.style.display = 'none';
        vUnroll.style.display = 'block';
        btnUnroll.classList.add('active');
        btnPrism.classList.remove('active');
      }
    }
  </script>
</body>
</html>

Lateral and Total Surface Area of Prisms and Cylinders

<!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>Unrolling Solids into Nets</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: #1e293b;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
    }

    .header {
      text-align: center;
    }
    .header h1 {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }

    .panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

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

    .panel-title {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      margin-bottom: 2px;
    }

    .svg-wrap {
      width: 100%;
      max-width: 260px;
      height: auto;
      aspect-ratio: 4 / 3;
    }

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

    /* Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px 12px;
      padding: 4px 0;
    }

    .slider-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 180px;
      max-width: 320px;
    }

    .slider-group span {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    input[type="range"] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
      height: 6px;
    }

    .btn-group {
      display: flex;
      gap: 6px;
    }

    button {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    button:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    button.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
    }

    /* Summary strip */
    .summary-strip {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      background: #f1f5f9;
      border-radius: 6px;
      padding: 6px 12px;
      text-align: center;
    }

    .formula-item {
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    .formula-item span.highlight-lat {
      color: #0284c7;
      font-weight: 700;
    }
    .formula-item span.highlight-base {
      color: #d97706;
      font-weight: 700;
    }

    @media (max-width: 480px) {
      .panels {
        grid-template-columns: 1fr;
      }
      .summary-strip {
        grid-template-columns: 1fr;
        gap: 4px;
      }
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>Unrolling 3D Solids into 2D Nets</h1>
  </div>

  <div class="panels">
    
    <div class="panel">
      <div class="panel-title">Right Cylinder</div>
      <div class="svg-wrap">
        <svg id="cylSvg" viewBox="0 0 260 195">
          
        </svg>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-title">Triangular Prism</div>
      <div class="svg-wrap">
        <svg id="prismSvg" viewBox="0 0 260 195">
          
        </svg>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <div class="slider-group">
      <span>3D Solid</span>
      <input type="range" id="unrollSlider" min="0" max="1" step="0.005" value="0">
      <span>Flat Net</span>
    </div>
    <div class="btn-group">
      <button id="btn3D" class="active">3D Solid</button>
      <button id="btnFlat">Flat Net</button>
      <button id="btnPlay">▶ Auto</button>
    </div>
  </div>

  
  <div class="summary-strip">
    <div class="formula-item">
      Lateral Area: <span class="highlight-lat">L = Perimeter × h</span>
    </div>
    <div class="formula-item">
      Total Area: <span class="highlight-lat">L</span> + <span class="highlight-base">2 × Base</span>
    </div>
  </div>

  <script>
    const cylSvg = document.getElementById('cylSvg');
    const prismSvg = document.getElementById('prismSvg');
    const slider = document.getElementById('unrollSlider');
    const btn3D = document.getElementById('btn3D');
    const btnFlat = document.getElementById('btnFlat');
    const btnPlay = document.getElementById('btnPlay');

    let t = 0;
    let isPlaying = false;
    let playDirection = 1;
    let animFrame = null;
    let lastTime = 0;

    function render(val) {
      t = Math.max(0, Math.min(1, val));
      renderCylinder(t);
      renderPrism(t);

      // Update button active states
      if (t === 0) {
        btn3D.classList.add('active');
        btnFlat.classList.remove('active');
      } else if (t === 1) {
        btnFlat.classList.add('active');
        btn3D.classList.remove('active');
      } else {
        btn3D.classList.remove('active');
        btnFlat.classList.remove('active');
      }
    }

    function renderCylinder(t) {
      // Dimensions
      const cx = 130;
      const h = 76;
      const yTop = 60;
      const yBot = yTop + h; // 136

      // Interpolations
      // Width: from 2*rx_3d (56) to 2*PI*r_net (136)
      const w = 56 + (136 - 56) * t;
      const xLeft = cx - w / 2;
      const xRight = cx + w / 2;

      // Base Circles / Ellipses
      const rx = 28 - (28 - 21.6) * t;
      const ry = 9 + (21.6 - 9) * t;

      // Base positions fold outward
      const topBaseCy = yTop - (ry * t * 0.98);
      const botBaseCy = yBot + (ry * t * 0.98);

      // Curvature of lateral top/bottom edges (sagitta)
      const sag = 9 * (1 - t);

      // Lateral path
      const latPath = `M ${xLeft} ${yTop} Q ${cx} ${yTop + sag} ${xRight} ${yTop} L ${xRight} ${yBot} Q ${cx} ${yBot + sag} ${xLeft} ${yBot} Z`;
      
      // Bottom dashed back arc for 3D state
      const backArc = (1 - t > 0.05) 
        ? `<path d="M ${xLeft} ${yBot} Q ${cx} ${yBot - sag} ${xRight} ${yBot}" fill="none" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3,3" opacity="${1-t}"/>` 
        : '';

      // Top label (Circumference / Width)
      const widthLabelText = t > 0.6 ? "Circumference = 2πr" : (t > 0.2 ? "2πr" : "2r");
      const baseLabelOpacity = Math.min(1, t * 1.5);

      cylSvg.innerHTML = `
        <defs>
          <marker id="arrow" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 0 1.5 L 4.5 3 L 0 4.5 z" fill="#64748b"/>
          </marker>
        </defs>

        
        <path d="${latPath}" fill="#e0f2fe" stroke="#0284c7" stroke-width="2"/>
        ${backArc}

        
        <ellipse cx="${cx}" cy="${botBaseCy}" rx="${rx}" ry="${ry}" fill="#fef3c7" stroke="#d97706" stroke-width="2"/>

        
        <ellipse cx="${cx}" cy="${topBaseCy}" rx="${rx}" ry="${ry}" fill="#fef3c7" stroke="#d97706" stroke-width="2"/>

        
        <line x1="${cx}" y1="${topBaseCy}" x2="${cx + rx}" y2="${topBaseCy}" stroke="#d97706" stroke-width="1.5" stroke-dasharray="2,2"/>
        <circle cx="${cx}" cy="${topBaseCy}" r="2" fill="#d97706"/>
        <text x="${cx + rx/2}" y="${topBaseCy - 4}" font-size="10" font-weight="700" fill="#b45309" text-anchor="middle">r</text>

        
        <text x="${cx}" y="${botBaseCy + 4}" font-size="10" font-weight="700" fill="#b45309" text-anchor="middle" opacity="${baseLabelOpacity}">Base (B)</text>

        
        <line x1="${xLeft - 10}" y1="${yTop}" x2="${xLeft - 10}" y2="${yBot}" stroke="#64748b" stroke-width="1.2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
        <line x1="${xLeft - 14}" y1="${yTop}" x2="${xLeft - 6}" y2="${yTop}" stroke="#94a3b8" stroke-width="1"/>
        <line x1="${xLeft - 14}" y1="${yBot}" x2="${xLeft - 6}" y2="${yBot}" stroke="#94a3b8" stroke-width="1"/>
        <text x="${xLeft - 16}" y="${(yTop + yBot)/2 + 4}" font-size="11" font-weight="700" fill="#475569" text-anchor="end">h</text>

        
        <line x1="${xLeft}" y1="20" x2="${xRight}" y2="20" stroke="#64748b" stroke-width="1.2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
        <line x1="${xLeft}" y1="16" x2="${xLeft}" y2="24" stroke="#94a3b8" stroke-width="1"/>
        <line x1="${xRight}" y1="16" x2="${xRight}" y2="24" stroke="#94a3b8" stroke-width="1"/>
        <text x="${cx}" y="14" font-size="10" font-weight="700" fill="#475569" text-anchor="middle">${widthLabelText}</text>
      `;
    }

    function renderPrism(t) {
      const cx = 130;
      const h = 76;
      const yTop = 60;
      const yBot = yTop + h; // 136

      // Interpolate 3 vertical faces
      // Flat net coordinates:
      // Face 1 (left, a=38): [x1, x2] = [cx - 65, cx - 27] = [65, 103]
      // Face 2 (center, b=54): [x2, x3] = [103, 157]
      // Face 3 (right, c=38): [x3, x4] = [157, 195]

      // 3D Isometric Coordinates at t=0:
      // Left edge: x=100, yTop=54, yBot=130
      // Center front edge: x=130, yTop=68, yBot=144
      // Right edge: x=160, yTop=56, yBot=132

      const f1_tl = { x: 100 + (65 - 100) * t, y: 54 + (yTop - 54) * t };
      const f1_bl = { x: 100 + (65 - 100) * t, y: 130 + (yBot - 130) * t };

      const f_mid_t = { x: 130 + (103 - 130) * t, y: 68 + (yTop - 68) * t };
      const f_mid_b = { x: 130 + (103 - 130) * t, y: 144 + (yBot - 144) * t };

      const f2_tr = { x: 160 + (157 - 160) * t, y: 56 + (yTop - 56) * t };
      const f2_br = { x: 160 + (157 - 160) * t, y: 132 + (yBot - 132) * t };

      const f3_tr = { x: 160 + (195 - 160) * t, y: 56 + (yTop - 56) * t };
      const f3_br = { x: 160 + (195 - 160) * t, y: 132 + (yBot - 132) * t };

      // Top Base Triangle
      // 3D: (100,54) -> (130,68) -> (160,56)
      // Net: attached to center face top [f_mid_t, f2_tr] with apex at (130, 24)
      const topApex = { x: 130, y: 54 + (24 - 54) * t };
      const botApex = { x: 130, y: 138 + (172 - 138) * t };

      const topBasePts = `${f1_tl.x},${f1_tl.y} ${f_mid_t.x},${f_mid_t.y} ${f2_tr.x},${f2_tr.y}`;
      const netTopBasePts = `${f_mid_t.x},${f_mid_t.y} ${topApex.x},${topApex.y} ${f2_tr.x},${f2_tr.y}`;
      const topPts = t < 0.5 ? topBasePts : netTopBasePts;

      const botBasePts = `${f1_bl.x},${f1_bl.y} ${f_mid_b.x},${f_mid_b.y} ${f2_br.x},${f2_br.y}`;
      const netBotBasePts = `${f_mid_b.x},${f_mid_b.y} ${botApex.x},${botApex.y} ${f2_br.x},${f2_br.y}`;
      const botPts = t < 0.5 ? botBasePts : netBotBasePts;

      const leftX = f1_tl.x;
      const rightX = f3_tr.x;

      const widthLabelText = t > 0.6 ? "Perimeter P = a + b + c" : (t > 0.2 ? "P = a+b+c" : "a + b");
      const baseLabelOpacity = Math.min(1, t * 1.5);

      prismSvg.innerHTML = `
        <defs>
          <marker id="arrow2" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 0 1.5 L 4.5 3 L 0 4.5 z" fill="#64748b"/>
          </marker>
        </defs>

        
        <polygon points="${botPts}" fill="#fef3c7" stroke="#d97706" stroke-width="2"/>

        
        <polygon points="${f1_tl.x},${f1_tl.y} ${f_mid_t.x},${f_mid_t.y} ${f_mid_b.x},${f_mid_b.y} ${f1_bl.x},${f1_bl.y}" fill="#e0f2fe" stroke="#0284c7" stroke-width="2"/>

        
        <polygon points="${f_mid_t.x},${f_mid_t.y} ${f2_tr.x},${f2_tr.y} ${f2_br.x},${f2_br.y} ${f_mid_b.x},${f_mid_b.y}" fill="#bae6fd" stroke="#0284c7" stroke-width="2"/>

        
        <polygon points="${f2_tr.x},${f2_tr.y} ${f3_tr.x},${f3_tr.y} ${f3_br.x},${f3_br.y} ${f2_br.x},${f2_br.y}" fill="#e0f2fe" stroke="#0284c7" stroke-width="2" opacity="${0.2 + 0.8 * t}"/>

        
        <polygon points="${topPts}" fill="#fef3c7" stroke="#d97706" stroke-width="2"/>

        
        <line x1="${f_mid_t.x}" y1="${f_mid_t.y}" x2="${f_mid_b.x}" y2="${f_mid_b.y}" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3,3" opacity="${t}"/>
        <line x1="${f2_tr.x}" y1="${f2_tr.y}" x2="${f2_br.x}" y2="${f2_br.y}" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3,3" opacity="${t}"/>

        
        <text x="130" y="${topApex.y + 14}" font-size="10" font-weight="700" fill="#b45309" text-anchor="middle" opacity="${baseLabelOpacity}">Base (B)</text>

        
        <line x1="${leftX - 10}" y1="${yTop}" x2="${leftX - 10}" y2="${yBot}" stroke="#64748b" stroke-width="1.2" marker-start="url(#arrow2)" marker-end="url(#arrow2)"/>
        <line x1="${leftX - 14}" y1="${yTop}" x2="${leftX - 6}" y2="${yTop}" stroke="#94a3b8" stroke-width="1"/>
        <line x1="${leftX - 14}" y1="${yBot}" x2="${leftX - 6}" y2="${yBot}" stroke="#94a3b8" stroke-width="1"/>
        <text x="${leftX - 16}" y="${(yTop + yBot)/2 + 4}" font-size="11" font-weight="700" fill="#475569" text-anchor="end">h</text>

        
        <line x1="${leftX}" y1="12" x2="${rightX}" y2="12" stroke="#64748b" stroke-width="1.2" marker-start="url(#arrow2)" marker-end="url(#arrow2)"/>
        <line x1="${leftX}" y1="8" x2="${leftX}" y2="16" stroke="#94a3b8" stroke-width="1"/>
        <line x1="${rightX}" y1="8" x2="${rightX}" y2="16" stroke="#94a3b8" stroke-width="1"/>
        <text x="130" y="8" font-size="10" font-weight="700" fill="#475569" text-anchor="middle">${widthLabelText}</text>
      `;
    }

    // Animation Loop
    function animate(now) {
      if (!isPlaying) return;
      if (!lastTime) lastTime = now;
      const dt = (now - lastTime) / 1000;
      lastTime = now;

      t += playDirection * (dt / 2.2); // ~2.2s per unfold/fold

      if (t >= 1) {
        t = 1;
        playDirection = -1;
      } else if (t <= 0) {
        t = 0;
        playDirection = 1;
      }

      slider.value = t;
      render(t);
      animFrame = requestAnimationFrame(animate);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        btnPlay.textContent = '⏸ Pause';
        btnPlay.classList.add('active');
        lastTime = performance.now();
        animFrame = requestAnimationFrame(animate);
      } else {
        btnPlay.textContent = '▶ Auto';
        btnPlay.classList.remove('active');
        if (animFrame) cancelAnimationFrame(animFrame);
      }
    }

    function snapTo(val) {
      if (isPlaying) togglePlay();
      slider.value = val;
      render(val);
    }

    // Event Listeners
    slider.addEventListener('input', (e) => {
      if (isPlaying) togglePlay();
      render(parseFloat(e.target.value));
    });

    btn3D.addEventListener('click', () => snapTo(0));
    btnFlat.addEventListener('click', () => snapTo(1));
    btnPlay.addEventListener('click', togglePlay);

    // Initial render
    render(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="1:1">
  <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: #1e2945;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
    }

    /* Controls */
    .controls {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .filter-btn {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }
    .filter-btn:hover {
      background: #e2e8f0;
    }
    .filter-btn.active-all {
      background: #0f172a;
      border-color: #0f172a;
      color: #ffffff;
    }
    .filter-btn.active-base {
      background: #fef3c7;
      border-color: #d97706;
      color: #92400e;
      box-shadow: 0 0 8px rgba(217, 119, 6, 0.35);
    }
    .filter-btn.active-lat {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
      box-shadow: 0 0 8px rgba(2, 132, 199, 0.35);
    }

    /* Cards Layout */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    @media (min-width: 500px) {
      .cards-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .solid-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: border-color 0.25s ease;
    }
    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .card-title span.tag {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 6px;
      background: #e2e8f0;
      color: #475569;
    }

    /* SVG Diagram Area */
    .svg-wrap {
      width: 100%;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Formula Breakdown */
    .formula-box {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .formula-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      border: 1.5px solid transparent;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .formula-row.base-row {
      background: #fffbeb;
      color: #92400e;
    }
    .formula-row.lat-row {
      background: #f0f9ff;
      color: #0369a1;
    }
    .formula-row.total-row {
      background: #f8fafc;
      color: #1e2945;
      border-color: #cbd5e1;
    }

    /* Highlights */
    .glow-base {
      border-color: #d97706 !important;
      box-shadow: 0 0 8px rgba(217, 119, 6, 0.4);
    }
    .glow-lat {
      border-color: #0284c7 !important;
      box-shadow: 0 0 8px rgba(2, 132, 199, 0.4);
    }
    .glow-total {
      border-color: #6366f1 !important;
      box-shadow: 0 0 8px rgba(99, 102, 241, 0.35);
    }

    /* SVG Part Highlighting */
    .shape-base {
      fill: #fef3c7;
      stroke: #d97706;
      stroke-width: 1.8;
      transition: opacity 0.3s ease, filter 0.3s ease;
    }
    .shape-lat {
      fill: #e0f2fe;
      stroke: #0284c7;
      stroke-width: 1.5;
      transition: opacity 0.3s ease, filter 0.3s ease;
    }
    .shape-dim {
      opacity: 0.25 !important;
    }
    .shape-bright {
      filter: drop-shadow(0 0 3px rgba(0,0,0,0.15));
    }

    .math-sym {
      font-family: "Cambria Math", "Times New Roman", serif;
      font-style: italic;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="filter-btn active-all" id="btnAll" onclick="setMode('all')">✦ Full Solid</button>
    <button class="filter-btn" id="btnBase" onclick="setMode('base')">2 × Base Area (2B)</button>
    <button class="filter-btn" id="btnLat" onclick="setMode('lat')">Lateral Area (L)</button>
  </div>

  <div class="cards-grid">
    
    <div class="solid-card" id="prismCard">
      <div class="card-title">
        <span>Hexagonal Prism</span>
        <span class="tag">6 Sides</span>
      </div>

      <div class="svg-wrap">
        <svg viewBox="0 0 240 130">
          <defs>
            <marker id="arr" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto">
              <path d="M 0 1.5 L 4.5 3 L 0 4.5 z" fill="#64748b" />
            </marker>
          </defs>

          
          <polygon id="prismLat1" class="shape-lat" points="40,35 75,25 75,85 40,95" />
          <polygon id="prismLat2" class="shape-lat" points="75,25 125,25 125,85 75,85" />
          <polygon id="prismLat3" class="shape-lat" points="125,25 160,35 160,95 125,85" />

          
          <polygon id="prismBaseBot" class="shape-base" points="40,95 75,85 125,85 160,95 125,105 75,105" />

          
          <polygon id="prismBaseTop" class="shape-base" points="40,35 75,25 125,25 160,35 125,45 75,45" />

          
          <text x="100" y="38" font-size="11" font-weight="bold" fill="#b45309" text-anchor="middle" class="math-sym">B</text>
          <text x="100" y="98" font-size="11" font-weight="bold" fill="#b45309" text-anchor="middle" class="math-sym">B</text>

          
          <line x1="178" y1="35" x2="178" y2="95" stroke="#64748b" stroke-width="1.2" marker-start="url(#arr)" marker-end="url(#arr)" />
          <text x="190" y="69" font-size="12" font-weight="bold" fill="#475569" class="math-sym">h</text>

          
          <line x1="75" y1="113" x2="125" y2="113" stroke="#64748b" stroke-width="1" />
          <text x="100" y="125" font-size="11" font-weight="bold" fill="#475569" text-anchor="middle" class="math-sym">s</text>
        </svg>
      </div>

      <div class="formula-box">
        <div class="formula-row base-row" id="prismBaseRow">
          <span>Base Perimeter (<span class="math-sym">P</span>)</span>
          <span>6<span class="math-sym">s</span></span>
        </div>
        <div class="formula-row lat-row" id="prismLatRow">
          <span>Lateral Area (<span class="math-sym">L</span>)</span>
          <span><span class="math-sym">P</span> · <span class="math-sym">h</span></span>
        </div>
        <div class="formula-row total-row" id="prismTotRow">
          <span>Total Surface (<span class="math-sym">T</span>)</span>
          <span><span class="math-sym">P</span>·<span class="math-sym">h</span> + 2<span class="math-sym">B</span></span>
        </div>
      </div>
    </div>

    
    <div class="solid-card" id="cylCard">
      <div class="card-title">
        <span>Right Cylinder</span>
        <span class="tag">Circular</span>
      </div>

      <div class="svg-wrap">
        <svg viewBox="0 0 240 130">
          
          <path id="cylLat" class="shape-lat" d="M 50,35 L 50,95 A 55 16 0 0 0 160,95 L 160,35 Z" />

          
          <ellipse id="cylBaseBot" class="shape-base" cx="105" cy="95" rx="55" ry="16" />

          
          <ellipse id="cylBaseTop" class="shape-base" cx="105" cy="35" rx="55" ry="16" />

          
          <line x1="105" y1="35" x2="160" y2="35" stroke="#d97706" stroke-width="1.5" stroke-dasharray="2 2" />
          <circle cx="105" cy="35" r="2" fill="#d97706" />
          <text x="132" y="30" font-size="11" font-weight="bold" fill="#b45309" text-anchor="middle" class="math-sym">r</text>
          <text x="80" y="39" font-size="11" font-weight="bold" fill="#b45309" class="math-sym">B</text>

          
          <line x1="178" y1="35" x2="178" y2="95" stroke="#64748b" stroke-width="1.2" marker-start="url(#arr)" marker-end="url(#arr)" />
          <text x="190" y="69" font-size="12" font-weight="bold" fill="#475569" class="math-sym">h</text>

          
          <text x="105" y="125" font-size="11" font-weight="600" fill="#0369a1" text-anchor="middle">
            <tspan class="math-sym">C</tspan> = 2π<tspan class="math-sym">r</tspan>
          </text>
        </svg>
      </div>

      <div class="formula-box">
        <div class="formula-row base-row" id="cylBaseRow">
          <span>Base Area (<span class="math-sym">B</span>)</span>
          <span>π<span class="math-sym">r</span>²</span>
        </div>
        <div class="formula-row lat-row" id="cylLatRow">
          <span>Lateral Area (<span class="math-sym">L</span>)</span>
          <span>2π<span class="math-sym">r</span> · <span class="math-sym">h</span></span>
        </div>
        <div class="formula-row total-row" id="cylTotRow">
          <span>Total Surface (<span class="math-sym">T</span>)</span>
          <span>2π<span class="math-sym">rh</span> + 2π<span class="math-sym">r</span>²</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const btnAll = document.getElementById('btnAll');
      const btnBase = document.getElementById('btnBase');
      const btnLat = document.getElementById('btnLat');

      const pBaseRow = document.getElementById('prismBaseRow');
      const pLatRow = document.getElementById('prismLatRow');
      const pTotRow = document.getElementById('prismTotRow');

      const cBaseRow = document.getElementById('cylBaseRow');
      const cLatRow = document.getElementById('cylLatRow');
      const cTotRow = document.getElementById('cylTotRow');

      const baseShapes = document.querySelectorAll('.shape-base');
      const latShapes = document.querySelectorAll('.shape-lat');

      // Reset button active classes
      btnAll.className = 'filter-btn';
      btnBase.className = 'filter-btn';
      btnLat.className = 'filter-btn';

      // Reset formula glowing
      [pBaseRow, cBaseRow].forEach(r => r.classList.remove('glow-base'));
      [pLatRow, cLatRow].forEach(r => r.classList.remove('glow-lat'));
      [pTotRow, cTotRow].forEach(r => r.classList.remove('glow-total'));

      // Reset SVG classes
      baseShapes.forEach(el => el.classList.remove('shape-dim', 'shape-bright'));
      latShapes.forEach(el => el.classList.remove('shape-dim', 'shape-bright'));

      if (mode === 'all') {
        btnAll.classList.add('active-all');
        [pTotRow, cTotRow].forEach(r => r.classList.add('glow-total'));
      } else if (mode === 'base') {
        btnBase.classList.add('active-base');
        [pBaseRow, cBaseRow].forEach(r => r.classList.add('glow-base'));
        baseShapes.forEach(el => el.classList.add('shape-bright'));
        latShapes.forEach(el => el.classList.add('shape-dim'));
      } else if (mode === 'lat') {
        btnLat.classList.add('active-lat');
        [pLatRow, cLatRow].forEach(r => r.classList.add('glow-lat'));
        latShapes.forEach(el => el.classList.add('shape-bright'));
        baseShapes.forEach(el => el.classList.add('shape-dim'));
      }
    }

    // Default start in 'all' view
    setMode('all');
  </script>
</body>
</html>

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

    /* Comparison header badges */
    .badge-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 580px;
    }
    .badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: 8px;
      text-align: center;
      font-weight: 600;
      font-size: 13px;
    }
    .badge-cyan {
      background: #ecfeff;
      border: 1px solid #a5f3fc;
      color: #0e7490;
    }
    .badge-amber {
      background: #fffbeb;
      border: 1px solid #fde68a;
      color: #b45309;
    }
    .badge-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.85;
      margin-bottom: 2px;
    }
    .badge-value {
      font-size: 14px;
      font-weight: 700;
    }

    /* SVG viewport */
    .stage {
      width: 100%;
      max-width: 600px;
      height: 250px;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
      max-width: 480px;
      padding: 4px 0 2px;
    }
    .slider-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .slider-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
    }
    input[type=range] {
      flex: 1;
      accent-color: #0284c7;
      height: 6px;
      cursor: pointer;
    }
    .btn-group {
      display: flex;
      gap: 6px;
    }
    .btn-tilt {
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .btn-tilt:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }
  </style>
</head>
<body>

  
  <div class="badge-grid">
    <div class="badge badge-cyan">
      <span class="badge-title">Volume (Cavalieri)</span>
      <span class="badge-value">Invariant: V = B · h</span>
    </div>
    <div class="badge badge-amber">
      <span class="badge-title">Lateral Area</span>
      <span class="badge-value" id="lateralBadge">L Increases: l &gt; h</span>
    </div>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 600 250">
      <defs>
        
        <linearGradient id="cardFront" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f8fafc"/>
          <stop offset="100%" stop-color="#e2e8f0"/>
        </linearGradient>
        <linearGradient id="cardSide" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#cbd5e1"/>
          <stop offset="100%" stop-color="#94a3b8"/>
        </linearGradient>
        <linearGradient id="cardTop" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#38bdf8"/>
          <stop offset="100%" stop-color="#0284c7"/>
        </linearGradient>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7"/>
        </marker>
        <marker id="arrowAmber" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#d97706"/>
        </marker>
      </defs>

      
      <line x1="30" y1="50" x2="570" y2="50" stroke="#cbd5e1" stroke-dasharray="3 3" stroke-width="1.2"/>
      <line x1="30" y1="205" x2="570" y2="205" stroke="#cbd5e1" stroke-dasharray="3 3" stroke-width="1.2"/>

      
      <g id="uprightGroup" transform="translate(130, 205)">
        
        <g id="uprightCards"></g>

        
        <text x="0" y="24" text-anchor="middle" font-size="12" font-weight="700" fill="#0284c7">Base Area B</text>
        <text x="0" y="-170" text-anchor="middle" font-size="13" font-weight="700" fill="#1e2945">Right Prism</text>

        
        <g transform="translate(-72, 0)">
          <line x1="0" y1="0" x2="0" y2="-155" stroke="#0284c7" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
          <text x="-8" y="-75" text-anchor="end" font-size="13" font-weight="700" fill="#0284c7">l = h</text>
        </g>
      </g>

      
      <g id="obliqueGroup" transform="translate(390, 205)">
        
        <g id="obliqueCards"></g>

        
        <g id="obliqueDimensions"></g>

        
        <text x="0" y="24" text-anchor="middle" font-size="12" font-weight="700" fill="#0284c7">Base Area B</text>
        <text id="obliqueTitle" x="0" y="-170" text-anchor="middle" font-size="13" font-weight="700" fill="#1e2945">Oblique Prism</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <div class="slider-wrap">
      <span class="slider-label">Shear Tilt:</span>
      <input type="range" id="shearSlider" min="0" max="65" value="45" step="1">
    </div>
    <div class="btn-group">
      <button class="btn-tilt" onclick="setShear(0)">0°</button>
      <button class="btn-tilt" onclick="setShear(45)">45°</button>
    </div>
  </div>

  <script>
    const NUM_CARDS = 24;
    const CARD_W = 86;
    const CARD_D_X = 26;
    const CARD_D_Y = -14;
    const TOTAL_H = 155;
    const CARD_STEP_Y = TOTAL_H / NUM_CARDS;

    // Draw single isometric card
    function createCardPath(cx, cy) {
      const x0 = cx - CARD_W / 2;
      const y0 = cy;
      const x1 = x0 + CARD_W;
      const y1 = cy;
      const x2 = x1 + CARD_D_X;
      const y2 = cy + CARD_D_Y;
      const x3 = x0 + CARD_D_X;
      const y3 = cy + CARD_D_Y;

      return `M ${x0} ${y0} L ${x1} ${y1} L ${x2} ${y2} L ${x3} ${y3} Z`;
    }

    // Render static upright stack
    const uprightCards = document.getElementById('uprightCards');
    let uprightHtml = '';
    for (let i = 0; i < NUM_CARDS; i++) {
      const y = -i * CARD_STEP_Y;
      const isTop = i === NUM_CARDS - 1;
      const fill = isTop ? 'url(#cardTop)' : 'url(#cardFront)';
      const stroke = isTop ? '#0369a1' : '#cbd5e1';
      uprightHtml += `<path d="${createCardPath(0, y)}" fill="${fill}" stroke="${stroke}" stroke-width="0.8"/>`;
      // Side edge line
      uprightHtml += `<line x1="${CARD_W/2}" y1="${y}" x2="${CARD_W/2 + CARD_D_X}" y2="${y + CARD_D_Y}" stroke="#94a3b8" stroke-width="0.8"/>`;
    }
    uprightCards.innerHTML = uprightHtml;

    // Render dynamic sheared stack
    const obliqueCards = document.getElementById('obliqueCards');
    const obliqueDimensions = document.getElementById('obliqueDimensions');
    const shearSlider = document.getElementById('shearSlider');
    const lateralBadge = document.getElementById('lateralBadge');

    function renderOblique(shiftX) {
      let cardsHtml = '';
      for (let i = 0; i < NUM_CARDS; i++) {
        const y = -i * CARD_STEP_Y;
        const currentShift = (i / (NUM_CARDS - 1)) * shiftX;
        const isTop = i === NUM_CARDS - 1;
        const fill = isTop ? 'url(#cardTop)' : 'url(#cardFront)';
        const stroke = isTop ? '#0369a1' : '#cbd5e1';
        cardsHtml += `<path d="${createCardPath(currentShift, y)}" fill="${fill}" stroke="${stroke}" stroke-width="0.8"/>`;
        cardsHtml += `<line x1="${currentShift + CARD_W/2}" y1="${y}" x2="${currentShift + CARD_W/2 + CARD_D_X}" y2="${y + CARD_D_Y}" stroke="#94a3b8" stroke-width="0.8"/>`;
      }
      obliqueCards.innerHTML = cardsHtml;

      // Update lateral edge length comparison
      const edgeLength = Math.sqrt(TOTAL_H * TOTAL_H + shiftX * shiftX);
      const ratio = (edgeLength / TOTAL_H).toFixed(2);
      const edgeLabel = shiftX === 0 ? 'l = h' : `l = ${ratio}h`;

      // Draw altitude h bracket & tilted edge l
      const topShift = shiftX;
      let dimHtml = `
        
        <g transform="translate(-72, 0)">
          <line x1="0" y1="0" x2="0" y2="-${TOTAL_H}" stroke="#0284c7" stroke-width="2" stroke-dasharray="4 3" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
          <text x="-8" y="-${TOTAL_H/2}" text-anchor="end" font-size="13" font-weight="700" fill="#0284c7">h</text>
        </g>
        
        <g transform="translate(${CARD_W/2 + CARD_D_X + 16}, 0)">
          <line x1="0" y1="${CARD_D_Y}" x2="${topShift}" y2="-${TOTAL_H - CARD_D_Y}" stroke="#d97706" stroke-width="2.5" marker-start="url(#arrowAmber)" marker-end="url(#arrowAmber)"/>
          <text x="${topShift/2 + 8}" y="-${TOTAL_H/2 - CARD_D_Y}" text-anchor="start" font-size="13" font-weight="700" fill="#d97706">${edgeLabel}</text>
        </g>
      `;
      obliqueDimensions.innerHTML = dimHtml;

      // Update badge text
      if (shiftX === 0) {
        lateralBadge.textContent = 'L = L_right (l = h)';
      } else {
        const percent = Math.round((ratio - 1) * 100);
        lateralBadge.textContent = `L Increases (+${percent}%) : l > h`;
      }
    }

    function setShear(val) {
      shearSlider.value = val;
      renderOblique(parseFloat(val));
    }

    shearSlider.addEventListener('input', (e) => {
      renderOblique(parseFloat(e.target.value));
    });

    // Initial render
    renderOblique(45);
  </script>
</body>
</html>

Lateral and Total Surface Area of Pyramids and Cones

Surface Area and Volume of Spheres and Hemispheres

Cavalieri's Principle for Prisms and Cylinders

Dissection Arguments for Volume of Pyramids and Cones

Informal Argument: Volume of a Sphere Using Cavalieri's Principle

Surface Area and Volume of Frustums

Surface Area and Volume of Composite Solids with Cavities

math

Solid Geometry, Cavalieri's Principle, and Volume Justifications

体積とは何か — 立体のかさの直接比較と間接比較

1辺1cmの立方体の積み木を単位として体積を表す

体積の単位 cm³ を知る

積み木の並べ方と段ごとのまとまりに着目した数え方

大きな立体の体積と 1m³ の必要性

体積の単位 m³ を知る

1m³＝1000000cm³ の単位関係の導出

体積の単位の関係を調べる

体積の単位の適切な選択と量感づくり

体積の概念と基本単位（cm³・m³）

直方体の体積の求め方 — たて×横×高さの公式導出

立方体の体積の求め方 — 1辺×1辺×1辺の公式導出

直方体と立方体の体積の基本計算演習

小数の辺の長さを含む直方体の体積計算

体積から高さや底面積を逆算する計算

辺の長さが2倍・3倍になったときの体積の変化（比例関係の探究）

OGM.11.MEA.2

Aligned learning resources

Related diagrams