Showcase

A penguin about to deadlift, built by Claude Haiku 5.5

Hostedvia Claude CodeOpenRouter
Running live in your browserNew tab
Show the code the model wrote
HTML7,906 characters
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Penguin ready to deadlift</title>
<style>
  html, body { margin: 0; height: 100%; background: #0b0d12; }
  body { display: grid; place-items: center; padding: 16px; box-sizing: border-box; }
  svg { width: 100%; max-width: 1200px; height: auto; display: block; border-radius: 12px; }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" role="img" aria-labelledby="t d">
  <title id="t">Penguin ready to deadlift at the power rack</title>
  <desc id="d">A penguin in a lifting belt stands at a powerlifting rack, bent over a loaded barbell with its flippers gripping the bar, ready to pull.</desc>

  <defs>
    <radialGradient id="spot" gradientUnits="userSpaceOnUse" cx="600" cy="400" r="460">
      <stop offset="0" stop-color="#5b6478" stop-opacity="0.6"/>
      <stop offset="1" stop-color="#5b6478" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#1d2230"/>
      <stop offset="1" stop-color="#10131a"/>
    </linearGradient>
    <linearGradient id="steel" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#374151"/>
      <stop offset="0.5" stop-color="#9ca3af"/>
      <stop offset="1" stop-color="#374151"/>
    </linearGradient>
    <linearGradient id="chrome" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f3f4f6"/>
      <stop offset="0.45" stop-color="#9ca3af"/>
      <stop offset="1" stop-color="#4b5563"/>
    </linearGradient>
    <pattern id="holes" width="28" height="30" patternUnits="userSpaceOnUse">
      <circle cx="14" cy="15" r="3.5" fill="#0b0d11"/>
    </pattern>

    <!-- Left flipper with a red wrist wrap; mirrored for the right side -->
    <g id="flipper">
      <path d="M478,362 C466,420 458,520 462,604 C463,624 484,632 494,616 C500,540 508,450 516,366 C505,356 488,356 478,362 Z" fill="#161a22"/>
      <path d="M461,594 Q478,590 499,594" stroke="#ef4444" stroke-width="9" fill="none"/>
    </g>

    <!-- Sweat drop; mirrored for the other side -->
    <path id="drop" d="M744,300 C750,310 756,318 756,326 A12,12 0 0 1 732,326 C732,318 738,310 744,300 Z"/>
  </defs>

  <!-- Gym wall and spotlight -->
  <rect width="1200" height="800" fill="url(#wall)"/>
  <rect width="1200" height="800" fill="url(#spot)"/>

  <!-- Floor -->
  <rect y="710" width="1200" height="90" fill="#171a21"/>
  <rect y="710" width="1200" height="3" fill="#3f4654"/>

  <!-- Power rack -->
  <rect x="140" y="126" width="924" height="12" rx="4" fill="url(#steel)"/>
  <rect x="140" y="126" width="28" height="584" rx="3" fill="url(#steel)"/>
  <rect x="140" y="126" width="28" height="584" fill="url(#holes)"/>
  <rect x="1036" y="126" width="28" height="584" rx="3" fill="url(#steel)"/>
  <rect x="1036" y="126" width="28" height="584" fill="url(#holes)"/>
  <rect x="112" y="698" width="84" height="12" rx="3" fill="#111827"/>
  <rect x="1008" y="698" width="84" height="12" rx="3" fill="#111827"/>

  <!-- Rack: barbell resting on J-hooks, safety pins -->
  <rect x="168" y="314" width="16" height="30" rx="4" fill="#6b7280"/>
  <rect x="1016" y="314" width="16" height="30" rx="4" fill="#6b7280"/>
  <rect x="168" y="322" width="864" height="10" rx="4" fill="url(#chrome)"/>
  <rect x="168" y="516" width="96" height="8" rx="3" fill="url(#chrome)"/>
  <rect x="936" y="516" width="96" height="8" rx="3" fill="url(#chrome)"/>

  <!-- Penguin: legs, feet, body -->
  <rect x="506" y="560" width="40" height="150" rx="18" fill="#161a22"/>
  <rect x="654" y="560" width="40" height="150" rx="18" fill="#161a22"/>
  <ellipse cx="520" cy="698" rx="52" ry="12" transform="rotate(-8 520 698)" fill="#f59e0b"/>
  <ellipse cx="680" cy="698" rx="52" ry="12" transform="rotate(8 680 698)" fill="#f59e0b"/>
  <path d="M600,238 C676,238 722,292 724,372 C726,450 738,540 706,596 C684,622 640,626 600,626 C560,626 516,622 494,596 C462,540 474,450 476,372 C478,292 524,238 600,238 Z" fill="#161a22"/>
  <path d="M600,262 C648,262 668,300 668,340 C668,402 688,446 690,512 C692,570 652,600 600,600 C548,600 508,570 510,512 C512,446 532,402 532,340 C532,300 552,262 600,262 Z" fill="#f8fafc"/>

  <!-- Lifting belt -->
  <path d="M478,546 Q600,558 722,546 L716,584 Q600,596 484,584 Z" fill="#7a4a22"/>
  <path d="M486,556 Q600,568 714,556 M490,576 Q600,588 710,576" stroke="#d6b48a" stroke-width="2" stroke-dasharray="6 5" fill="none"/>
  <rect x="570" y="550" width="60" height="38" rx="6" fill="none" stroke="#d1d5db" stroke-width="5"/>

  <!-- Flippers hanging to the bar -->
  <use href="#flipper"/>
  <use href="#flipper" transform="matrix(-1 0 0 1 1200 0)"/>

  <!-- Face: focused, furrowed brow -->
  <circle cx="574" cy="332" r="13" fill="#0b0d11"/>
  <circle cx="626" cy="332" r="13" fill="#0b0d11"/>
  <circle cx="578" cy="327" r="4" fill="#ffffff"/>
  <circle cx="630" cy="327" r="4" fill="#ffffff"/>
  <path d="M554,300 L590,312 M646,300 L610,312" stroke="#0b0d11" stroke-width="7" stroke-linecap="round"/>
  <path d="M584,352 Q600,344 616,352 Q612,374 600,382 Q588,374 584,352 Z" fill="#f59e0b" stroke="#b45309" stroke-width="2" stroke-linejoin="round"/>

  <!-- Sweat -->
  <use href="#drop" fill="#60a5fa"/>
  <use href="#drop" fill="#60a5fa" transform="matrix(-1 0 0 1 1200 0)"/>

  <!-- Deadlift bar on the floor, sleeves and plates -->
  <rect x="120" y="617" width="960" height="16" rx="3" fill="url(#chrome)"/>
  <rect x="420" y="617" width="360" height="16" fill="#4b5563" opacity="0.35"/>

  <rect x="150" y="540" width="36" height="170" rx="6" fill="#dc2626"/>
  <rect x="154" y="548" width="4" height="154" fill="#ffffff" opacity="0.22"/>
  <rect x="190" y="540" width="32" height="170" rx="6" fill="#2563eb"/>
  <rect x="194" y="548" width="4" height="154" fill="#ffffff" opacity="0.22"/>
  <rect x="226" y="540" width="26" height="170" rx="6" fill="#16a34a"/>
  <rect x="230" y="548" width="4" height="154" fill="#ffffff" opacity="0.22"/>
  <rect x="256" y="610" width="12" height="30" rx="2" fill="#9ca3af"/>

  <rect x="1014" y="540" width="36" height="170" rx="6" fill="#dc2626"/>
  <rect x="1042" y="548" width="4" height="154" fill="#ffffff" opacity="0.22"/>
  <rect x="978" y="540" width="32" height="170" rx="6" fill="#2563eb"/>
  <rect x="1006" y="548" width="4" height="154" fill="#ffffff" opacity="0.22"/>
  <rect x="948" y="540" width="26" height="170" rx="6" fill="#16a34a"/>
  <rect x="966" y="548" width="4" height="154" fill="#ffffff" opacity="0.22"/>
  <rect x="932" y="610" width="12" height="30" rx="2" fill="#9ca3af"/>

  <g font-family="system-ui, -apple-system, sans-serif" font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">
    <text transform="translate(168 625) rotate(-90)" font-size="20">25</text>
    <text transform="translate(206 625) rotate(-90)" font-size="18">20</text>
    <text transform="translate(239 625) rotate(-90)" font-size="15">10</text>
    <text transform="translate(1032 625) rotate(-90)" font-size="20">25</text>
    <text transform="translate(994 625) rotate(-90)" font-size="18">20</text>
    <text transform="translate(961 625) rotate(-90)" font-size="15">10</text>
  </g>

  <!-- Hands gripping the bar, with chalk -->
  <g fill="#f8fafc" opacity="0.2">
    <circle cx="458" cy="606" r="11"/>
    <circle cx="500" cy="602" r="9"/>
    <circle cx="700" cy="602" r="9"/>
    <circle cx="742" cy="606" r="11"/>
  </g>
  <ellipse cx="478" cy="624" rx="20" ry="15" fill="#0b0d11"/>
  <ellipse cx="722" cy="624" rx="20" ry="15" fill="#0b0d11"/>

  <!-- Chalk bucket -->
  <rect x="1112" y="622" width="62" height="88" rx="8" fill="#cbd5e1"/>
  <rect x="1108" y="612" width="70" height="12" rx="4" fill="#64748b"/>
  <ellipse cx="1143" cy="610" rx="30" ry="5" fill="#f8fafc" opacity="0.7"/>
</svg>
</body>
</html>

Same prompt, other models

5 more
Compare side by side

One email when a new model lands on the board or in the showcase. Unsubscribe anytime.