A penguin about to deadlift, built by Ling 3.1 Flash

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Powerlifting Penguin 🐧</title>
<style>
  :root { color-scheme: dark; }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(1200px 700px at 50% -10%, #1d2733, #0d1117 70%);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  .card { text-align: center; max-width: 920px; }
  h1 { margin: 0 0 4px; font-size: clamp(1.4rem, 3vw, 2rem); color: #f1f5f9; letter-spacing: .02em; }
  .sub { margin: 0 0 14px; color: #94a3b8; font-size: .95rem; }
  svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
    background: #dfe7ee;
  }
  .hint { margin: 12px 0 0; color: #64748b; font-size: .8rem; }

  /* ---- SVG animations ---- */
  .rep { animation: rep 4.5s cubic-bezier(.45,.05,.35,1) infinite; }
  @keyframes rep {
    0%, 12%   { transform: translateY(0); }
    42%, 58%  { transform: translateY(-26px); }
    88%, 100% { transform: translateY(0); }
  }
  .puff { opacity: 0; animation: puff 4.5s ease-out infinite; }
  @keyframes puff {
    0%, 16%   { opacity: 0; transform: translateY(0); }
    28%       { opacity: .8; transform: translateY(-12px); }
    50%, 100% { opacity: 0; transform: translateY(-28px); }
  }
  .sh { transform-box: fill-box; transform-origin: center; animation: sh 4.5s cubic-bezier(.45,.05,.35,1) infinite; }
  @keyframes sh {
    0%, 12%   { opacity: var(--so, .25); transform: scaleX(1); }
    42%, 58%  { opacity: calc(var(--so, .25) * .5); transform: scaleX(.84); }
    88%, 100% { opacity: var(--so, .25); transform: scaleX(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .rep, .puff, .sh { animation: none; }
    .puff { opacity: 0; }
  }
</style>
</head>
<body>
  <main class="card">
    <h1>🐧 Penguin PR Day</h1>
    <p class="sub">At the power rack — belt on, chalk up, ready to deadlift.</p>

    <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="svgTitle svgDesc">
      <title id="svgTitle">Penguin ready to deadlift at a power rack</title>
      <desc id="svgDesc">A cartoon penguin wearing a lifting belt, headband and chalked flippers stands behind a loaded barbell on the gym floor, beside a power rack with stored plates, a motivational poster and a chalkboard.</desc>

      <defs>
        <linearGradient id="wallGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#e9eff5"/>
          <stop offset="1" stop-color="#ccd7e1"/>
        </linearGradient>
        <linearGradient id="floorGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#5d636d"/>
          <stop offset="1" stop-color="#43484f"/>
        </linearGradient>
        <linearGradient id="steelGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#57606e"/>
          <stop offset=".5" stop-color="#3d4550"/>
          <stop offset="1" stop-color="#2c333d"/>
        </linearGradient>
        <linearGradient id="barGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#e8ecf2"/>
          <stop offset=".45" stop-color="#aeb6c2"/>
          <stop offset="1" stop-color="#7c8492"/>
        </linearGradient>
        <radialGradient id="bodyGrad" cx=".35" cy=".28" r=".95">
          <stop offset="0" stop-color="#2e3a48"/>
          <stop offset="1" stop-color="#151d27"/>
        </radialGradient>
        <clipPath id="headClip"><circle cx="400" cy="218" r="42"/></clipPath>

        <!-- competition plates -->
        <g id="plate25">
          <circle r="78" fill="#d84545" stroke="#9e2f2f" stroke-width="5"/>
          <circle r="60" fill="none" stroke="#c03a3a" stroke-width="4"/>
          <circle r="15" fill="#c9ccd4" stroke="#8a8f98" stroke-width="3"/>
          <circle r="6" fill="#3a4149"/>
          <text x="0" y="31" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="bold" fill="#ffffff" opacity=".9">25</text>
        </g>
        <g id="plate20">
          <circle r="56" fill="#2f6fd0" stroke="#1f4f9e" stroke-width="4"/>
          <circle r="40" fill="none" stroke="#295fba" stroke-width="3"/>
          <circle r="12" fill="#c9ccd4" stroke="#8a8f98" stroke-width="3"/>
          <circle r="5" fill="#3a4149"/>
        </g>
        <g id="plate15">
          <circle r="36" fill="#eab308" stroke="#b8890a" stroke-width="4"/>
          <circle r="10" fill="#c9ccd4" stroke="#8a8f98" stroke-width="3"/>
          <circle r="4" fill="#3a4149"/>
        </g>
        <g id="plate10">
          <circle r="20" fill="#3d9e4d" stroke="#2c7a39" stroke-width="3"/>
          <circle r="7" fill="#c9ccd4" stroke="#8a8f98" stroke-width="2"/>
          <circle r="3" fill="#3a4149"/>
        </g>
      </defs>

      <!-- ============ GYM ROOM ============ -->
      <rect x="0" y="0" width="800" height="472" fill="url(#wallGrad)"/>
      <rect x="0" y="470" width="800" height="130" fill="url(#floorGrad)"/>
      <g stroke="#3a3f46" stroke-width="2" opacity=".55">
        <line x1="0" y1="540" x2="800" y2="540"/>
        <line x1="120" y1="472" x2="100" y2="600"/>
        <line x1="240" y1="472" x2="228" y2="600"/>
        <line x1="360" y1="472" x2="356" y2="600"/>
        <line x1="480" y1="472" x2="484" y2="600"/>
        <line x1="600" y1="472" x2="612" y2="600"/>
        <line x1="720" y1="472" x2="740" y2="600"/>
      </g>
      <ellipse cx="400" cy="562" rx="300" ry="42" fill="#ffffff" opacity=".04"/>
      <rect x="0" y="462" width="800" height="10" fill="#aeb8c2"/>

      <!-- poster -->
      <g>
        <rect x="30" y="70" width="112" height="150" rx="6" fill="#f4f6f8" stroke="#9aa1ac" stroke-width="2"/>
        <rect x="38" y="78" width="96" height="134" rx="3" fill="#f59e0b"/>
        <rect x="58" y="126" width="60" height="6" rx="3" fill="#20242b"/>
        <circle cx="56" cy="129" r="10" fill="#20242b"/>
        <circle cx="120" cy="129" r="10" fill="#20242b"/>
        <text x="86" y="162" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="13" font-weight="bold" fill="#20242b">DEADLIFT</text>
        <text x="86" y="178" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="13" font-weight="bold" fill="#20242b">CLUB</text>
        <text x="86" y="198" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="8" fill="#7c4a03">EST. 2024</text>
      </g>

      <!-- chalkboard -->
      <g>
        <rect x="662" y="64" width="128" height="108" rx="6" fill="#8b6b4a"/>
        <rect x="670" y="72" width="112" height="92" rx="3" fill="#33413a"/>
        <text x="726" y="96" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" font-weight="bold" fill="#e8f0ea">TODAY'S GOAL</text>
        <text x="726" y="124" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="17" font-weight="bold" fill="#ffffff">225 kg</text>
        <text x="726" y="145" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#cfe0d4">x 3 reps</text>
        <path d="M 698 153 L 754 153" stroke="#ffffff" stroke-width="2" opacity=".6" stroke-linecap="round"/>
      </g>

      <!-- ============ POWER RACK ============ -->
      <g id="rack">
        <rect x="132" y="458" width="36" height="16" rx="4" fill="#2c333d"/>
        <rect x="632" y="458" width="36" height="16" rx="4" fill="#2c333d"/>
        <rect x="142" y="120" width="16" height="344" rx="3" fill="url(#steelGrad)" stroke="#1f252d" stroke-width="2"/>
        <rect x="642" y="120" width="16" height="344" rx="3" fill="url(#steelGrad)" stroke="#1f252d" stroke-width="2"/>
        <rect x="142" y="106" width="516" height="16" rx="4" fill="url(#steelGrad)" stroke="#1f252d" stroke-width="2"/>
        <!-- hole columns -->
        <line x1="150" y1="148" x2="150" y2="452" stroke="#181d24" stroke-width="5" stroke-dasharray="0.1 19.9" stroke-linecap="round"/>
        <line x1="650" y1="148" x2="650" y2="452" stroke="#181d24" stroke-width="5" stroke-dasharray="0.1 19.9" stroke-linecap="round"/>
        <!-- nameplate -->
        <rect x="368" y="109" width="64" height="10" rx="2" fill="#c8ccd4" stroke="#8a8f98"/>
        <text x="400" y="116.5" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="6" fill="#333a44">PENGUIN GYM</text>
        <!-- safety arms -->
        <rect x="156" y="298" width="142" height="11" rx="4" fill="url(#steelGrad)" stroke="#1f252d" stroke-width="1.5"/>
        <rect x="502" y="298" width="142" height="11" rx="4" fill="url(#steelGrad)" stroke="#1f252d" stroke-width="1.5"/>
        <!-- storage pegs + stored plates -->
        <rect x="156" y="404" width="64" height="9" rx="3" fill="#2c333d"/>
        <rect x="580" y="404" width="64" height="9" rx="3" fill="#2c333d"/>
        <use href="#plate20" transform="translate(212 392) scale(.42)"/>
        <use href="#plate15" transform="translate(222 396) scale(.42)"/>
        <use href="#plate20" transform="translate(588 392) scale(.42)"/>
        <use href="#plate15" transform="translate(578 396) scale(.42)"/>
      </g>

      <!-- bar resting in the rack -->
      <g id="rackedBar">
        <rect x="140" y="166" width="22" height="12" rx="3" fill="#2c333d"/>
        <rect x="638" y="166" width="22" height="12" rx="3" fill="#2c333d"/>
        <rect x="118" y="171" width="564" height="9" rx="4.5" fill="url(#barGrad)" stroke="#6b7280"/>
        <use href="#plate25" transform="translate(244 175.5) scale(.68)"/>
        <use href="#plate20" transform="translate(256 175.5) scale(.68)"/>
        <use href="#plate15" transform="translate(266 175.5) scale(.68)"/>
        <use href="#plate25" transform="translate(556 175.5) scale(.68)"/>
        <use href="#plate20" transform="translate(544 175.5) scale(.68)"/>
        <use href="#plate15" transform="translate(534 175.5) scale(.68)"/>
        <rect x="276" y="169" width="10" height="13" fill="#20242b"/>
        <rect x="514" y="169" width="10" height="13" fill="#20242b"/>
      </g>

      <!-- rack shadows -->
      <ellipse cx="150" cy="476" rx="26" ry="6" fill="#000000" opacity=".18"/>
      <ellipse cx="650" cy="476" rx="26" ry="6" fill="#000000" opacity=".18"/>

      <!-- ============ PENGUIN ============ -->
      <g id="lifter" class="rep">
        <!-- feet -->
        <ellipse cx="370" cy="468" rx="21" ry="10" fill="#f6a623" stroke="#d97706" stroke-width="2" transform="rotate(-8 370 468)"/>
        <ellipse cx="430" cy="468" rx="21" ry="10" fill="#f6a623" stroke="#d97706" stroke-width="2" transform="rotate(8 430 468)"/>
        <!-- body -->
        <ellipse cx="400" cy="345" rx="70" ry="112" fill="url(#bodyGrad)" stroke="#0e141b" stroke-width="2"/>
        <!-- belly -->
        <ellipse cx="400" cy="356" rx="47" ry="84" fill="#f8fafc"/>
        <!-- belt -->
        <path d="M 347 404 Q 400 432 453 404" fill="none" stroke="#20242b" stroke-width="22" stroke-linecap="round"/>
        <rect x="390" y="414" width="20" height="16" rx="3" fill="#d7dbe2" stroke="#9aa1ac" stroke-width="1.5"/>
        <rect x="395" y="418" width="10" height="8" fill="#20242b"/>
        <!-- head -->
        <circle cx="400" cy="218" r="42" fill="url(#bodyGrad)" stroke="#0e141b" stroke-width="2"/>
        <g clip-path="url(#headClip)">
          <rect x="356" y="184" width="88" height="12" fill="#f6a623"/>
          <rect x="356" y="184" width="88" height="3" fill="#d97706" opacity=".7"/>
        </g>
        <!-- face -->
        <ellipse cx="383" cy="216" rx="15" ry="19" fill="#f8fafc"/>
        <ellipse cx="417" cy="216" rx="15" ry="19" fill="#f8fafc"/>
        <circle cx="383" cy="212" r="7.5" fill="#ffffff" stroke="#0e141b" stroke-width="1.5"/>
        <circle cx="417" cy="212" r="7.5" fill="#ffffff" stroke="#0e141b" stroke-width="1.5"/>
        <circle cx="384" cy="214" r="3.4" fill="#0e141b"/>
        <circle cx="416" cy="214" r="3.4" fill="#0e141b"/>
        <circle cx="385.3" cy="212.7" r="1.1" fill="#ffffff"/>
        <circle cx="417.3" cy="212.7" r="1.1" fill="#ffffff"/>
        <path d="M 371 197 L 393 202" stroke="#0e141b" stroke-width="4.5" stroke-linecap="round"/>
        <path d="M 407 202 L 429 197" stroke="#0e141b" stroke-width="4.5" stroke-linecap="round"/>
        <path d="M 390 231 Q 400 235 410 231 Q 405 245 400 247 Q 395 245 390 231 Z" fill="#f6a623" stroke="#d97706" stroke-width="1.5" stroke-linejoin="round"/>
        <path d="M 394 233 Q 400 236 406 233 Q 403 240 400 241 Q 397 240 394 233 Z" fill="#b45309"/>
      </g>

      <!-- ============ BARBELL ON THE FLOOR ============ -->
      <g id="barbell" class="rep">
        <rect x="100" y="390" width="70" height="14" rx="7" fill="url(#barGrad)" stroke="#6b7280"/>
        <rect x="630" y="390" width="70" height="14" rx="7" fill="url(#barGrad)" stroke="#6b7280"/>
        <rect x="100" y="392" width="600" height="10" rx="5" fill="url(#barGrad)" stroke="#6b7280"/>
        <use href="#plate25" x="220" y="397"/>
        <use href="#plate20" x="232" y="397"/>
        <use href="#plate15" x="243" y="397"/>
        <use href="#plate10" x="253" y="397"/>
        <use href="#plate25" x="580" y="397"/>
        <use href="#plate20" x="568" y="397"/>
        <use href="#plate15" x="557" y="397"/>
        <use href="#plate10" x="547" y="397"/>
        <rect x="272" y="387" width="12" height="20" rx="2" fill="#20242b" stroke="#10141a"/>
        <rect x="516" y="387" width="12" height="20" rx="2" fill="#20242b" stroke="#10141a"/>
      </g>

      <!-- gripping flippers (over the bar) -->
      <g id="grip" class="rep">
        <path d="M 350 288 Q 326 330 338 384 Q 341 397 353 393 Q 358 390 356 381 Q 349 328 366 294 Q 358 287 350 288 Z" fill="#1a232d" stroke="#0e141b" stroke-width="2" stroke-linejoin="round"/>
        <path d="M 450 288 Q 474 330 462 384 Q 459 397 447 393 Q 442 390 444 381 Q 451 328 434 294 Q 442 287 450 288 Z" fill="#1a232d" stroke="#0e141b" stroke-width="2" stroke-linejoin="round"/>
        <g fill="#ffffff" opacity=".85">
          <circle cx="349" cy="388" r="2"/><circle cx="343" cy="380" r="1.6"/><circle cx="356" cy="394" r="1.4"/>
          <circle cx="451" cy="388" r="2"/><circle cx="457" cy="380" r="1.6"/><circle cx="444" cy="394" r="1.4"/>
        </g>
      </g>

      <!-- chalk bowl + spill -->
      <g>
        <path d="M 252 442 L 292 442 L 287 474 L 257 474 Z" fill="#7c8694" stroke="#5b636d" stroke-width="2"/>
        <ellipse cx="272" cy="442" rx="20" ry="5" fill="#ffffff"/>
        <ellipse cx="272" cy="442" rx="14" ry="3.2" fill="#e8edf2"/>
        <ellipse cx="305" cy="476" rx="12" ry="2.5" fill="#ffffff" opacity=".45"/>
        <circle cx="318" cy="478" r="2" fill="#ffffff" opacity=".4"/>
      </g>

      <!-- water bottle -->
      <g>
        <rect x="600" y="452" width="20" height="28" rx="5" fill="#3b82f6" stroke="#1d4ed8" stroke-width="2"/>
        <rect x="604" y="444" width="12" height="9" rx="2" fill="#1d4ed8"/>
        <rect x="603" y="462" width="14" height="8" fill="#dbeafe" opacity=".8"/>
      </g>

      <!-- scattered plates -->
      <use href="#plate15" transform="translate(90 484) scale(.4)"/>
      <use href="#plate10" transform="translate(120 490) scale(.3)"/>
      <use href="#plate20" transform="translate(716 488) scale(.3)"/>
      <use href="#plate10" transform="translate(742 492) scale(.35)"/>

      <!-- animated shadows -->
      <ellipse class="sh" style="--so:.22" cx="400" cy="481" rx="102" ry="11" fill="#000000" opacity=".22"/>
      <ellipse class="sh" style="--so:.28" cx="225" cy="478" rx="88" ry="9" fill="#000000" opacity=".28"/>
      <ellipse class="sh" style="--so:.28" cx="575" cy="478" rx="88" ry="9" fill="#000000" opacity=".28"/>

      <!-- chalk puff + effort lines while pulling -->
      <g class="puff" fill="#ffffff">
        <circle cx="368" cy="398" r="5"/>
        <circle cx="400" cy="404" r="6"/>
        <circle cx="432" cy="398" r="5"/>
        <circle cx="384" cy="410" r="4"/>
        <circle cx="416" cy="410" r="4"/>
      </g>
      <g class="puff" stroke="#ffffff" stroke-width="3" stroke-linecap="round" fill="none">
        <path d="M 322 358 L 311 354"/>
        <path d="M 326 372 L 314 372"/>
        <path d="M 322 386 L 311 390"/>
        <path d="M 478 358 L 489 354"/>
        <path d="M 474 372 L 486 372"/>
        <path d="M 478 386 L 489 390"/>
      </g>
    </svg>

    <p class="hint">Watch the little guy pull 225 kg for a triple.</p>
  </main>
</body>
</html>