<!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: center;
      min-height: 100vh;
      padding: 10px 12px;
      user-select: none;
    }
    .controls {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 6px;
      width: 100%;
      max-width: 440px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .btn:hover {
      background: #e2e8f0;
      color: #1e2945;
    }
    .btn.active {
      background: #0284c7;
      border-color: #0369a1;
      color: #ffffff;
      box-shadow: 0 2px 5px rgba(2, 132, 199, 0.3);
    }
    .svg-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .formula-bar {
      margin-top: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 7px 12px;
      font-size: clamp(12px, 3.4vw, 13.5px);
      font-weight: 600;
      color: #1e2945;
      text-align: center;
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 440px;
      width: 100%;
    }
    .highlight {
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .accent {
      background: #fef3c7;
      color: #92400e;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #fde68a;
    }
    .label-text {
      font-family: system-ui, sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      fill: #1e2945;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn" id="btn-1" onclick="setMode(1)">1 cm³ (Unit)</button>
    <button class="btn" id="btn-10" onclick="setMode(10)">10 cm³ (Row)</button>
    <button class="btn" id="btn-100" onclick="setMode(100)">100 cm³ (Layer)</button>
    <button class="btn active" id="btn-1000" onclick="setMode(1000)">1,000 cm³ (1 dm³)</button>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 25 460 330">
      <defs>
        
        <linearGradient id="topGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#f0fdf4" />
          <stop offset="1%" stop-color="#dcfce7" />
        </linearGradient>
        <linearGradient id="leftGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#e0f2fe" />
          <stop offset="1%" stop-color="#bae6fd" />
        </linearGradient>
        <linearGradient id="rightGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f8fafc" />
          <stop offset="1%" stop-color="#e2e8f0" />
        </linearGradient>

        
        <linearGradient id="topHighlight" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#fef08a" />
          <stop offset="1%" stop-color="#fde047" />
        </linearGradient>
        <linearGradient id="leftHighlight" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fed7aa" />
          <stop offset="1%" stop-color="#fb923c" />
        </linearGradient>
        <linearGradient id="rightHighlight" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ffedd5" />
          <stop offset="1%" stop-color="#fed7aa" />
        </linearGradient>
      </defs>

      
      <g id="full-cube">
        
        <path d="M 230 40 L 370 120.8 L 230 201.6 L 90 120.8 Z" fill="url(#topGrad)" stroke="#94a3b8" stroke-width="1" />
        
        <path d="M 90 120.8 L 230 201.6 L 230 311.6 L 90 230.8 Z" fill="url(#leftGrad)" stroke="#94a3b8" stroke-width="1" />
        
        <path d="M 230 201.6 L 370 120.8 L 370 230.8 L 230 311.6 Z" fill="url(#rightGrad)" stroke="#94a3b8" stroke-width="1" />

        
        <g id="grid-lines" stroke="#cbd5e1" stroke-width="0.75" opacity="0.9"></g>
      </g>

      
      <g id="highlight-group"></g>

      
      
      <path d="M 385 120.8 L 398 120.8 M 385 230.8 L 398 230.8 M 393 120.8 L 393 230.8" stroke="#1e2945" stroke-width="1.2" />
      <text x="402" y="172" class="label-text">10 cm<tspan x="402" dy="14" fill="#64748b" font-weight="500">(1 dm)</tspan></text>

      
      <path d="M 80 238 L 72 243 M 220 319 L 212 324 M 74 242 L 214 322.8" stroke="#1e2945" stroke-width="1.2" />
      <text x="136" y="296" text-anchor="middle" class="label-text" transform="rotate(30 136 296)">10 cm <tspan fill="#64748b" font-weight="500">(1 dm)</tspan></text>

      
      <path d="M 380 238 L 388 243 M 240 319 L 248 324 M 386 242 L 246 322.8" stroke="#1e2945" stroke-width="1.2" />
      <text x="324" y="296" text-anchor="middle" class="label-text" transform="rotate(-30 324 296)">10 cm <tspan fill="#64748b" font-weight="500">(1 dm)</tspan></text>

      
      <g id="unit-callout">
        <path d="M 230 190 L 195 160 L 140 160" stroke="#f59e0b" stroke-width="1.5" fill="none" stroke-linecap="round" />
        <circle cx="230" cy="190" r="3" fill="#f59e0b" />
        <rect x="75" y="146" width="60" height="24" rx="4" fill="#fef3c7" stroke="#f59e0b" stroke-width="1" />
        <text x="105" y="162" text-anchor="middle" font-size="11px" font-weight="700" fill="#b45309">1 cm³</text>
      </g>
    </svg>
  </div>

  
  <div class="formula-bar">
    <span>10 cm × 10 cm × 10 cm</span>
    <span>=</span>
    <span class="highlight">1,000 cm³</span>
    <span>=</span>
    <span class="highlight">1 dm³</span>
    <span>=</span>
    <span class="accent">1 Litre (1 L)</span>
  </div>

  <script>
    const O_X = 230;
    const O_Y = 40;
    const DX_R = 14;     // X vector (right-down)
    const DY_R = 8.08;
    const DX_L = -14;    // Y vector (left-down)
    const DY_L = 8.08;
    const DZ_V = 11;     // Z vector (vertical down)

    function project(gx, gy, gz) {
      return {
        x: O_X + gx * DX_R + gy * DX_L,
        y: O_Y + gx * DY_R + gy * DY_L + gz * DZ_V
      };
    }

    // Build the subtle background grid lines
    const gridLines = document.getElementById('grid-lines');
    let gridSvg = '';

    // Top face internal grid lines
    for (let i = 1; i < 10; i++) {
      let p1 = project(i, 0, 0);
      let p2 = project(i, 10, 0);
      gridSvg += `<line x1="${p1.x}" y1="${p1.y}" x2="${p2.x}" y2="${p2.y}" />`;

      let q1 = project(0, i, 0);
      let q2 = project(10, i, 0);
      gridSvg += `<line x1="${q1.x}" y1="${q1.y}" x2="${q2.x}" y2="${q2.y}" />`;
    }

    // Left face internal grid lines
    for (let i = 1; i < 10; i++) {
      let p1 = project(0, i, 0);
      let p2 = project(0, i, 10);
      gridSvg += `<line x1="${p1.x}" y1="${p1.y}" x2="${p2.x}" y2="${p2.y}" />`;

      let q1 = project(0, 0, i);
      let q2 = project(0, 10, i);
      gridSvg += `<line x1="${q1.x}" y1="${q1.y}" x2="${q2.x}" y2="${q2.y}" />`;
    }

    // Right face internal grid lines
    for (let i = 1; i < 10; i++) {
      let p1 = project(i, 0, 0);
      let p2 = project(i, 0, 10);
      gridSvg += `<line x1="${p1.x}" y1="${p1.y}" x2="${p2.x}" y2="${p2.y}" />`;

      let q1 = project(0, 0, i);
      let q2 = project(10, 0, i);
      gridSvg += `<line x1="${q1.x}" y1="${q1.y}" x2="${q2.x}" y2="${q2.y}" />`;
    }

    gridLines.innerHTML = gridSvg;

    // Highlight drawing helper: draws a block from (x0, y0, z0) of size (nx, ny, nz)
    function drawBlock(x0, y0, z0, nx, ny, nz) {
      const p0 = project(x0, y0, z0);
      const px = project(x0 + nx, y0, z0);
      const py = project(x0, y0 + ny, z0);
      const pxy = project(x0 + nx, y0 + ny, z0);

      const pz = project(x0, y0, z0 + nz);
      const pxz = project(x0 + nx, y0, z0 + nz);
      const pyz = project(x0, y0 + ny, z0 + nz);
      const pxyz = project(x0 + nx, y0 + ny, z0 + nz);

      return `
        
        <polygon points="${p0.x},${p0.y} ${px.x},${px.y} ${pxy.x},${pxy.y} ${py.x},${py.y}" fill="url(#topHighlight)" stroke="#d97706" stroke-width="1.2" />
        
        <polygon points="${py.x},${py.y} ${pxy.x},${pxy.y} ${pxyz.x},${pxyz.y} ${pyz.x},${pyz.y}" fill="url(#leftHighlight)" stroke="#d97706" stroke-width="1.2" />
        
        <polygon points="${px.x},${px.y} ${pxy.x},${pxy.y} ${pxyz.x},${pxyz.y} ${pxz.x},${pxz.y}" fill="url(#rightHighlight)" stroke="#d97706" stroke-width="1.2" />
      `;
    }

    function setMode(mode) {
      document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
      const activeBtn = document.getElementById('btn-' + mode);
      if (activeBtn) activeBtn.classList.add('active');

      const hlGroup = document.getElementById('highlight-group');
      const callout = document.getElementById('unit-callout');

      if (mode === 1) {
        // 1 cm³ unit cube at front-top corner
        hlGroup.innerHTML = drawBlock(9, 9, 0, 1, 1, 1);
        callout.style.display = 'block';
      } else if (mode === 10) {
        // 1 row of 10 cm³ along the front edge
        hlGroup.innerHTML = drawBlock(0, 9, 0, 10, 1, 1);
        callout.style.display = 'none';
      } else if (mode === 100) {
        // 1 layer of 100 cm³ at top
        hlGroup.innerHTML = drawBlock(0, 0, 0, 10, 10, 1);
        callout.style.display = 'none';
      } else {
        // Full 1,000 cm³ cube (1 dm³)
        hlGroup.innerHTML = drawBlock(0, 0, 0, 10, 10, 10);
        callout.style.display = 'none';
      }
    }

    setMode(1000);
  </script>
</body>
</html>

Defining Solution Concentration and Volume Units

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .stepper-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .step-pill {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #64748b;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.3s ease;
    }

    .step-pill.active {
      background: #e0f2fe;
      border-color: #38bdf8;
      color: #0369a1;
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
    }

    .play-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s ease;
    }

    .play-btn:hover {
      background: #e2e8f0;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 580px;
    }

    @media (max-width: 480px) {
      .main-grid {
        grid-template-columns: 1fr;
      }
    }

    .panel-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 210px;
      position: relative;
    }

    /* SVG Triangle styling */
    .tri-svg {
      width: 100%;
      max-width: 210px;
      height: auto;
      overflow: visible;
    }

    .tri-part {
      transition: all 0.3s ease;
    }

    .tri-text {
      font-size: 12px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      transition: all 0.3s ease;
    }

    .tri-sub {
      font-size: 10px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
    }

    .tri-op {
      font-size: 15px;
      font-weight: 800;
      fill: #94a3b8;
      text-anchor: middle;
    }

    /* Active Triangle Highlights */
    .hl-mass .mass-bg { fill: #fef08a !important; stroke: #eab308 !important; }
    .hl-mass .mass-text { fill: #854d0e !important; }

    .hl-vol .vol-bg { fill: #bae6fd !important; stroke: #0284c7 !important; }
    .hl-vol .vol-text { fill: #0369a1 !important; }

    .hl-conc .conc-bg { fill: #bbf7d0 !important; stroke: #16a34a !important; }
    .hl-conc .conc-text { fill: #15803d !important; }

    /* Step display cards */
    .step-content {
      position: absolute;
      inset: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .step-content.active {
      opacity: 1;
      pointer-events: auto;
    }

    .badge-pill {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #64748b;
    }

    .math-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    .val-chip {
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.2;
    }

    .val-chip.yellow {
      background: #fef9c3;
      border-color: #fde047;
      color: #854d0e;
    }

    .val-chip.blue {
      background: #e0f2fe;
      border-color: #7dd3fc;
      color: #0369a1;
    }

    .val-chip.green {
      background: #dcfce7;
      border-color: #86efac;
      color: #15803d;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 14px;
    }

    .fraction-top {
      border-bottom: 2px solid #1e2945;
      padding: 0 4px 2px;
    }

    .fraction-bot {
      padding: 2px 4px 0;
    }

    .arrow-op {
      color: #0284c7;
      font-weight: 800;
      font-size: 15px;
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button class="step-pill active" data-step="0">
      <span>1</span> Identify
    </button>
    <button class="step-pill" data-step="1">
      <span>2</span> Convert
    </button>
    <button class="step-pill" data-step="2">
      <span>3</span> Calculate
    </button>
    <button class="play-btn" id="playBtn" title="Auto play">⏸</button>
  </div>

  <div class="main-grid">
    
    <div class="panel-box" id="triangleContainer">
      <svg class="tri-svg" viewBox="0 0 200 170">
        
        <polygon class="tri-part mass-bg" points="100,10 50,85 150,85" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1.5" />
        <text class="tri-text mass-text" x="100" y="50">Mass</text>
        <text class="tri-sub" x="100" y="66">(g)</text>

        
        <line x1="30" y1="85" x2="170" y2="85" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" />
        <text class="tri-op" x="100" y="80">÷</text>

        
        <polygon class="tri-part conc-bg" points="50,85 5,160 100,160 100,85" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1.5" />
        <text class="tri-text conc-text" x="52" y="125">Conc.</text>
        <text class="tri-sub" x="52" y="141">(g/dm³)</text>

        
        <line x1="100" y1="85" x2="100" y2="160" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" />
        <text class="tri-op" x="100" y="128">×</text>

        
        <polygon class="tri-part vol-bg" points="150,85 100,85 100,160 195,160" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1.5" />
        <text class="tri-text vol-text" x="148" y="125">Volume</text>
        <text class="tri-sub" x="148" y="141">(dm³)</text>
      </svg>
    </div>

    
    <div class="panel-box">
      
      <div class="step-content active" id="content-0">
        <span class="badge-pill">Step 1</span>
        <div class="math-row">
          <div class="val-chip yellow">
            <strong>Mass</strong>
            <small>grams (g)</small>
          </div>
          <span>&amp;</span>
          <div class="val-chip blue">
            <strong>Volume</strong>
            <small>cm³</small>
          </div>
        </div>
      </div>

      
      <div class="step-content" id="content-1">
        <span class="badge-pill">Step 2: Convert Unit</span>
        <div class="math-row">
          <div class="val-chip">cm³</div>
          <span class="arrow-op">÷ 1000 →</span>
          <div class="val-chip blue">dm³</div>
        </div>
        <small style="color:#64748b; font-size:12px; font-weight:600;">1 dm³ = 1000 cm³</small>
      </div>

      
      <div class="step-content" id="content-2">
        <span class="badge-pill">Step 3: Solve</span>
        <div class="math-row">
          <div class="val-chip green">Conc.</div>
          <span>=</span>
          <div class="fraction">
            <span class="fraction-top" style="color:#854d0e;">Mass (g)</span>
            <span class="fraction-bot" style="color:#0369a1;">Vol (dm³)</span>
          </div>
        </div>
        <small style="color:#15803d; font-size:12px; font-weight:700;">Result in g/dm³</small>
      </div>
    </div>
  </div>

  <script>
    const steps = [
      { classHL: 'hl-mass' },
      { classHL: 'hl-vol' },
      { classHL: 'hl-conc' }
    ];

    let currentStep = 0;
    let playing = true;
    let timer = null;

    const pills = document.querySelectorAll('.step-pill');
    const contents = document.querySelectorAll('.step-content');
    const container = document.getElementById('triangleContainer');
    const playBtn = document.getElementById('playBtn');

    function setStep(idx) {
      currentStep = idx;

      // Update pills
      pills.forEach((p, i) => {
        p.classList.toggle('active', i === idx);
      });

      // Update content
      contents.forEach((c, i) => {
        c.classList.toggle('active', i === idx);
      });

      // Update triangle highlights
      container.classList.remove('hl-mass', 'hl-vol', 'hl-conc');
      container.classList.add(steps[idx].classHL);
    }

    function nextStep() {
      setStep((currentStep + 1) % steps.length);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      playBtn.textContent = '⏸';
      playing = true;
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      playBtn.textContent = '▶';
      playing = false;
    }

    pills.forEach((pill) => {
      pill.addEventListener('click', () => {
        setStep(parseInt(pill.dataset.step, 10));
        stopTimer();
      });
    });

    playBtn.addEventListener('click', () => {
      if (playing) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    });

    // Initialize
    setStep(0);
    startTimer();
  </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 {
      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: center;
      min-height: 100%;
      padding: 12px;
    }
    .key-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
      margin-bottom: 12px;
      font-size: 13px;
      font-weight: 600;
    }
    .key-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .key-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #7c3aed;
      border: 1.5px solid #5b21b6;
    }
    .key-swatch {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      background: #bae6fd;
      border: 1.5px solid #0284c7;
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 520px;
    }
    .beaker-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 8px;
    }
    .beaker-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }
    .beaker-subtitle {
      font-size: 13px;
      color: #64748b;
      margin-bottom: 8px;
    }
    .svg-wrap {
      width: 100%;
      max-width: 200px;
      height: auto;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .particle {
      fill: #7c3aed;
      stroke: #4c1d95;
      stroke-width: 1.5;
    }
    .glass {
      fill: none;
      stroke: #64748b;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .grad-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-linecap: round;
    }
    .vol-text {
      font-size: 11px;
      font-weight: 600;
      fill: #475569;
      font-family: inherit;
    }
    @media (max-width: 380px) {
      .key-bar { gap: 10px; font-size: 12px; }
      .beaker-title { font-size: 13px; }
      .beaker-subtitle { font-size: 11px; }
    }
  </style>
</head>
<body>

  
  <div class="key-bar">
    <div class="key-item">
      <span class="key-dot"></span>
      <span>Solute (particles)</span>
    </div>
    <div class="key-item">
      <span class="key-swatch"></span>
      <span>Solvent (water)</span>
    </div>
    <div class="key-item">
      <span>📏 Volume: 1 dm³ each</span>
    </div>
  </div>

  
  <div class="comparison-grid">
    
    
    <div class="beaker-card">
      <div class="beaker-title">Dilute</div>
      <div class="beaker-subtitle">Low concentration</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 160 170" aria-label="Dilute solution with 4 solute particles in 1 dm³">
          <defs>
            <clipPath id="diluteLiquid">
              <rect x="22" y="45" width="116" height="108" rx="6" />
            </clipPath>
          </defs>

          
          <rect x="22" y="45" width="116" height="108" rx="6" fill="#e0f2fe" />
          <line x1="22" y1="45" x2="138" y2="45" stroke="#38bdf8" stroke-width="2.5" />

          
          <g clip-path="url(#diluteLiquid)">
            <circle cx="50" cy="72" r="7" class="particle" />
            <circle cx="108" cy="65" r="7" class="particle" />
            <circle cx="58" cy="122" r="7" class="particle" />
            <circle cx="112" cy="118" r="7" class="particle" />
          </g>

          
          
          <path d="M 14,20 L 22,25 L 22,146 A 8,8 0 0,0 30,154 L 130,154 A 8,8 0 0,0 138,146 L 138,20 L 144,20" class="glass" />
          
          
          <line x1="22" y1="45" x2="40" y2="45" class="grad-line" stroke-width="2" />
          <text x="44" y="49" class="vol-text">1 dm³</text>
          
          <line x1="22" y1="78" x2="34" y2="78" class="grad-line" />
          <line x1="22" y1="112" x2="34" y2="112" class="grad-line" />
        </svg>
      </div>
    </div>

    
    <div class="beaker-card">
      <div class="beaker-title">Concentrated</div>
      <div class="beaker-subtitle">High concentration</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 160 170" aria-label="Concentrated solution with 20 solute particles in 1 dm³">
          <defs>
            <clipPath id="concLiquid">
              <rect x="22" y="45" width="116" height="108" rx="6" />
            </clipPath>
          </defs>

          
          <rect x="22" y="45" width="116" height="108" rx="6" fill="#93c5fd" />
          <line x1="22" y1="45" x2="138" y2="45" stroke="#2563eb" stroke-width="2.5" />

          
          <g clip-path="url(#concLiquid)">
            <circle cx="42" cy="62" r="7" class="particle" />
            <circle cx="68" cy="58" r="7" class="particle" />
            <circle cx="94" cy="64" r="7" class="particle" />
            <circle cx="120" cy="60" r="7" class="particle" />

            <circle cx="36" cy="82" r="7" class="particle" />
            <circle cx="60" cy="78" r="7" class="particle" />
            <circle cx="84" cy="84" r="7" class="particle" />
            <circle cx="108" cy="80" r="7" class="particle" />

            <circle cx="48" cy="100" r="7" class="particle" />
            <circle cx="74" cy="98" r="7" class="particle" />
            <circle cx="98" cy="102" r="7" class="particle" />
            <circle cx="122" cy="96" r="7" class="particle" />

            <circle cx="38" cy="120" r="7" class="particle" />
            <circle cx="62" cy="118" r="7" class="particle" />
            <circle cx="86" cy="122" r="7" class="particle" />
            <circle cx="112" cy="116" r="7" class="particle" />

            <circle cx="50" cy="138" r="7" class="particle" />
            <circle cx="76" cy="136" r="7" class="particle" />
            <circle cx="100" cy="140" r="7" class="particle" />
            <circle cx="124" cy="134" r="7" class="particle" />
          </g>

          
          <path d="M 14,20 L 22,25 L 22,146 A 8,8 0 0,0 30,154 L 130,154 A 8,8 0 0,0 138,146 L 138,20 L 144,20" class="glass" />
          
          
          <line x1="22" y1="45" x2="40" y2="45" class="grad-line" stroke-width="2" />
          <text x="44" y="49" class="vol-text">1 dm³</text>
          
          <line x1="22" y1="78" x2="34" y2="78" class="grad-line" />
          <line x1="22" y1="112" x2="34" y2="112" class="grad-line" />
        </svg>
      </div>
    </div>

  </div>

</body>
</html>

UK-GCSE-SCIENCE-CHEM-CA-03-05

Aligned learning resources

Related diagrams