<!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;
      padding: 12px;
      min-height: 100%;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 8px;
      text-align: center;
    }
    .badge .right-rule { color: #059669; }
    .badge .left-rule { color: #d97706; }
    .diagram-wrap {
      width: 100%;
      max-width: 520px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn:hover {
      background: #f8fafc;
    }
    .btn.active {
      color: #ffffff;
      border-color: transparent;
    }
    .btn-all.active { background: #1e2945; }
    .btn-left.active { background: #d97706; }
    .btn-right.active { background: #059669; }

    .curve-group {
      transition: opacity 0.3s ease;
    }
    .dimmed {
      opacity: 0.2;
    }
  </style>
</head>
<body>

  <div class="badge">
    <span class="left-rule">f(x + 2) shifts LEFT 2</span>
    <span>•</span>
    <span class="right-rule">f(x − 3) shifts RIGHT 3</span>
  </div>

  <div class="diagram-wrap">
    <svg viewBox="0 0 500 310" xmlns="http://www.w3.org/2000/svg">
      <defs>
        
        <marker id="arrow-right" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#059669" />
        </marker>
        
        <marker id="arrow-left" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#d97706" />
        </marker>
        
        <marker id="axis-arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
          <path d="M 0 2 L 6 5 L 0 8 z" fill="#94a3b8" />
        </marker>
      </defs>

      
      <g stroke="#f1f5f9" stroke-width="1.2">
        
        <line x1="46" y1="30" x2="46" y2="260" />
        <line x1="80" y1="30" x2="80" y2="260" />
        <line x1="114" y1="30" x2="114" y2="260" />
        <line x1="148" y1="30" x2="148" y2="260" />
        <line x1="182" y1="30" x2="182" y2="260" />
        <line x1="216" y1="30" x2="216" y2="260" />
        <line x1="284" y1="30" x2="284" y2="260" />
        <line x1="318" y1="30" x2="318" y2="260" />
        <line x1="352" y1="30" x2="352" y2="260" />
        <line x1="386" y1="30" x2="386" y2="260" />
        <line x1="420" y1="30" x2="420" y2="260" />
        <line x1="454" y1="30" x2="454" y2="260" />
        
        <line x1="30" y1="50" x2="470" y2="50" />
        <line x1="30" y1="84" x2="470" y2="84" />
        <line x1="30" y1="118" x2="470" y2="118" />
        <line x1="30" y1="152" x2="470" y2="152" />
        <line x1="30" y1="186" x2="470" y2="186" />
        <line x1="30" y1="254" x2="470" y2="254" />
      </g>

      
      <g stroke="#94a3b8" stroke-width="1.5">
        
        <line x1="25" y1="220" x2="475" y2="220" marker-end="url(#axis-arrow)" />
        
        <line x1="250" y1="265" x2="250" y2="25" marker-end="url(#axis-arrow)" />
      </g>

      
      <g font-size="11" fill="#64748b" text-anchor="middle" font-family="system-ui, sans-serif">
        <text x="182" y="236">-2</text>
        <text x="216" y="236">-1</text>
        <text x="250" y="236">0</text>
        <text x="284" y="236">1</text>
        <text x="318" y="236">2</text>
        <text x="352" y="236">3</text>
        <text x="475" y="236" font-weight="600">x</text>
        <text x="262" y="32" font-weight="600">y</text>
      </g>

      
      <g id="curve-left" class="curve-group">
        
        <polyline points="63,101 182,220 352,50" fill="none" stroke="#d97706" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <circle cx="182" cy="220" r="5" fill="#d97706" />
        
        <rect x="70" y="65" width="84" height="24" rx="4" fill="#ffffff" fill-opacity="0.9" />
        <text x="112" y="82" fill="#d97706" font-size="12" font-weight="bold" text-anchor="middle">y = f(x + 2)</text>
        
        <path d="M 245 252 L 188 252" fill="none" stroke="#d97706" stroke-width="2" stroke-dasharray="4,3" marker-end="url(#arrow-left)" />
        <text x="216" y="270" fill="#d97706" font-size="11" font-weight="600" text-anchor="middle">← Shift 2 Left</text>
      </g>

      
      <g id="curve-right" class="curve-group">
        
        <polyline points="182,50 352,220 437,135" fill="none" stroke="#059669" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <circle cx="352" cy="220" r="5" fill="#059669" />
        
        <rect x="360" y="90" width="84" height="24" rx="4" fill="#ffffff" fill-opacity="0.9" />
        <text x="402" y="107" fill="#059669" font-size="12" font-weight="bold" text-anchor="middle">y = f(x − 3)</text>
        
        <path d="M 255 252 L 346 252" fill="none" stroke="#059669" stroke-width="2" stroke-dasharray="4,3" marker-end="url(#arrow-right)" />
        <text x="301" y="270" fill="#059669" font-size="11" font-weight="600" text-anchor="middle">Shift 3 Right →</text>
      </g>

      
      <g id="curve-base" class="curve-group">
        
        <polyline points="80,50 250,220 420,50" fill="none" stroke="#1e2945" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
        <circle cx="250" cy="220" r="5.5" fill="#1e2945" />
        
        <rect x="208" y="38" width="84" height="24" rx="4" fill="#ffffff" fill-opacity="0.9" />
        <text x="250" y="55" fill="#1e2945" font-size="13" font-weight="bold" text-anchor="middle">y = f(x)</text>
      </g>
    </svg>
  </div>

  <div class="controls">
    <button class="btn btn-all active" onclick="setMode('all')">Show All</button>
    <button class="btn btn-left" onclick="setMode('left')">Shift Left: f(x + 2)</button>
    <button class="btn btn-right" onclick="setMode('right')">Shift Right: f(x − 3)</button>
  </div>

  <script>
    function setMode(mode) {
      const gBase = document.getElementById('curve-base');
      const gLeft = document.getElementById('curve-left');
      const gRight = document.getElementById('curve-right');

      const btns = document.querySelectorAll('.btn');
      btns.forEach(b => b.classList.remove('active'));

      if (mode === 'all') {
        gBase.classList.remove('dimmed');
        gLeft.classList.remove('dimmed');
        gRight.classList.remove('dimmed');
        document.querySelector('.btn-all').classList.add('active');
      } else if (mode === 'left') {
        gBase.classList.remove('dimmed');
        gLeft.classList.remove('dimmed');
        gRight.classList.add('dimmed');
        document.querySelector('.btn-left').classList.add('active');
      } else if (mode === 'right') {
        gBase.classList.remove('dimmed');
        gLeft.classList.add('dimmed');
        gRight.classList.remove('dimmed');
        document.querySelector('.btn-right').classList.add('active');
      }
    }
  </script>
</body>
</html>

Vertical and Horizontal Translations: f(x) + a and f(x + a)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Function Translations</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-height: 100%;
      padding: 10px 8px;
      user-select: none;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-bottom: 8px;
      width: 100%;
      max-width: 580px;
    }
    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }

    /* SVG Canvas Container */
    .svg-container {
      width: 100%;
      max-width: 580px;
      aspect-ratio: 16 / 10;
      position: relative;
      margin-bottom: 8px;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: hidden;
    }

    /* Graphic Styling */
    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1.2;
    }
    .axis {
      stroke: #94a3b8;
      stroke-width: 1.75;
    }
    .tick-label {
      font-size: 13px;
      fill: #475569;
      font-weight: 600;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .axis-label {
      font-size: 14px;
      fill: #1e2945;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .curve {
      fill: none;
      stroke-width: 3.2;
      stroke-linecap: round;
      transition: opacity 0.3s ease;
    }
    .curve-parent { stroke: #0284c7; }
    .curve-right { stroke: #c026d3; }
    .curve-left { stroke: #ea580c; }

    .trans-arrow {
      stroke-dasharray: 4 3;
      stroke-width: 1.75;
      fill: none;
      transition: opacity 0.3s ease;
    }
    .trans-dot {
      transition: opacity 0.3s ease;
    }
    .curve-title {
      font-size: 13.5px;
      font-weight: 700;
      text-anchor: middle;
      transition: opacity 0.3s ease;
    }

    /* Rule Badges & Callouts */
    .badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 580px;
      margin-bottom: 6px;
    }
    .badge {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 9px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid transparent;
      transition: opacity 0.3s ease;
    }
    .badge-left {
      background: #fff7ed;
      color: #c2410c;
      border-color: #fed7aa;
    }
    .badge-parent {
      background: #f0f9ff;
      color: #0369a1;
      border-color: #bae6fd;
    }
    .badge-right {
      background: #fdf4ff;
      color: #a21caf;
      border-color: #f5d0fe;
    }

    /* Core Concept Note */
    .rule-callout {
      width: 100%;
      max-width: 580px;
      padding: 6px 10px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      font-size: 12px;
      color: #334155;
      text-align: center;
      line-height: 1.4;
    }
    .rule-callout strong {
      color: #0f172a;
    }
    .c-right { color: #a21caf; font-weight: 700; }
    .c-left { color: #c2410c; font-weight: 700; }

    @media (max-width: 480px) {
      .btn {
        padding: 5px 8px;
        font-size: 11.5px;
      }
      .badge {
        padding: 4px 7px;
        font-size: 11px;
      }
      .rule-callout {
        font-size: 11px;
        padding: 5px 8px;
      }
      .tick-label {
        font-size: 13.5px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn active" id="btn-all" onclick="setMode('all')">All Shifts</button>
    <button class="btn" id="btn-right" onclick="setMode('right')">Right Shift: f(x − 4)</button>
    <button class="btn" id="btn-left" onclick="setMode('left')">Left Shift: f(x + 2)</button>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 600 375" id="plot">
      <defs>
        
        <marker id="arr-right" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 1 1 L 7 4 L 1 7 z" fill="#c026d3" />
        </marker>
        
        <marker id="arr-left" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 1 1 L 7 4 L 1 7 z" fill="#ea580c" />
        </marker>
        
        <marker id="arr-axis" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="5" markerHeight="5" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#94a3b8" />
        </marker>
        
        <clipPath id="grid-clip">
          <rect x="36" y="20" width="536" height="326" />
        </clipPath>
      </defs>

      
      <g id="grid-layer"></g>

      
      <g id="clipped-content" clip-path="url(#grid-clip)">
        <g id="curve-layer"></g>
        <g id="shift-layer"></g>
        <g id="points-layer"></g>
      </g>

      
      <g id="axis-layer"></g>
      <g id="labels-layer"></g>
    </svg>
  </div>

  
  <div class="badges">
    <div class="badge badge-left" id="badge-left">
      <span>◀ f(x + 2) : 2 units LEFT</span>
    </div>
    <div class="badge badge-parent" id="badge-parent">
      <span>● Parent f(x)</span>
    </div>
    <div class="badge badge-right" id="badge-right">
      <span>f(x − 4) : 4 units RIGHT ▶</span>
    </div>
  </div>

  
  <div class="rule-callout">
    <strong>Rule:</strong> <span class="c-right">f(x − h)</span> shifts RIGHT by h &nbsp;|&nbsp; <span class="c-left">f(x + h)</span> shifts LEFT by h
  </div>

  <script>
    // Coordinate Bounds
    // Domain: [-5, 8.5], Range: [-2.5, 3.5]
    const xMin = -5, xMax = 8.5;
    const yMin = -2.5, yMax = 3.5;
    const svgW = 600, svgH = 375;
    const padL = 36, padR = 28, padT = 20, padB = 29;

    function toSvgX(x) {
      return padL + ((x - xMin) / (xMax - xMin)) * (svgW - padL - padR);
    }
    function toSvgY(y) {
      return padT + ((yMax - y) / (yMax - yMin)) * (svgH - padT - padB);
    }

    // Mathematical formula for parent f(x) passing exactly through (-1,0), (1,2), (3,-1)
    // f(x) = -0.625 x^2 + x + 1.625
    function f(x) {
      return -0.625 * x * x + x + 1.625;
    }

    function createSvgEl(tag, attrs) {
      const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
      for (const [k, v] of Object.entries(attrs)) {
        el.setAttribute(k, v);
      }
      return el;
    }

    // 1. Draw Grid Lines and Axes
    const gridLayer = document.getElementById('grid-layer');
    const axisLayer = document.getElementById('axis-layer');

    // Vertical grid lines and X tick labels
    for (let x = Math.ceil(xMin); x <= Math.floor(xMax); x++) {
      const sx = toSvgX(x);
      gridLayer.appendChild(createSvgEl('line', {
        x1: sx, y1: padT, x2: sx, y2: svgH - padB, class: 'grid-line'
      }));
      if (x !== 0) {
        const lbl = createSvgEl('text', {
          x: sx, y: toSvgY(0) + 14, class: 'tick-label'
        });
        lbl.textContent = x;
        axisLayer.appendChild(lbl);
      }
    }

    // Horizontal grid lines and Y tick labels
    for (let y = Math.ceil(yMin); y <= Math.floor(yMax); y++) {
      const sy = toSvgY(y);
      gridLayer.appendChild(createSvgEl('line', {
        x1: padL, y1: sy, x2: svgW - padR, y2: sy, class: 'grid-line'
      }));
      if (y !== 0) {
        const lbl = createSvgEl('text', {
          x: toSvgX(0) - 12, y: sy, class: 'tick-label'
        });
        lbl.textContent = y;
        axisLayer.appendChild(lbl);
      }
    }

    // Main Axes
    axisLayer.appendChild(createSvgEl('line', {
      x1: padL - 8, y1: toSvgY(0), x2: svgW - padR + 14, y2: toSvgY(0),
      class: 'axis', 'marker-end': 'url(#arr-axis)'
    }));
    axisLayer.appendChild(createSvgEl('line', {
      x1: toSvgX(0), y1: svgH - padB + 8, x2: toSvgX(0), y2: padT - 12,
      class: 'axis', 'marker-end': 'url(#arr-axis)'
    }));

    // Axis Names
    const xName = createSvgEl('text', { x: svgW - padR + 10, y: toSvgY(0) + 16, class: 'axis-label' });
    xName.textContent = 'x';
    const yName = createSvgEl('text', { x: toSvgX(0) + 14, y: padT - 6, class: 'axis-label' });
    yName.textContent = 'y';
    axisLayer.appendChild(xName);
    axisLayer.appendChild(yName);

    // 2. Generate Curves
    function generatePath(dxVal, xStart, xEnd) {
      let d = '';
      const step = 0.05;
      for (let x = xStart; x <= xEnd + 0.001; x += step) {
        const y = f(x - dxVal);
        const sx = toSvgX(x);
        const sy = toSvgY(y);
        d += (d === '' ? `M ${sx.toFixed(1)} ${sy.toFixed(1)}` : ` L ${sx.toFixed(1)} ${sy.toFixed(1)}`);
      }
      return d;
    }

    const curveLayer = document.getElementById('curve-layer');

    // Left curve: f(x + 2) => dx = -2
    const pathLeft = createSvgEl('path', {
      d: generatePath(-2, -4.5, 2.5),
      class: 'curve curve-left',
      id: 'curve-left-el'
    });
    // Right curve: f(x - 4) => dx = +4
    const pathRight = createSvgEl('path', {
      d: generatePath(4, 1.5, 8.5),
      class: 'curve curve-right',
      id: 'curve-right-el'
    });
    // Parent curve: f(x) => dx = 0
    const pathParent = createSvgEl('path', {
      d: generatePath(0, -2.5, 4.5),
      class: 'curve curve-parent',
      id: 'curve-parent-el'
    });

    curveLayer.appendChild(pathLeft);
    curveLayer.appendChild(pathRight);
    curveLayer.appendChild(pathParent);

    // 3. Shift Vectors & Reference Points
    const pts = [
      { x: -1, y: 0 },
      { x: 1, y: 2 },
      { x: 3, y: -1 }
    ];

    const shiftLayer = document.getElementById('shift-layer');
    const pointsLayer = document.getElementById('points-layer');
    const labelsLayer = document.getElementById('labels-layer');

    pts.forEach(pt => {
      const px = toSvgX(pt.x), py = toSvgY(pt.y);

      // Right arrow (+4)
      const rToX = toSvgX(pt.x + 4);
      shiftLayer.appendChild(createSvgEl('line', {
        x1: px, y1: py, x2: rToX - 3.5, y2: py,
        stroke: '#c026d3', class: 'trans-arrow group-right',
        'marker-end': 'url(#arr-right)'
      }));

      // Left arrow (-2)
      const lToX = toSvgX(pt.x - 2);
      shiftLayer.appendChild(createSvgEl('line', {
        x1: px, y1: py, x2: lToX + 3.5, y2: py,
        stroke: '#ea580c', class: 'trans-arrow group-left',
        'marker-end': 'url(#arr-left)'
      }));

      // Left shifted dot
      pointsLayer.appendChild(createSvgEl('circle', {
        cx: lToX, cy: py, r: 4.5, fill: '#ea580c', stroke: '#fff', 'stroke-width': 1.5,
        class: 'trans-dot group-left'
      }));

      // Right shifted dot
      pointsLayer.appendChild(createSvgEl('circle', {
        cx: rToX, cy: py, r: 4.5, fill: '#c026d3', stroke: '#fff', 'stroke-width': 1.5,
        class: 'trans-dot group-right'
      }));

      // Parent dot
      pointsLayer.appendChild(createSvgEl('circle', {
        cx: px, cy: py, r: 5, fill: '#0284c7', stroke: '#fff', 'stroke-width': 1.5,
        class: 'trans-dot group-parent'
      }));
    });

    // Curve Title Labels
    const parentLabel = createSvgEl('text', {
      x: toSvgX(1), y: toSvgY(2) - 12,
      fill: '#0284c7', class: 'curve-title group-parent'
    });
    parentLabel.textContent = 'y = f(x)';
    labelsLayer.appendChild(parentLabel);

    const rightLabel = createSvgEl('text', {
      x: toSvgX(5), y: toSvgY(2) - 12,
      fill: '#c026d3', class: 'curve-title group-right'
    });
    rightLabel.textContent = 'y = f(x − 4)';
    labelsLayer.appendChild(rightLabel);

    const leftLabel = createSvgEl('text', {
      x: toSvgX(-1), y: toSvgY(2) - 12,
      fill: '#ea580c', class: 'curve-title group-left'
    });
    leftLabel.textContent = 'y = f(x + 2)';
    labelsLayer.appendChild(leftLabel);

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

      const leftEls = document.querySelectorAll('.group-left, #curve-left-el');
      const rightEls = document.querySelectorAll('.group-right, #curve-right-el');
      const badgeLeft = document.getElementById('badge-left');
      const badgeRight = document.getElementById('badge-right');

      if (mode === 'all') {
        leftEls.forEach(el => el.style.opacity = '1');
        rightEls.forEach(el => el.style.opacity = '1');
        badgeLeft.style.opacity = '1';
        badgeRight.style.opacity = '1';
      } else if (mode === 'right') {
        leftEls.forEach(el => el.style.opacity = '0.08');
        rightEls.forEach(el => el.style.opacity = '1');
        badgeLeft.style.opacity = '0.3';
        badgeRight.style.opacity = '1';
      } else if (mode === 'left') {
        leftEls.forEach(el => el.style.opacity = '1');
        rightEls.forEach(el => el.style.opacity = '0.08');
        badgeLeft.style.opacity = '1';
        badgeRight.style.opacity = '0.3';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>b22 - Function Translation</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 100vh;
      padding: 10px 12px 14px;
      user-select: none;
    }

    .top-bar {
      width: 100%;
      max-width: 500px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }

    .trans-box {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 700;
      font-family: ui-monospace, monospace;
      color: #1e293b;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .trans-box .h-part { color: #0284c7; }
    .trans-box .v-part { color: #7c3aed; }

    .formula-tag {
      font-size: 13px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 8px;
      background: #f1f5f9;
      color: #1e293b;
      border: 1px solid #cbd5e1;
      font-family: ui-monospace, monospace;
      transition: all 0.3s ease;
    }

    .graph-container {
      width: 100%;
      max-width: 500px;
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0;
    }

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

    .grid-line { stroke: #e2e8f0; stroke-width: 1; }
    .axis { stroke: #475569; stroke-width: 1.75; }
    .axis-tick { stroke: #475569; stroke-width: 1.25; }
    .axis-label {
      font-size: 11px;
      font-weight: 600;
      fill: #334155;
      text-anchor: middle;
      font-family: ui-monospace, monospace;
    }
    .axis-title {
      font-size: 12px;
      font-weight: 700;
      fill: #1e293b;
      font-family: ui-monospace, monospace;
    }

    .curve-base {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 3;
      stroke-linecap: round;
    }
    .curve-h {
      fill: none;
      stroke: #0284c7;
      stroke-width: 2.5;
      stroke-dasharray: 5,5;
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .curve-final {
      fill: none;
      stroke: #7c3aed;
      stroke-width: 3.5;
      stroke-linecap: round;
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    .vector-arrow {
      fill: none;
      stroke-width: 2.25;
      transition: stroke-dashoffset 0.4s ease, opacity 0.3s ease;
    }
    .arrow-h { stroke: #0284c7; }
    .arrow-v { stroke: #7c3aed; }

    .vector-group {
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .vector-group.visible {
      opacity: 1;
    }

    .dot-label {
      font-size: 11px;
      font-weight: 700;
      font-family: ui-monospace, monospace;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .vec-badge {
      font-size: 11px;
      font-weight: 800;
      font-family: ui-monospace, monospace;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3.5px;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 500px;
      margin-top: 4px;
      flex-wrap: wrap;
    }

    .step-btn {
      background: #f8fafc;
      border: 1px solid #94a3b8;
      color: #1e293b;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .step-btn:hover {
      background: #f1f5f9;
      border-color: #64748b;
    }

    .step-btn.active {
      background: #7c3aed;
      border-color: #6d28d9;
      color: #ffffff;
      box-shadow: 0 2px 5px rgba(124, 58, 237, 0.3);
    }

    .play-btn {
      background: #f8fafc;
      border: 1px solid #94a3b8;
      color: #0f172a;
      font-size: 13px;
      font-weight: 700;
      padding: 6px 11px;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .play-btn:hover {
      background: #f1f5f9;
    }

    @media (max-width: 380px) {
      .trans-box, .formula-tag {
        font-size: 11.5px;
        padding: 4px 8px;
      }
      .step-btn {
        font-size: 11px;
        padding: 5px 8px;
      }
      .play-btn {
        padding: 5px 9px;
      }
    }
  </style>
</head>
<body>

  <div class="top-bar">
    <div class="trans-box" id="transBox">
      <span>(x, y)</span>
      <span>→</span>
      <span id="transTarget">(x, y)</span>
    </div>
    <div class="formula-tag" id="formulaTag">y = f(x)</div>
  </div>

  <div class="graph-container">
    <svg id="plot" viewBox="0 0 460 300" aria-label="Coordinate plane showing function translation">
      <defs>
        <marker id="arrowHeadH" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,1 L5,3 L0,5 Z" fill="#0284c7" />
        </marker>
        <marker id="arrowHeadV" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,1 L5,3 L0,5 Z" fill="#7c3aed" />
        </marker>
      </defs>

      
      <g id="gridGroup"></g>
      <g id="axesGroup"></g>

      
      <path id="basePath" class="curve-base" d="" />
      <path id="hPath" class="curve-h" d="" />
      <path id="finalPath" class="curve-final" d="" />

      
      <g id="step1Vectors" class="vector-group">
        <path id="arrH1" class="vector-arrow arrow-h" marker-end="url(#arrowHeadH)" d="" />
        <path id="arrH2" class="vector-arrow arrow-h" marker-end="url(#arrowHeadH)" d="" />
        <text id="lblH1" class="vec-badge" fill="#0284c7" text-anchor="middle">+4 right</text>
        <text id="lblH2" class="vec-badge" fill="#0284c7" text-anchor="middle">+4 right</text>
      </g>

      
      <g id="step2Vectors" class="vector-group">
        <path id="arrV1" class="vector-arrow arrow-v" marker-end="url(#arrowHeadV)" d="" />
        <path id="arrV2" class="vector-arrow arrow-v" marker-end="url(#arrowHeadV)" d="" />
        <text id="lblV1" class="vec-badge" fill="#7c3aed" text-anchor="start">+3 up</text>
        <text id="lblV2" class="vec-badge" fill="#7c3aed" text-anchor="start">+3 up</text>
      </g>

      
      <g id="pointsGroup"></g>
    </svg>
  </div>

  <div class="controls">
    <button class="play-btn" id="playBtn" title="Auto Play" aria-label="Auto Play">▶</button>
    <button class="step-btn active" id="btn0" onclick="userSelectStep(0)">Base f(x)</button>
    <button class="step-btn" id="btn1" onclick="userSelectStep(1)">1. Right +4</button>
    <button class="step-btn" id="btn2" onclick="userSelectStep(2)">2. Up +3</button>
  </div>

  <script>
    // Coordinate Mapping
    // x range: -0.6 to 8.6 (domain covers 0 to 8)
    // y range: -2.2 to 6.2 (range covers -1 to 5.5)
    const xMin = -0.6, xMax = 8.6;
    const yMin = -2.2, yMax = 6.2;
    const svgW = 460, svgH = 300;
    const padL = 36, padR = 20, padT = 20, padB = 26;
    const plotW = svgW - padL - padR;
    const plotH = svgH - padT - padB;

    function toSvgX(x) {
      return padL + ((x - xMin) / (xMax - xMin)) * plotW;
    }
    function toSvgY(y) {
      return padT + ((yMax - y) / (yMax - yMin)) * plotH;
    }

    // Base cubic function f(x): local peak at (1, 2), trough at (3, -1)
    // f(x) = 0.75 * x^3 - 4.5 * x^2 + 6.75 * x - 1
    function f(x) {
      return 0.75 * Math.pow(x, 3) - 4.5 * Math.pow(x, 2) + 6.75 * x - 1;
    }

    // Build Grid & Axes
    const gridGroup = document.getElementById('gridGroup');
    const axesGroup = document.getElementById('axesGroup');

    for (let x = 0; x <= 8; x++) {
      const sx = toSvgX(x);
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', sx); line.setAttribute('y1', toSvgY(yMin));
      line.setAttribute('x2', sx); line.setAttribute('y2', toSvgY(yMax));
      line.setAttribute('class', 'grid-line');
      gridGroup.appendChild(line);

      // Tick mark
      const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      tick.setAttribute('x1', sx); tick.setAttribute('y1', toSvgY(0) - 3);
      tick.setAttribute('x2', sx); tick.setAttribute('y2', toSvgY(0) + 3);
      tick.setAttribute('class', 'axis-tick');
      axesGroup.appendChild(tick);

      // Tick label
      if (x !== 0) {
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', sx);
        text.setAttribute('y', toSvgY(0) + 14);
        text.setAttribute('class', 'axis-label');
        text.textContent = x;
        axesGroup.appendChild(text);
      }
    }

    for (let y = -2; y <= 6; y++) {
      const sy = toSvgY(y);
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', toSvgX(xMin)); line.setAttribute('y1', sy);
      line.setAttribute('x2', toSvgX(xMax)); line.setAttribute('y2', sy);
      line.setAttribute('class', 'grid-line');
      gridGroup.appendChild(line);

      // Tick mark
      const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      tick.setAttribute('x1', toSvgX(0) - 3); tick.setAttribute('y1', sy);
      tick.setAttribute('x2', toSvgX(0) + 3); tick.setAttribute('y2', sy);
      tick.setAttribute('class', 'axis-tick');
      axesGroup.appendChild(tick);

      // Tick label
      if (y !== 0) {
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', toSvgX(0) - 7);
        text.setAttribute('y', sy + 4);
        text.setAttribute('class', 'axis-label');
        text.setAttribute('text-anchor', 'end');
        text.textContent = y;
        axesGroup.appendChild(text);
      }
    }

    // Origin 0 label
    const zeroLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    zeroLabel.setAttribute('x', toSvgX(0) - 6);
    zeroLabel.setAttribute('y', toSvgY(0) + 13);
    zeroLabel.setAttribute('class', 'axis-label');
    zeroLabel.setAttribute('text-anchor', 'end');
    zeroLabel.textContent = '0';
    axesGroup.appendChild(zeroLabel);

    // Axes
    const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    xAxis.setAttribute('x1', toSvgX(xMin)); xAxis.setAttribute('y1', toSvgY(0));
    xAxis.setAttribute('x2', toSvgX(xMax)); xAxis.setAttribute('y2', toSvgY(0));
    xAxis.setAttribute('class', 'axis');
    axesGroup.appendChild(xAxis);

    const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    yAxis.setAttribute('x1', toSvgX(0)); yAxis.setAttribute('y1', toSvgY(yMin));
    yAxis.setAttribute('x2', toSvgX(0)); yAxis.setAttribute('y2', toSvgY(yMax));
    yAxis.setAttribute('class', 'axis');
    axesGroup.appendChild(yAxis);

    // Axis titles
    const xTitle = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    xTitle.setAttribute('x', toSvgX(xMax) - 6);
    xTitle.setAttribute('y', toSvgY(0) - 7);
    xTitle.setAttribute('class', 'axis-title');
    xTitle.setAttribute('text-anchor', 'end');
    xTitle.textContent = 'x';
    axesGroup.appendChild(xTitle);

    const yTitle = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    yTitle.setAttribute('x', toSvgX(0) + 8);
    yTitle.setAttribute('y', toSvgY(yMax) + 12);
    yTitle.setAttribute('class', 'axis-title');
    yTitle.setAttribute('text-anchor', 'start');
    yTitle.textContent = 'y';
    axesGroup.appendChild(yTitle);

    // Generate Path helper
    function generatePath(dx = 0, dy = 0, xStart = 0.05, xEnd = 3.95) {
      let d = '';
      const step = 0.04;
      for (let x = xStart; x <= xEnd; x += step) {
        const y = f(x);
        const sx = toSvgX(x + dx);
        const sy = toSvgY(y + dy);
        d += (d === '' ? 'M ' : ' L ') + sx.toFixed(2) + ' ' + sy.toFixed(2);
      }
      return d;
    }

    document.getElementById('basePath').setAttribute('d', generatePath(0, 0));
    document.getElementById('hPath').setAttribute('d', generatePath(4, 0));
    document.getElementById('finalPath').setAttribute('d', generatePath(4, 3));

    // Translation Vector Paths - exactly anchored at the points
    // Peak horizontal: (1, 2) -> (5, 2)
    // Trough horizontal: (3, -1) -> (7, -1)
    const p1_start_x = toSvgX(1), p1_start_y = toSvgY(2);
    const p1_mid_x   = toSvgX(5), p1_mid_y   = toSvgY(2);
    const p1_end_x   = toSvgX(5), p1_end_y   = toSvgY(5);

    const p2_start_x = toSvgX(3), p2_start_y = toSvgY(-1);
    const p2_mid_x   = toSvgX(7), p2_mid_y   = toSvgY(-1);
    const p2_end_x   = toSvgX(7), p2_end_y   = toSvgY(2);

    document.getElementById('arrH1').setAttribute('d', `M ${p1_start_x} ${p1_start_y} L ${p1_mid_x} ${p1_mid_y}`);
    document.getElementById('arrH2').setAttribute('d', `M ${p2_start_x} ${p2_start_y} L ${p2_mid_x} ${p2_mid_y}`);
    document.getElementById('arrV1').setAttribute('d', `M ${p1_mid_x} ${p1_mid_y} L ${p1_end_x} ${p1_end_y}`);
    document.getElementById('arrV2').setAttribute('d', `M ${p2_mid_x} ${p2_mid_y} L ${p2_end_x} ${p2_end_y}`);

    // Vector Label positions
    const lblH1 = document.getElementById('lblH1');
    lblH1.setAttribute('x', toSvgX(3));
    lblH1.setAttribute('y', toSvgY(2) - 8);

    const lblH2 = document.getElementById('lblH2');
    lblH2.setAttribute('x', toSvgX(5));
    lblH2.setAttribute('y', toSvgY(-1) + 17);

    const lblV1 = document.getElementById('lblV1');
    lblV1.setAttribute('x', toSvgX(5) + 7);
    lblV1.setAttribute('y', toSvgY(3.5) + 4);

    const lblV2 = document.getElementById('lblV2');
    lblV2.setAttribute('x', toSvgX(7) + 7);
    lblV2.setAttribute('y', toSvgY(0.5) + 4);

    // Points definitions
    const pointsGroup = document.getElementById('pointsGroup');
    const pts = [
      { id: 'p0', x: 1, y: 2, label: '(1, 2)', fill: '#475569', align: 'end', ox: -8, oy: -6, minStep: 0 },
      { id: 't0', x: 3, y: -1, label: '(3, -1)', fill: '#475569', align: 'start', ox: 8, oy: 13, minStep: 0 },
      { id: 'p1', x: 5, y: 2, label: '(5, 2)', fill: '#0284c7', align: 'start', ox: 8, oy: 13, minStep: 1 },
      { id: 't1', x: 7, y: -1, label: '(7, -1)', fill: '#0284c7', align: 'start', ox: 8, oy: 13, minStep: 1 },
      { id: 'p2', x: 5, y: 5, label: '(5, 5)', fill: '#7c3aed', align: 'end', ox: -8, oy: -6, minStep: 2 },
      { id: 't2', x: 7, y: 2, label: '(7, 2)', fill: '#7c3aed', align: 'start', ox: 8, oy: -6, minStep: 2 }
    ];

    pts.forEach(p => {
      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      g.setAttribute('id', 'pt_' + p.id);
      g.style.transition = 'opacity 0.3s ease';

      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      circle.setAttribute('cx', toSvgX(p.x));
      circle.setAttribute('cy', toSvgY(p.y));
      circle.setAttribute('r', '5');
      circle.setAttribute('fill', p.fill);
      circle.setAttribute('stroke', '#ffffff');
      circle.setAttribute('stroke-width', '1.75');

      const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      txt.setAttribute('x', toSvgX(p.x) + p.ox);
      txt.setAttribute('y', toSvgY(p.y) + p.oy);
      txt.setAttribute('fill', p.fill);
      txt.setAttribute('text-anchor', p.align);
      txt.setAttribute('class', 'dot-label');
      txt.textContent = p.label;

      g.appendChild(circle);
      g.appendChild(txt);
      pointsGroup.appendChild(g);
    });

    let currentStep = 0;
    let autoInterval = null;

    function setStep(s) {
      currentStep = s;

      // Update button styles
      for (let i = 0; i <= 2; i++) {
        const btn = document.getElementById('btn' + i);
        btn.classList.toggle('active', i === s);
      }

      // Visual elements
      const hPath = document.getElementById('hPath');
      const finalPath = document.getElementById('finalPath');
      const step1Vectors = document.getElementById('step1Vectors');
      const step2Vectors = document.getElementById('step2Vectors');
      const formulaTag = document.getElementById('formulaTag');
      const transTarget = document.getElementById('transTarget');

      // Points visibility
      pts.forEach(p => {
        const el = document.getElementById('pt_' + p.id);
        if (s === 0) {
          el.style.opacity = p.minStep === 0 ? '1' : '0';
          el.style.pointerEvents = p.minStep === 0 ? 'auto' : 'none';
        } else if (s === 1) {
          el.style.opacity = p.minStep <= 1 ? '1' : '0';
          el.style.pointerEvents = p.minStep <= 1 ? 'auto' : 'none';
        } else if (s === 2) {
          el.style.opacity = '1';
          el.style.pointerEvents = 'auto';
        }
      });

      if (s === 0) {
        hPath.style.opacity = '0';
        finalPath.style.opacity = '0';
        step1Vectors.classList.remove('visible');
        step2Vectors.classList.remove('visible');

        formulaTag.textContent = 'y = f(x)';
        formulaTag.style.background = '#f1f5f9';
        formulaTag.style.borderColor = '#cbd5e1';
        formulaTag.style.color = '#1e293b';
        transTarget.innerHTML = '(x, y)';
      } else if (s === 1) {
        hPath.style.opacity = '1';
        finalPath.style.opacity = '0';
        step1Vectors.classList.add('visible');
        step2Vectors.classList.remove('visible');

        formulaTag.textContent = 'y = f(x - 4)';
        formulaTag.style.background = '#e0f2fe';
        formulaTag.style.borderColor = '#38bdf8';
        formulaTag.style.color = '#0284c7';
        transTarget.innerHTML = '(<span class="h-part">x + 4</span>, y)';
      } else if (s === 2) {
        hPath.style.opacity = '0.3';
        finalPath.style.opacity = '1';
        step1Vectors.classList.add('visible');
        step2Vectors.classList.add('visible');

        formulaTag.textContent = 'y = f(x - 4) + 3';
        formulaTag.style.background = '#f3e8ff';
        formulaTag.style.borderColor = '#c084fc';
        formulaTag.style.color = '#7c3aed';
        transTarget.innerHTML = '(<span class="h-part">x + 4</span>, <span class="v-part">y + 3</span>)';
      }
    }

    function userSelectStep(s) {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
        document.getElementById('playBtn').textContent = '▶';
      }
      setStep(s);
    }

    const playBtn = document.getElementById('playBtn');
    function toggleAuto() {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
        playBtn.textContent = '▶';
      } else {
        playBtn.textContent = '⏸';
        setStep((currentStep + 1) % 3);
        autoInterval = setInterval(() => {
          setStep((currentStep + 1) % 3);
        }, 2800);
      }
    }
    playBtn.addEventListener('click', toggleAuto);

    // Initialize Base Step
    setStep(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="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      background-color: #fbfbfd;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 8px;
    }
    .diagram-root {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }
    .btn {
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
    .svg-wrap {
      width: 100%;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .curve {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
    }
    .axis-line {
      stroke: #64748b;
      stroke-width: 1.5;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
    }
    .tick-label {
      font-size: 11px;
      fill: #64748b;
      font-family: inherit;
      user-select: none;
    }
    .curve-label {
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      user-select: none;
    }
    .shift-label {
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      user-select: none;
    }
    .pt-glow {
      filter: drop-shadow(0 0 4px rgba(0,0,0,0.25));
    }
    .dimmed {
      opacity: 0.15 !important;
    }
    .highlighted {
      opacity: 1 !important;
      stroke-width: 3.5 !important;
    }
  </style>
</head>
<body>
  <div class="diagram-root">
    <div class="controls">
      <button class="btn active" onclick="setMode('all')">Show All</button>
      <button class="btn" onclick="setMode('up')">+3 Up: f(x) + 3</button>
      <button class="btn" onclick="setMode('down')">−2 Down: f(x) − 2</button>
    </div>

    <div class="svg-wrap">
      <svg viewBox="0 0 500 400" id="graph">
        <defs>
          <marker id="arrow-up" viewBox="0 0 8 8" refX="4" refY="2" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 6 L 4 0 L 8 6 Z" fill="#0284c7" />
          </marker>
          <marker id="arrow-down" viewBox="0 0 8 8" refX="4" refY="6" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 2 L 4 8 L 8 2 Z" fill="#e11d48" />
          </marker>
          <marker id="axis-arrow-x" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="5" markerHeight="5" orient="auto">
            <path d="M 0 1 L 7 4 L 0 7 Z" fill="#64748b" />
          </marker>
          <marker id="axis-arrow-y" viewBox="0 0 8 8" refX="4" refY="2" markerWidth="5" markerHeight="5" orient="auto">
            <path d="M 1 7 L 4 0 L 7 7 Z" fill="#64748b" />
          </marker>
        </defs>

        
        <g id="grid"></g>

        
        <line x1="30" y1="240" x2="475" y2="240" class="axis-line" marker-end="url(#axis-arrow-x)" />
        <line x1="250" y1="375" x2="250" y2="20" class="axis-line" marker-end="url(#axis-arrow-y)" />
        <text x="480" y="244" class="tick-label" font-weight="bold">x</text>
        <text x="250" y="14" class="tick-label" font-weight="bold" text-anchor="middle">y</text>

        
        <g id="ticks"></g>

        
        <g id="group-up">
          <line x1="250" y1="236" x2="250" y2="152" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="4,4" marker-end="url(#arrow-up)" />
          <rect x="258" y="178" width="102" height="24" rx="4" fill="#ffffff" fill-opacity="0.92" stroke="#0284c7" stroke-width="1" />
          <text x="264" y="195" fill="#0284c7" class="shift-label">+3 units (Up)</text>
        </g>

        <g id="group-down">
          <line x1="250" y1="244" x2="250" y2="296" stroke="#e11d48" stroke-width="2.5" stroke-dasharray="4,4" marker-end="url(#arrow-down)" />
          <rect x="258" y="258" width="118" height="24" rx="4" fill="#ffffff" fill-opacity="0.92" stroke="#e11d48" stroke-width="1" />
          <text x="264" y="275" fill="#e11d48" class="shift-label">−2 units (Down)</text>
        </g>

        
        
        <path id="curve-base" class="curve" stroke="#1e2945" stroke-width="3" />
        
        <path id="curve-up" class="curve" stroke="#0284c7" stroke-width="3" />
        
        <path id="curve-down" class="curve" stroke="#e11d48" stroke-width="3" />

        
        <g id="labels">
          <text id="lbl-up" x="382" y="70" fill="#0284c7" class="curve-label">y = f(x) + 3</text>
          <text id="lbl-base" x="382" y="165" fill="#1e2945" class="curve-label">y = f(x)</text>
          <text id="lbl-down" x="382" y="235" fill="#e11d48" class="curve-label">y = f(x) − 2</text>
        </g>

        
        <g id="points">
          
          <g id="pt-up">
            <circle cx="250" cy="150" r="7" fill="#0284c7" opacity="0.3" />
            <circle cx="250" cy="150" r="4.5" fill="#0284c7" class="pt-glow" />
            <text x="240" y="145" fill="#0284c7" class="curve-label" font-size="12" text-anchor="end">(0, 3)</text>
          </g>

          
          <g id="pt-base">
            <circle cx="250" cy="240" r="7" fill="#1e2945" opacity="0.3" />
            <circle cx="250" cy="240" r="4.5" fill="#1e2945" class="pt-glow" />
            <text x="240" y="235" fill="#1e2945" class="curve-label" font-size="12" text-anchor="end">(0, 0)</text>
          </g>

          
          <g id="pt-down">
            <circle cx="250" cy="300" r="7" fill="#e11d48" opacity="0.3" />
            <circle cx="250" cy="300" r="4.5" fill="#e11d48" class="pt-glow" />
            <text x="240" y="315" fill="#e11d48" class="curve-label" font-size="12" text-anchor="end">(0, −2)</text>
          </g>
        </g>
      </svg>
    </div>
  </div>

  <script>
    const ORIGIN_X = 250;
    const ORIGIN_Y = 240;
    const SCALE = 30; // 30 px = 1 unit

    function toScreenX(x) { return ORIGIN_X + x * SCALE; }
    function toScreenY(y) { return ORIGIN_Y - y * SCALE; }

    // Generate grid lines and tick markers
    const gridGroup = document.getElementById('grid');
    const ticksGroup = document.getElementById('ticks');

    for (let x = -7; x <= 7; x++) {
      const sx = toScreenX(x);
      if (sx < 30 || sx > 470) continue;
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', sx);
      line.setAttribute('y1', 25);
      line.setAttribute('x2', sx);
      line.setAttribute('y2', 375);
      line.setAttribute('class', 'grid-line');
      gridGroup.appendChild(line);

      if (x !== 0 && Math.abs(x) <= 6) {
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', sx);
        text.setAttribute('y', ORIGIN_Y + 16);
        text.setAttribute('text-anchor', 'middle');
        text.setAttribute('class', 'tick-label');
        text.textContent = x;
        ticksGroup.appendChild(text);
      }
    }

    for (let y = -4; y <= 7; y++) {
      const sy = toScreenY(y);
      if (sy < 25 || sy > 375) continue;
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', 30);
      line.setAttribute('y1', sy);
      line.setAttribute('x2', 470);
      line.setAttribute('y2', sy);
      line.setAttribute('class', 'grid-line');
      gridGroup.appendChild(line);

      if (y !== 0 && y >= -4 && y <= 7) {
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', ORIGIN_X - 8);
        text.setAttribute('y', sy + 4);
        text.setAttribute('text-anchor', 'end');
        text.setAttribute('class', 'tick-label');
        text.textContent = y;
        ticksGroup.appendChild(text);
      }
    }

    // Function path generator: exact mathematical sampling
    function generateParabolaPath(verticalShift, xMin, xMax, step = 0.05) {
      let d = '';
      for (let x = xMin; x <= xMax + 0.001; x += step) {
        const y = 0.45 * (x * x) + verticalShift;
        const sx = toScreenX(x);
        const sy = toScreenY(y);
        d += (d === '' ? 'M' : 'L') + `${sx.toFixed(1)},${sy.toFixed(1)}`;
      }
      return d;
    }

    document.getElementById('curve-base').setAttribute('d', generateParabolaPath(0, -3.8, 3.8));
    document.getElementById('curve-up').setAttribute('d', generateParabolaPath(3, -3.1, 3.1));
    document.getElementById('curve-down').setAttribute('d', generateParabolaPath(-2, -4.1, 4.1));

    // Interactive filter
    function setMode(mode) {
      const btns = document.querySelectorAll('.btn');
      btns[0].classList.toggle('active', mode === 'all');
      btns[1].classList.toggle('active', mode === 'up');
      btns[2].classList.toggle('active', mode === 'down');

      const upElements = [document.getElementById('curve-up'), document.getElementById('group-up'), document.getElementById('lbl-up'), document.getElementById('pt-up')];
      const downElements = [document.getElementById('curve-down'), document.getElementById('group-down'), document.getElementById('lbl-down'), document.getElementById('pt-down')];

      if (mode === 'all') {
        upElements.forEach(el => el.classList.remove('dimmed', 'highlighted'));
        downElements.forEach(el => el.classList.remove('dimmed', 'highlighted'));
      } else if (mode === 'up') {
        upElements.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlighted'); });
        downElements.forEach(el => { el.classList.add('dimmed'); el.classList.remove('highlighted'); });
      } else if (mode === 'down') {
        downElements.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlighted'); });
        upElements.forEach(el => { el.classList.add('dimmed'); el.classList.remove('highlighted'); });
      }
    }
  </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 {
      width: 100%;
      background: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 8px;
      user-select: none;
    }
    .controls {
      display: flex;
      gap: 6px;
      margin-bottom: 6px;
      width: 100%;
      max-width: 360px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }
    .tab-btn[data-mode="up"].active {
      background: #16a34a;
      border-color: #16a34a;
      box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
    }
    .tab-btn[data-mode="down"].active {
      background: #dc2626;
      border-color: #dc2626;
      box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
    }
    .graph-container {
      width: 100%;
      max-width: 360px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
    }
    .axis-line {
      stroke: #64748b;
      stroke-width: 1.5;
    }
    .tick-label {
      font-size: 10px;
      fill: #94a3b8;
      text-anchor: middle;
      dominant-baseline: middle;
      font-family: system-ui, sans-serif;
    }
    .axis-title {
      font-size: 12px;
      font-weight: 700;
      fill: #475569;
      font-style: italic;
    }
    .curve {
      fill: none;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
    }
    .curve-parent {
      stroke: #2563eb;
      stroke-width: 2.5;
    }
    .curve-up {
      stroke: #16a34a;
      stroke-width: 2.5;
      stroke-dasharray: 6 4;
    }
    .curve-down {
      stroke: #dc2626;
      stroke-width: 2.5;
      stroke-dasharray: 6 4;
    }
    .arrow-vector {
      stroke-width: 2;
      transition: opacity 0.3s ease;
    }
    .arrow-up {
      stroke: #16a34a;
    }
    .arrow-down {
      stroke: #dc2626;
    }
    .point-dot {
      transition: opacity 0.3s ease, transform 0.2s ease;
    }
    .label-tag {
      font-size: 11px;
      font-weight: 700;
      transition: opacity 0.3s ease;
      paint-order: stroke;
      stroke: #f8f9fa;
      stroke-width: 3px;
      stroke-linejoin: round;
    }
    .coord-text {
      font-size: 10.5px;
      font-weight: 600;
      transition: opacity 0.3s ease;
      paint-order: stroke;
      stroke: #f8f9fa;
      stroke-width: 3px;
      stroke-linejoin: round;
    }
    .shift-tag {
      font-size: 11px;
      font-weight: 800;
      paint-order: stroke;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linejoin: round;
    }
    .dimmed {
      opacity: 0.12 !important;
    }
    .hidden {
      opacity: 0 !important;
      pointer-events: none;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="tab-btn active" data-mode="all">All Shifts</button>
    <button class="tab-btn" data-mode="up">+3 Units</button>
    <button class="tab-btn" data-mode="down">-2 Units</button>
  </div>

  <div class="graph-container">
    <svg id="svgGraph" viewBox="0 0 360 330">
      <defs>
        
        <marker id="arrowUp" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
          <path d="M 1 5 L 3 1 L 5 5 Z" fill="#16a34a" />
        </marker>
        <marker id="arrowDown" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
          <path d="M 1 1 L 3 5 L 5 1 Z" fill="#dc2626" />
        </marker>
      </defs>

      
      <g id="gridGroup"></g>
      <g id="axisGroup"></g>

      
      <g id="curvesGroup">
        <path id="curveUp" class="curve curve-up" />
        <path id="curveDown" class="curve curve-down" />
        <path id="curveParent" class="curve curve-parent" />
      </g>

      
      <g id="vectorsGroup"></g>

      
      <g id="pointsGroup"></g>
      <g id="labelsGroup"></g>
    </svg>
  </div>

  <script>
    // Coordinate transformation setup
    // x range: [-4, 4.5], y range: [-4, 6.5]
    const xMin = -4, xMax = 4.5;
    const yMin = -4, yMax = 6.5;
    const originSvgX = 150;
    const originSvgY = 190;
    const scaleX = 32;
    const scaleY = 25;

    function toSvgX(x) { return originSvgX + x * scaleX; }
    function toSvgY(y) { return originSvgY - y * scaleY; }

    // Mathematical definition of parent curve f(x) passing precisely through:
    // (-2, -1), (0, 1), (3, 2)
    // f(x) = (-2/15)*x^2 + (11/15)*x + 1
    function f(x) {
      return (-2 / 15) * x * x + (11 / 15) * x + 1;
    }

    // Build Grid & Axes
    const gridGroup = document.getElementById('gridGroup');
    const axisGroup = document.getElementById('axisGroup');

    for (let x = -3; x <= 4; x++) {
      const sx = toSvgX(x);
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', sx);
      line.setAttribute('y1', toSvgY(yMin));
      line.setAttribute('x2', sx);
      line.setAttribute('y2', toSvgY(yMax));
      line.setAttribute('class', 'grid-line');
      gridGroup.appendChild(line);

      if (x !== 0) {
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', sx);
        text.setAttribute('y', originSvgY + 12);
        text.setAttribute('class', 'tick-label');
        text.textContent = x;
        gridGroup.appendChild(text);
      }
    }

    for (let y = -3; y <= 6; y++) {
      const sy = toSvgY(y);
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', toSvgX(xMin));
      line.setAttribute('y1', sy);
      line.setAttribute('x2', toSvgX(xMax));
      line.setAttribute('y2', sy);
      line.setAttribute('class', 'grid-line');
      gridGroup.appendChild(line);

      if (y !== 0) {
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', originSvgX - 10);
        text.setAttribute('y', sy + 1);
        text.setAttribute('class', 'tick-label');
        text.textContent = y;
        gridGroup.appendChild(text);
      }
    }

    // X and Y Axes
    const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    xAxis.setAttribute('x1', toSvgX(xMin));
    xAxis.setAttribute('y1', originSvgY);
    xAxis.setAttribute('x2', toSvgX(xMax) + 10);
    xAxis.setAttribute('y2', originSvgY);
    xAxis.setAttribute('class', 'axis-line');
    axisGroup.appendChild(xAxis);

    const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    yAxis.setAttribute('x1', originSvgX);
    yAxis.setAttribute('y1', toSvgY(yMin) + 5);
    yAxis.setAttribute('x2', originSvgX);
    yAxis.setAttribute('y2', toSvgY(yMax) - 10);
    yAxis.setAttribute('class', 'axis-line');
    axisGroup.appendChild(yAxis);

    // Axis Labels
    const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    xLabel.setAttribute('x', toSvgX(xMax) + 14);
    xLabel.setAttribute('y', originSvgY + 4);
    xLabel.setAttribute('class', 'axis-title');
    xLabel.textContent = 'x';
    axisGroup.appendChild(xLabel);

    const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    yLabel.setAttribute('x', originSvgX + 4);
    yLabel.setAttribute('y', toSvgY(yMax) - 14);
    yLabel.setAttribute('class', 'axis-title');
    yLabel.textContent = 'y';
    axisGroup.appendChild(yLabel);

    // Generate Path Data accurately sampled
    function buildPath(offsetY) {
      const steps = 60;
      let d = '';
      for (let i = 0; i <= steps; i++) {
        const x = -3.7 + (7.8 * i) / steps;
        const y = f(x) + offsetY;
        const sx = toSvgX(x);
        const sy = toSvgY(y);
        d += (i === 0 ? 'M ' : ' L ') + sx.toFixed(1) + ' ' + sy.toFixed(1);
      }
      return d;
    }

    document.getElementById('curveParent').setAttribute('d', buildPath(0));
    document.getElementById('curveUp').setAttribute('d', buildPath(3));
    document.getElementById('curveDown').setAttribute('d', buildPath(-2));

    // Key points dataset
    const basePoints = [
      { x: -2, y: -1, align: 'left',  offX: -10, offY: 6 },
      { x: 0,  y: 1,  align: 'left',  offX: -10, offY: -2 },
      { x: 3,  y: 2,  align: 'left',  offX: 10,  offY: 6 }
    ];

    const vectorsGroup = document.getElementById('vectorsGroup');
    const pointsGroup = document.getElementById('pointsGroup');
    const labelsGroup = document.getElementById('labelsGroup');

    basePoints.forEach(pt => {
      const bx = toSvgX(pt.x);
      const by = toSvgY(pt.y);

      // Up vector & shifted point (+3)
      const upY = toSvgY(pt.y + 3);
      const vUp = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      vUp.setAttribute('x1', bx);
      vUp.setAttribute('y1', by - 5);
      vUp.setAttribute('x2', bx);
      vUp.setAttribute('y2', upY + 6);
      vUp.setAttribute('class', 'arrow-vector arrow-up group-up');
      vUp.setAttribute('marker-end', 'url(#arrowUp)');
      vectorsGroup.appendChild(vUp);

      const shiftUpTag = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      shiftUpTag.setAttribute('x', bx + 6);
      shiftUpTag.setAttribute('y', (by + upY) / 2 + 3);
      shiftUpTag.setAttribute('class', 'shift-tag group-up');
      shiftUpTag.setAttribute('fill', '#16a34a');
      shiftUpTag.textContent = '+3';
      vectorsGroup.appendChild(shiftUpTag);

      // Down vector & shifted point (-2)
      const downY = toSvgY(pt.y - 2);
      const vDown = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      vDown.setAttribute('x1', bx);
      vDown.setAttribute('y1', by + 5);
      vDown.setAttribute('x2', bx);
      vDown.setAttribute('y2', downY - 6);
      vDown.setAttribute('class', 'arrow-vector arrow-down group-down');
      vDown.setAttribute('marker-end', 'url(#arrowDown)');
      vectorsGroup.appendChild(vDown);

      const shiftDownTag = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      shiftDownTag.setAttribute('x', bx + 6);
      shiftDownTag.setAttribute('y', (by + downY) / 2 + 4);
      shiftDownTag.setAttribute('class', 'shift-tag group-down');
      shiftDownTag.setAttribute('fill', '#dc2626');
      shiftDownTag.textContent = '-2';
      vectorsGroup.appendChild(shiftDownTag);

      // Plot Points: Parent, Up, Down
      function addPoint(x, y, color, groupClass, labelText, textOffX, textOffY, anchor) {
        const px = toSvgX(x);
        const py = toSvgY(y);

        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', px);
        circle.setAttribute('cy', py);
        circle.setAttribute('r', '4.5');
        circle.setAttribute('fill', color);
        circle.setAttribute('stroke', '#ffffff');
        circle.setAttribute('stroke-width', '1.5');
        circle.setAttribute('class', `point-dot ${groupClass}`);
        pointsGroup.appendChild(circle);

        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', px + textOffX);
        text.setAttribute('y', py + textOffY);
        text.setAttribute('text-anchor', anchor);
        text.setAttribute('class', `coord-text ${groupClass}`);
        text.setAttribute('fill', color);
        text.textContent = labelText;
        labelsGroup.appendChild(text);
      }

      // Parent point
      addPoint(pt.x, pt.y, '#2563eb', 'group-parent', `(${pt.x}, ${pt.y})`, pt.offX, pt.offY, pt.offX > 0 ? 'start' : 'end');
      // Shifted +3 point
      addPoint(pt.x, pt.y + 3, '#16a34a', 'group-up', `(${pt.x}, ${pt.y + 3})`, pt.offX, pt.offY - 2, pt.offX > 0 ? 'start' : 'end');
      // Shifted -2 point
      addPoint(pt.x, pt.y - 2, '#dc2626', 'group-down', `(${pt.x}, ${pt.y - 2})`, pt.offX, pt.offY + 4, pt.offX > 0 ? 'start' : 'end');
    });

    // Function Equations Labels
    function createFunctionLabel(text, x, y, color, groupClass) {
      const lbl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      lbl.setAttribute('x', toSvgX(x));
      lbl.setAttribute('y', toSvgY(y));
      lbl.setAttribute('fill', color);
      lbl.setAttribute('class', `label-tag ${groupClass}`);
      lbl.textContent = text;
      labelsGroup.appendChild(lbl);
    }

    createFunctionLabel('y = f(x) + 3', -3.6, 5.2, '#16a34a', 'group-up');
    createFunctionLabel('y = f(x)', -3.6, 1.2, '#2563eb', 'group-parent');
    createFunctionLabel('y = f(x) - 2', -3.6, -2.8, '#dc2626', 'group-down');

    // Filter controls
    const buttons = document.querySelectorAll('.tab-btn');
    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const mode = btn.dataset.mode;
        applyFilter(mode);
      });
    });

    function applyFilter(mode) {
      const upElements = document.querySelectorAll('.group-up, #curveUp');
      const downElements = document.querySelectorAll('.group-down, #curveDown');
      const parentElements = document.querySelectorAll('.group-parent, #curveParent');

      if (mode === 'all') {
        upElements.forEach(el => el.classList.remove('dimmed', 'hidden'));
        downElements.forEach(el => el.classList.remove('dimmed', 'hidden'));
        parentElements.forEach(el => el.classList.remove('dimmed'));
      } else if (mode === 'up') {
        upElements.forEach(el => el.classList.remove('dimmed', 'hidden'));
        downElements.forEach(el => el.classList.add('hidden'));
        parentElements.forEach(el => el.classList.remove('dimmed'));
      } else if (mode === 'down') {
        upElements.forEach(el => el.classList.add('hidden'));
        downElements.forEach(el => el.classList.remove('dimmed', 'hidden'));
        parentElements.forEach(el => el.classList.remove('dimmed'));
      }
    }
  </script>
</body>
</html>

OGM.12.FNC.4

Aligned learning resources

Related diagrams