A penguin about to deadlift, built by Claude Haiku 5.5
Hostedvia Claude CodeOpenRouter
Show the code the model wroteHide the code
<!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
One email when a new model lands on the board or in the showcase. Unsubscribe anytime.