Auto Scaling Groups (ASG) Strategies – AWS Certified Cloud Practitioner

🧠 AWS Auto Scaling Strategies

Every app has different traffic patterns , so you need the right scaling strategy to handle spikes, control costs, and keep performance steady ⚡.

<div class="infographic-asgflow">
  <style>
    .infographic-asgflow {
      --ink:        #1a1a1a;
      --ink-soft:   #5c5c5c;
      --paper:      #ffffff;
      --paper-alt:  #f0ece4;
      --accent:     #2563eb;
      --accent-soft:#e3ebfd;
      --line:       #ddd6c9;
      --idle:       #b9b2a0;
    }
    .infographic-asgflow[data-theme="dark"] {
      --ink:        #e8e6e1;
      --ink-soft:   #9a968c;
      --paper:      #121212;
      --paper-alt:  #1e1e26;
      --accent:     #5b8def;
      --accent-soft:#202942;
      --line:       #2c313d;
      --idle:       #454045;
    }

    .infographic-asgflow {
      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      padding: 2.25rem 1.5rem 1.75rem;
      max-width: 760px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .infographic-asgflow * { box-sizing: border-box; }

    .asgflow-toolbar {
      display: flex;
      justify-content: center;
      margin-bottom: 1.5rem;
    }
    .asgflow-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: var(--paper-alt);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0.4rem 0.5rem 0.4rem 1rem;
      cursor: pointer;
      font: inherit;
      font-size: 0.85rem;
      color: var(--ink-soft);
      transition: border-color 0.2s;
    }
    .asgflow-toggle:hover { border-color: var(--accent); }
    .asgflow-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .asgflow-toggle .knob-track {
      width: 40px; height: 22px;
      border-radius: 999px;
      background: var(--idle);
      position: relative;
      transition: background 0.35s;
      flex: none;
    }
    .asgflow-toggle .knob {
      position: absolute;
      top: 2px; left: 2px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--paper);
      transition: transform 0.35s cubic-bezier(.4,1.4,.5,1);
    }
    .infographic-asgflow.is-spike .knob-track { background: var(--accent); }
    .infographic-asgflow.is-spike .knob { transform: translateX(18px); }

    .asgflow-stage {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: center;
      gap: 0.25rem;
    }
    @media (max-width: 620px) {
      .asgflow-stage {
        grid-template-columns: 1fr;
        gap: 1.75rem;
      }
      .asgflow-arrow { transform: rotate(90deg); margin: 0 auto; }
    }

    .asgflow-panel { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
    .asgflow-panel svg.asgflow-icon { width: 100%; max-width: 190px; height: auto; overflow: visible; }
    .asgflow-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-soft);
      text-align: center;
      transition: color 0.3s;
    }
    .infographic-asgflow.is-spike .asgflow-label { color: var(--accent); }

    .asgflow-arrow { color: var(--line); flex: none; align-self: center; }
    .asgflow-arrow svg { width: 40px; height: 24px; display: block; overflow: visible; }
    .asgflow-arrow .chevron {
      fill: none;
      stroke: var(--idle);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.45;
      transition: stroke 0.3s, opacity 0.3s;
    }
    .infographic-asgflow.is-spike .asgflow-arrow .chevron { stroke: var(--accent); }
    .infographic-asgflow.is-spike .asgflow-arrow .chevron-1 { animation: asgflow-chev 1.2s ease-in-out infinite; }
    .infographic-asgflow.is-spike .asgflow-arrow .chevron-2 { animation: asgflow-chev 1.2s ease-in-out infinite 0.15s; }
    .infographic-asgflow.is-spike .asgflow-arrow .chevron-3 { animation: asgflow-chev 1.2s ease-in-out infinite 0.3s; }
    @keyframes asgflow-chev {
      0%, 100% { opacity: 0.25; }
      40% { opacity: 1; }
    }

    /* --- traffic wave --- */
    .wave-line {
      fill: none;
      stroke: var(--idle);
      stroke-width: 2.5;
      stroke-linecap: round;
      transition: stroke 0.3s, d 0.5s;
    }
    .infographic-asgflow.is-spike .wave-line { stroke: var(--accent); }
    .wave-calm { opacity: 1; transition: opacity 0.4s; }
    .wave-spike { opacity: 0; transition: opacity 0.4s; }
    .infographic-asgflow.is-spike .wave-calm { opacity: 0; }
    .infographic-asgflow.is-spike .wave-spike { opacity: 1; }

    /* --- gear (ASG) --- */
    .gear-body { fill: var(--paper-alt); stroke: var(--idle); stroke-width: 2; transition: stroke 0.3s; }
    .infographic-asgflow.is-spike .gear-body { stroke: var(--accent); }
    .gear-ring { fill: none; stroke: var(--line); stroke-width: 2; }
    .gear-dial-fill {
      fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round;
      stroke-dasharray: 88;
      stroke-dashoffset: 66;
      transition: stroke-dashoffset 0.6s ease;
      transform-origin: 50% 50%;
      transform: rotate(-90deg);
    }
    .infographic-asgflow.is-spike .gear-dial-fill { stroke-dashoffset: 18; }

    /* --- servers --- */
    .server-box {
      fill: var(--paper-alt);
      stroke: var(--line);
      stroke-width: 1.5;
      transition: opacity 0.4s ease, transform 0.4s ease, stroke 0.3s;
    }
    .server-box .rack-line { stroke: var(--idle); stroke-width: 1.5; transition: stroke 0.3s; }
    .server-extra {
      opacity: 0;
      transform: scale(0.4) translateY(6px);
      transform-box: fill-box;
      transform-origin: center;
    }
    .infographic-asgflow.is-spike .server-extra {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    .infographic-asgflow.is-spike .server-box { stroke: var(--accent); }
    .infographic-asgflow.is-spike .server-box .rack-line { stroke: var(--accent); }
    .server-extra:nth-of-type(1) { transition-delay: 0.05s; }
    .server-extra:nth-of-type(2) { transition-delay: 0.15s; }
    .server-extra:nth-of-type(3) { transition-delay: 0.25s; }
    .server-extra:nth-of-type(4) { transition-delay: 0.35s; }

    .asgflow-caption {
      text-align: center;
      color: var(--ink-soft);
      font-size: 0.85rem;
      margin-top: 1.75rem;
      transition: opacity 0.3s;
    }

    @media (prefers-reduced-motion: reduce) {
      .infographic-asgflow * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    }
  </style>

  <div class="asgflow-toolbar">
    <button class="asgflow-toggle" type="button" aria-pressed="false" aria-label="Toggle traffic spike">
      <span aria-hidden="true">🙂</span>
      <span class="knob-track"><span class="knob"></span></span>
      <span aria-hidden="true">🔥</span>
    </button>
  </div>

  <div class="asgflow-stage">

    <!-- Traffic -->
    <div class="asgflow-panel">
      <svg class="asgflow-icon" viewBox="0 0 160 120" aria-label="Incoming traffic">
        <g class="wave-calm">
          <path class="wave-line" d="M10 70 Q 30 60, 50 70 T 90 70 T 130 70 T 150 70"/>
        </g>
        <g class="wave-spike">
          <path class="wave-line" d="M10 90 L 30 90 L 42 20 L 54 90 L 66 40 L 78 90 L 96 15 L 108 90 L 122 50 L 150 90"/>
        </g>
        <circle cx="20" cy="20" r="3" fill="var(--idle)"/>
        <circle cx="36" cy="14" r="2.4" fill="var(--idle)"/>
        <circle cx="48" cy="24" r="2" fill="var(--idle)"/>
      </svg>
      <span class="asgflow-label">Traffic</span>
    </div>

    <div class="asgflow-arrow">
      <svg viewBox="0 0 40 24">
        <polyline class="chevron chevron-1" points="4,4 12,12 4,20"/>
        <polyline class="chevron chevron-2" points="14,4 22,12 14,20"/>
        <polyline class="chevron chevron-3" points="24,4 32,12 24,20"/>
      </svg>
    </div>

    <!-- ASG gear -->
    <div class="asgflow-panel">
      <svg class="asgflow-icon" viewBox="0 0 160 120" aria-label="Auto Scaling Group reacting">
        <g id="gearRotate" class="gear-group" transform="rotate(0 80 60)">
          <g transform="translate(80,60) scale(1.45)">
            <path class="gear-body" transform="translate(-37,-37)" d="M34 4 L40 4 L42 14 L50 17 L58 11 L63 16 L57 24 L60 32 L70 34 L70 40 L60 42 L57 50 L63 58 L58 63 L50 57 L42 60 L40 70 L34 70 L32 60 L24 57 L16 63 L11 58 L17 50 L14 42 L4 40 L4 34 L14 32 L17 24 L11 16 L16 11 L24 17 L32 14 Z"/>
            <circle class="gear-ring" r="14"/>
          </g>
        </g>
        <circle cx="80" cy="60" r="23" fill="var(--paper)" stroke="none"/>
        <circle cx="80" cy="60" r="20" fill="none" stroke="var(--line)" stroke-width="5" opacity="0.35"/>
        <circle class="gear-dial-fill" cx="80" cy="60" r="14"/>
      </svg>
      <span class="asgflow-label">Auto Scaling Group</span>
    </div>

    <div class="asgflow-arrow">
      <svg viewBox="0 0 40 24">
        <polyline class="chevron chevron-1" points="4,4 12,12 4,20"/>
        <polyline class="chevron chevron-2" points="14,4 22,12 14,20"/>
        <polyline class="chevron chevron-3" points="24,4 32,12 24,20"/>
      </svg>
    </div>

    <!-- EC2 servers -->
    <div class="asgflow-panel">
      <svg class="asgflow-icon" viewBox="0 0 160 120" aria-label="EC2 instances adjusting">
        <g>
          <rect class="server-box" x="46" y="66" width="30" height="20" rx="3"/>
          <line class="rack-line" x1="50" y1="72" x2="72" y2="72"/>
          <line class="rack-line" x1="50" y1="78" x2="72" y2="78"/>
        </g>
        <g>
          <rect class="server-box" x="84" y="66" width="30" height="20" rx="3"/>
          <line class="rack-line" x1="88" y1="72" x2="110" y2="72"/>
          <line class="rack-line" x1="88" y1="78" x2="110" y2="78"/>
        </g>

        <g class="server-extra">
          <rect class="server-box" x="46" y="40" width="30" height="20" rx="3"/>
          <line class="rack-line" x1="50" y1="46" x2="72" y2="46"/>
          <line class="rack-line" x1="50" y1="52" x2="72" y2="52"/>
        </g>
        <g class="server-extra">
          <rect class="server-box" x="84" y="40" width="30" height="20" rx="3"/>
          <line class="rack-line" x1="88" y1="46" x2="110" y2="46"/>
          <line class="rack-line" x1="88" y1="52" x2="110" y2="52"/>
        </g>
        <g class="server-extra">
          <rect class="server-box" x="65" y="16" width="30" height="20" rx="3"/>
          <line class="rack-line" x1="69" y1="22" x2="91" y2="22"/>
          <line class="rack-line" x1="69" y1="28" x2="91" y2="28"/>
        </g>
        <g class="server-extra">
          <rect class="server-box" x="103" y="16" width="24" height="20" rx="3" opacity="0.9"/>
          <line class="rack-line" x1="107" y1="22" x2="123" y2="22"/>
          <line class="rack-line" x1="107" y1="28" x2="123" y2="28"/>
        </g>
      </svg>
      <span class="asgflow-label">EC2 Instances</span>
    </div>

  </div>

  <p class="asgflow-caption">Tap the toggle — traffic rises, the ASG dial reacts, EC2 instances follow.</p>

  <script>
    (function () {
      var wrapper = document.currentScript.closest('.infographic-asgflow')
        || document.querySelector('.infographic-asgflow');

      // dark mode detection
      var bodyAttr = document.body.getAttribute('data-darkmode');
      var dark;
      if (bodyAttr === 'true') {
        dark = true;
      } else if (bodyAttr === 'false') {
        dark = false;
      } else {
        var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
        dark = match ? match[1] === 'true' : false;
      }
      if (dark) wrapper.setAttribute('data-theme', 'dark');

      var toggle = wrapper.querySelector('.asgflow-toggle');
      var gear = wrapper.querySelector('#gearRotate');
      var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      var spiking = false;
      var angle = 0;
      var rafId = null;

      function tick() {
        angle = (angle + 1) % 360;
        gear.setAttribute('transform', 'rotate(' + angle + ' 80 60)');
        rafId = requestAnimationFrame(tick);
      }

      function setState(on) {
        spiking = on;
        wrapper.classList.toggle('is-spike', spiking);
        toggle.setAttribute('aria-pressed', String(spiking));
        if (spiking && !reduceMotion) {
          if (!rafId) rafId = requestAnimationFrame(tick);
        } else if (rafId) {
          cancelAnimationFrame(rafId);
          rafId = null;
        }
      }

      toggle.addEventListener('click', function () {
        setState(!spiking);
      });
    })();
  </script>
</div>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});

The basic flow: Traffic changes → Auto Scaling Group reacts → EC2 instances adjust automatically.

<div class="infographic-scalestrat">
  <style>
    .infographic-scalestrat {
      --ink:        #1a1a1a;
      --ink-soft:   #5c5c5c;
      --paper:      #ffffff;
      --paper-alt:  #f0ece4;
      --accent:     #2563eb;
      --accent-soft:#e3ebfd;
      --line:       #ddd6c9;
      --idle:       #b9b2a0;
    }
    .infographic-scalestrat[data-theme="dark"] {
      --ink:        #e8e6e1;
      --ink-soft:   #9a968c;
      --paper:      #121212;
      --paper-alt:  #1e1e26;
      --accent:     #5b8def;
      --accent-soft:#202942;
      --line:       #2c313d;
      --idle:       #454045;
    }

    .infographic-scalestrat {
      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      padding: 2rem 1.5rem 1.75rem;
      max-width: 720px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .infographic-scalestrat * { box-sizing: border-box; }

    .ss-eyebrow {
      text-align: center;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 1.1rem;
    }

    .ss-stage {
      background: var(--paper-alt);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 1rem 0.5rem 0;
      position: relative;
      min-height: 190px;
    }
    .ss-svg { width: 100%; height: auto; display: block; overflow: visible; }

    .scene {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .scene.is-active { opacity: 1; pointer-events: auto; }
    .scene:not(.is-active) * { animation-play-state: paused !important; }

    .ss-caption {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      justify-content: center;
      flex-wrap: wrap;
      text-align: center;
      margin: 1rem 0 1.4rem;
      min-height: 1.4em;
    }
    .ss-caption-text { color: var(--ink-soft); font-size: 0.88rem; margin: 0; }
    .ss-tag {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-soft);
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
    }
    .ss-tag[hidden] { display: none; }

    .ss-tabs {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .ss-tab {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font: inherit;
      font-size: 0.8rem;
      color: var(--ink-soft);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0.45rem 0.85rem;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .ss-tab:hover { border-color: var(--accent); color: var(--ink); }
    .ss-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .ss-tab .ico { font-size: 0.95rem; line-height: 1; }
    .ss-tab.is-active {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-soft);
      font-weight: 600;
    }

    /* shared server rack */
    .server-box { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
    .server-box .rack-line { stroke: var(--idle); stroke-width: 1.4; }
    .server-extra { transform-box: fill-box; transform-origin: center; }

    /* ===== Manual scene ===== */
    .ss-manual-stepper { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
    .ss-manual-btn { fill: var(--paper-alt); stroke: var(--idle); stroke-width: 1.4; }
    .ss-manual-btn.plus { stroke: var(--accent); }
    .ss-manual-glyph { fill: var(--ink-soft); font-size: 13px; text-anchor: middle; dominant-baseline: middle; }
    .ss-manual-count { font-size: 20px; text-anchor: middle; dominant-baseline: middle; fill: var(--ink); font-weight: 600; }
    .ss-manual-cursor { transform-box: fill-box; transform-origin: center; fill: var(--ink); }
    .ss-manual-num-one { animation: ss-num-one 4s infinite; }
    .ss-manual-num-two { animation: ss-num-two 4s infinite; }
    @keyframes ss-num-one { 0%, 44% { opacity: 1; } 52%, 100% { opacity: 0; } }
    @keyframes ss-num-two { 0%, 44% { opacity: 0; } 52%, 96% { opacity: 1; } 100% { opacity: 0; } }
    .scene-manual .ss-manual-cursor { animation: ss-cursor-move 4s infinite ease-in-out; }
    @keyframes ss-cursor-move {
      0%, 38% { transform: translateY(0); }
      50% { transform: translateY(24px); }
      58% { transform: translateY(24px) scale(0.9); }
      66%, 84% { transform: translateY(24px); }
      100% { transform: translateY(0); }
    }
    .scene-manual .server-extra { animation: ss-manual-box 4s infinite ease; }
    @keyframes ss-manual-box {
      0%, 50% { opacity: 0; transform: scale(0.55); }
      60%, 92% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0.55); }
    }

    /* ===== Step scaling scene ===== */
    .ss-step-threshold { stroke: var(--idle); stroke-width: 1.5; stroke-dasharray: 4 3; }
    .ss-step-bar { fill: var(--accent); }
    .scene-step .ss-step-bar { animation: ss-step-bar 6s infinite ease-in-out; }
    @keyframes ss-step-bar {
      0%, 22% { height: 14px; y: 116px; }
      36%, 54% { height: 95px; y: 35px; }
      68%, 88% { height: 8px; y: 122px; }
      100% { height: 14px; y: 116px; }
    }
    .ss-step-bell { transform-box: fill-box; transform-origin: 50% 8%; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linejoin: round; }
    .scene-step .ss-step-bell { animation: ss-bell-ring 6s infinite; }
    @keyframes ss-bell-ring {
      0%, 32% { transform: rotate(0deg); }
      34% { transform: rotate(-14deg); }
      36% { transform: rotate(12deg); }
      38% { transform: rotate(-9deg); }
      40% { transform: rotate(6deg); }
      43%, 100% { transform: rotate(0deg); }
    }
    .scene-step .server-extra.e1 { animation: ss-step-e1 6s infinite ease; }
    .scene-step .server-extra.e2 { animation: ss-step-e2 6s infinite ease; }
    @keyframes ss-step-e1 {
      0%, 30% { opacity: 0; transform: scale(0.55); }
      38%, 96% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0.55); }
    }
    @keyframes ss-step-e2 {
      0%, 30% { opacity: 0; transform: scale(0.55); }
      38%, 66% { opacity: 1; transform: scale(1); }
      74%, 100% { opacity: 0; transform: scale(0.55); }
    }

    /* ===== Target tracking scene ===== */
    .ss-target-ring { fill: none; stroke: var(--line); stroke-width: 5; opacity: 0.4; }
    .ss-target-arc { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
    .ss-target-needle { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; transform-box: fill-box; transform-origin: 100% 50%; }
    .scene-target .ss-target-needle { animation: ss-needle-wiggle 3s ease-in-out infinite alternate; }
    @keyframes ss-needle-wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
    .scene-target .server-extra { animation: ss-target-breathe 3s ease-in-out infinite alternate; }
    @keyframes ss-target-breathe { from { opacity: 0.35; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

    /* ===== Scheduled scene ===== */
    .ss-sched-face { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
    .ss-sched-tick { stroke: var(--idle); stroke-width: 2; }
    .ss-sched-hand { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; }
    .scene-scheduled .ss-sched-hand { animation: ss-clock-spin 8s linear infinite; }
    @keyframes ss-clock-spin { to { transform: rotate(360deg); } }
    .ss-sched-marker { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
    .scene-scheduled .ss-sched-marker { animation: ss-marker-flash 8s infinite; }
    @keyframes ss-marker-flash {
      0%, 71% { opacity: 0.45; transform: scale(1); }
      75%, 82% { opacity: 1; transform: scale(1.5); }
      88%, 100% { opacity: 0.45; transform: scale(1); }
    }
    .scene-scheduled .server-extra { animation: ss-sched-box 8s infinite ease; }
    @keyframes ss-sched-box {
      0%, 71% { opacity: 0; transform: scale(0.55); }
      76%, 88% { opacity: 1; transform: scale(1); }
      94%, 100% { opacity: 0; transform: scale(0.55); }
    }

    /* ===== Predictive scene ===== */
    .ss-predict-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .ss-predict-forecast { stroke: var(--accent); stroke-dasharray: 4 3; transform-box: fill-box; transform-origin: center; }
    .ss-predict-actual { stroke: var(--ink-soft); transform-box: fill-box; transform-origin: center; }
    .scene-predictive .ss-predict-forecast { animation: ss-predict-forecast 6s infinite ease; }
    .scene-predictive .ss-predict-actual { animation: ss-predict-actual 6s infinite ease; }
    @keyframes ss-predict-forecast {
      0%, 12% { opacity: 0; transform: translateY(6px); }
      24%, 82% { opacity: 1; transform: translateY(0); }
      92%, 100% { opacity: 0; transform: translateY(6px); }
    }
    @keyframes ss-predict-actual {
      0%, 38% { opacity: 0; transform: translateY(6px); }
      48%, 86% { opacity: 1; transform: translateY(0); }
      95%, 100% { opacity: 0; transform: translateY(6px); }
    }
    .ss-predict-spark { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: ss-spark-pulse 1.3s ease-in-out infinite alternate; }
    @keyframes ss-spark-pulse { from { opacity: 0.4; transform: scale(0.8); } to { opacity: 1; transform: scale(1.15); } }
    .scene-predictive .server-extra.e1 { animation: ss-predict-e1 6s infinite ease; }
    .scene-predictive .server-extra.e2 { animation: ss-predict-e2 6s infinite ease; }
    @keyframes ss-predict-e1 {
      0%, 20% { opacity: 0; transform: scale(0.55); }
      28%, 82% { opacity: 1; transform: scale(1); }
      92%, 100% { opacity: 0; transform: scale(0.55); }
    }
    @keyframes ss-predict-e2 {
      0%, 44% { opacity: 0; transform: scale(0.55); }
      52%, 82% { opacity: 1; transform: scale(1); }
      92%, 100% { opacity: 0; transform: scale(0.55); }
    }

    @media (prefers-reduced-motion: reduce) {
      .infographic-scalestrat * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    }
  </style>

  <div class="ss-eyebrow">Auto Scaling Strategies</div>

  <div class="ss-stage">
    <svg class="ss-svg" viewBox="0 0 320 170">

      <!-- ============ MANUAL ============ -->
      <g class="scene scene-manual is-active" data-scene="manual">
        <rect class="ss-manual-stepper" x="18" y="60" width="104" height="40" rx="8"/>
        <rect class="ss-manual-btn" x="24" y="70" width="20" height="20" rx="4"/>
        <text class="ss-manual-glyph" x="34" y="81">–</text>
        <rect class="ss-manual-btn plus" x="96" y="70" width="20" height="20" rx="4"/>
        <text class="ss-manual-glyph" x="106" y="81">+</text>
        <text class="ss-manual-count ss-manual-num-one" x="70" y="81">1</text>
        <text class="ss-manual-count ss-manual-num-two" x="70" y="81">2</text>

        <g class="ss-manual-cursor">
          <path d="M62 24 L62 46 L68 41 L73 50 L78 47 L73 38 L80 38 Z"/>
        </g>

        <!-- servers -->
        <g class="server-box"><rect x="194" y="100" width="50" height="32" rx="4"/><line class="rack-line" x1="200" y1="110" x2="238" y2="110"/><line class="rack-line" x1="200" y1="120" x2="238" y2="120"/></g>
        <g class="server-extra"><rect class="server-box" x="254" y="100" width="50" height="32" rx="4"/><line class="rack-line" x1="260" y1="110" x2="298" y2="110"/><line class="rack-line" x1="260" y1="120" x2="298" y2="120"/></g>
      </g>

      <!-- ============ STEP ============ -->
      <g class="scene scene-step" data-scene="step">
        <line class="ss-step-threshold" x1="20" y1="70" x2="120" y2="70"/>
        <line class="ss-step-threshold" x1="20" y1="110" x2="120" y2="110"/>
        <rect class="ss-step-bar" x="60" y="116" width="26" height="14" rx="2"/>
        <line x1="20" y1="130" x2="120" y2="130" stroke="var(--line)" stroke-width="1.5"/>

        <g class="ss-step-bell">
          <path d="M96 22 C96 16 106 16 106 22 L106 32 L110 36 L92 36 L96 32 Z"/>
          <circle cx="101" cy="39" r="2"/>
        </g>

        <g class="server-box"><rect x="194" y="100" width="50" height="32" rx="4"/><line class="rack-line" x1="200" y1="110" x2="238" y2="110"/><line class="rack-line" x1="200" y1="120" x2="238" y2="120"/></g>
        <g class="server-box"><rect x="254" y="100" width="50" height="32" rx="4"/><line class="rack-line" x1="260" y1="110" x2="298" y2="110"/><line class="rack-line" x1="260" y1="120" x2="298" y2="120"/></g>
        <g class="server-extra e1"><rect class="server-box" x="194" y="60" width="50" height="32" rx="4"/><line class="rack-line" x1="200" y1="70" x2="238" y2="70"/><line class="rack-line" x1="200" y1="80" x2="238" y2="80"/></g>
        <g class="server-extra e2"><rect class="server-box" x="254" y="60" width="50" height="32" rx="4"/><line class="rack-line" x1="260" y1="70" x2="298" y2="70"/><line class="rack-line" x1="260" y1="80" x2="298" y2="80"/></g>
      </g>

      <!-- ============ TARGET TRACKING ============ -->
      <g class="scene scene-target" data-scene="target">
        <circle class="ss-target-ring" cx="66" cy="80" r="42"/>
        <path class="ss-target-arc" d="M 66 38 A 42 42 0 0 1 100 100" />
        <line class="ss-target-needle" x1="66" y1="80" x2="30" y2="80"/>
        <circle cx="66" cy="80" r="4" fill="var(--ink)"/>

        <g class="server-box"><rect x="194" y="100" width="50" height="32" rx="4"/><line class="rack-line" x1="200" y1="110" x2="238" y2="110"/><line class="rack-line" x1="200" y1="120" x2="238" y2="120"/></g>
        <g class="server-box"><rect x="254" y="100" width="50" height="32" rx="4"/><line class="rack-line" x1="260" y1="110" x2="298" y2="110"/><line class="rack-line" x1="260" y1="120" x2="298" y2="120"/></g>
        <g class="server-extra"><rect class="server-box" x="224" y="60" width="50" height="32" rx="4"/><line class="rack-line" x1="230" y1="70" x2="268" y2="70"/><line class="rack-line" x1="230" y1="80" x2="268" y2="80"/></g>
      </g>

      <!-- ============ SCHEDULED ============ -->
      <g class="scene scene-scheduled" data-scene="scheduled">
        <circle class="ss-sched-face" cx="66" cy="80" r="42"/>
        <line class="ss-sched-tick" x1="66" y1="42" x2="66" y2="48"/>
        <line class="ss-sched-tick" x1="66" y1="112" x2="66" y2="118"/>
        <line class="ss-sched-tick" x1="28" y1="80" x2="34" y2="80"/>
        <line class="ss-sched-tick" x1="98" y1="80" x2="104" y2="80"/>
        <circle class="ss-sched-marker" cx="37" cy="109" r="4"/>
        <line class="ss-sched-hand" x1="66" y1="80" x2="66" y2="46"/>
        <circle cx="66" cy="80" r="3.5" fill="var(--ink)"/>

        <g class="server-box"><rect x="194" y="100" width="50" height="32" rx="4"/><line class="rack-line" x1="200" y1="110" x2="238" y2="110"/><line class="rack-line" x1="200" y1="120" x2="238" y2="120"/></g>
        <g class="server-box"><rect x="254" y="100" width="50" height="32" rx="4"/><line class="rack-line" x1="260" y1="110" x2="298" y2="110"/><line class="rack-line" x1="260" y1="120" x2="298" y2="120"/></g>
        <g class="server-extra"><rect class="server-box" x="194" y="60" width="50" height="32" rx="4"/><line class="rack-line" x1="200" y1="70" x2="238" y2="70"/><line class="rack-line" x1="200" y1="80" x2="238" y2="80"/></g>
        <g class="server-extra"><rect class="server-box" x="254" y="60" width="50" height="32" rx="4"/><line class="rack-line" x1="260" y1="70" x2="298" y2="70"/><line class="rack-line" x1="260" y1="80" x2="298" y2="80"/></g>
        <g class="server-extra"><rect class="server-box" x="224" y="22" width="50" height="32" rx="4"/><line class="rack-line" x1="230" y1="32" x2="268" y2="32"/><line class="rack-line" x1="230" y1="42" x2="268" y2="42"/></g>
      </g>

      <!-- ============ PREDICTIVE ============ -->
      <g class="scene scene-predictive" data-scene="predictive">
        <path class="ss-predict-line ss-predict-forecast" d="M20 118 L44 108 L58 70 L76 82 L92 38 L112 46"/>
        <path class="ss-predict-line ss-predict-actual" d="M20 122 L44 116 L58 96 L76 100 L92 66 L112 60"/>
        <line x1="20" y1="130" x2="120" y2="130" stroke="var(--line)" stroke-width="1.5"/>
        <path class="ss-predict-spark" d="M100 20 L102 26 L108 28 L102 30 L100 36 L98 30 L92 28 L98 26 Z"/>

        <g class="server-box"><rect x="194" y="100" width="50" height="32" rx="4"/><line class="rack-line" x1="200" y1="110" x2="238" y2="110"/><line class="rack-line" x1="200" y1="120" x2="238" y2="120"/></g>
        <g class="server-box"><rect x="254" y="100" width="50" height="32" rx="4"/><line class="rack-line" x1="260" y1="110" x2="298" y2="110"/><line class="rack-line" x1="260" y1="120" x2="298" y2="120"/></g>
        <g class="server-extra e1"><rect class="server-box" x="194" y="60" width="50" height="32" rx="4"/><line class="rack-line" x1="200" y1="70" x2="238" y2="70"/><line class="rack-line" x1="200" y1="80" x2="238" y2="80"/></g>
        <g class="server-extra e2"><rect class="server-box" x="254" y="60" width="50" height="32" rx="4"/><line class="rack-line" x1="260" y1="70" x2="298" y2="70"/><line class="rack-line" x1="260" y1="80" x2="298" y2="80"/></g>
      </g>

    </svg>
  </div>

  <div class="ss-caption">
    <span class="ss-tag" hidden></span>
    <p class="ss-caption-text"></p>
  </div>

  <div class="ss-tabs" role="tablist">
    <button class="ss-tab is-active" type="button" data-scene="manual" aria-pressed="true"><span class="ico" aria-hidden="true">🖐️</span>Manual</button>
    <button class="ss-tab" type="button" data-scene="step" aria-pressed="false"><span class="ico" aria-hidden="true">⚡</span>Step</button>
    <button class="ss-tab" type="button" data-scene="target" aria-pressed="false"><span class="ico" aria-hidden="true">🎯</span>Target Tracking</button>
    <button class="ss-tab" type="button" data-scene="scheduled" aria-pressed="false"><span class="ico" aria-hidden="true">📅</span>Scheduled</button>
    <button class="ss-tab" type="button" data-scene="predictive" aria-pressed="false"><span class="ico" aria-hidden="true">🤖</span>Predictive</button>
  </div>

  <script>
    (function () {
      var wrapper = document.currentScript.closest('.infographic-scalestrat')
        || document.querySelector('.infographic-scalestrat');

      // dark mode detection
      var bodyAttr = document.body.getAttribute('data-darkmode');
      var dark;
      if (bodyAttr === 'true') {
        dark = true;
      } else if (bodyAttr === 'false') {
        dark = false;
      } else {
        var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
        dark = match ? match[1] === 'true' : false;
      }
      if (dark) wrapper.setAttribute('data-theme', 'dark');

      var data = {
        manual:     { caption: 'You bump capacity by hand — no automation, best for testing.', tag: null },
        step:       { caption: 'A CloudWatch alarm crosses a threshold, so a fixed action fires.', tag: null },
        target:     { caption: 'Keeps a metric at a set value — like a thermostat holding temperature.', tag: 'Most common' },
        scheduled:  { caption: 'Scales at a known time — sales events, business hours, game day.', tag: null },
        predictive: { caption: 'Forecasts demand from history and scales ahead of the spike.', tag: 'Advanced' }
      };

      var tabs = Array.prototype.slice.call(wrapper.querySelectorAll('.ss-tab'));
      var scenes = Array.prototype.slice.call(wrapper.querySelectorAll('.scene'));
      var captionText = wrapper.querySelector('.ss-caption-text');
      var tagEl = wrapper.querySelector('.ss-tag');

      function activate(name) {
        tabs.forEach(function (t) {
          var on = t.getAttribute('data-scene') === name;
          t.classList.toggle('is-active', on);
          t.setAttribute('aria-pressed', String(on));
        });
        scenes.forEach(function (s) {
          s.classList.toggle('is-active', s.getAttribute('data-scene') === name);
        });
        var d = data[name];
        captionText.textContent = d.caption;
        if (d.tag) {
          tagEl.textContent = d.tag;
          tagEl.hidden = false;
        } else {
          tagEl.hidden = true;
        }
      }

      tabs.forEach(function (t) {
        t.addEventListener('click', function () {
          activate(t.getAttribute('data-scene'));
        });
      });

      activate('manual');
    })();
  </script>
</div>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});

1. Manual Scaling

You change the desired capacity yourself (e.g., 1 → 2 instances).

Use for: testing 🧪, small environments
Limitation: ❌ no automation — someone has to act every time

2. Simple / Step Scaling ⚡

CloudWatch alarms 🚨 trigger a fixed action.

Example: CPU > 70% → add 2 instances ➕➕; CPU < 30% → remove 1 ➖
You define the condition and the response
Best for: clear, well-understood thresholds

3. Target Tracking Scaling 🎯 (most important)

You set a target value for a metric, and the ASG keeps it there automatically — adding instances when the metric rises, removing them when it falls.

Example: target CPU = 40%
Think of it like a thermostat 🌡️: it just holds the temperature steady
🔥 Exam tip: this is the easiest and most commonly used policy

4. Scheduled Scaling 📅

Scale up or down at known times.

Example: scale to 10 instances every Friday at 5 PM
Use for: predictable spikes — sales events 🛒, sports events ⚽, business hours 🏢

5. Predictive Scaling 🤖 (advanced)

Uses machine learning to forecast demand from historical traffic 📈 and scales ahead of the spike 🔮, not after it.

Example: daily 6 PM spike → instances added before 6 PM
🔥 Exam tip: keyword is "machine learning + forecasting"

⚖️ Comparison

Strategy	Type	Trigger	Best Use
🖐️ Manual	Manual	User action	Testing
⚡ Simple/Step	Dynamic	CloudWatch alarm 🚨	Threshold-based
🎯 Target Tracking	Dynamic	Metric target	Most common
📅 Scheduled	Time-based	Known schedule	Predictable traffic
🤖 Predictive	ML-based	Forecasting	Advanced automation

🧠 Quick recall

🖐️ Manual → you're in control
🚨 Step → if X, then Y
🌡️ Target Tracking → keeps things steady
📅 Scheduled → time-based
🔮 Predictive → forecasts the future