A penguin about to deadlift, built by MiniMax M3.1 Flash
Hostedvia OpenCodeOpenRouter
190tok/s
First token included
54.6Ktokens
4m 47s
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 at the Powerlifting Rack — Ready to Deadlift</title>
<style>
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
padding: 28px 16px;
background:
radial-gradient(1100px 620px at 50% 8%, #212838 0%, #12161f 55%, #080a10 100%);
font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.wrap { width: min(1080px, 96vw); }
.frame {
border-radius: 22px;
overflow: hidden;
background: #0d1119;
box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08),
0 0 0 8px rgba(255,255,255,.02);
}
svg { display: block; width: 100%; height: auto; }
header {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin: 0 4px 12px;
}
h1 {
margin: 0; font-size: clamp(18px, 2.4vw, 26px); font-weight: 800;
letter-spacing: .04em; text-transform: uppercase; color: #f2f5fa;
}
h1 span { color: #ffb02e; }
.tag {
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
color: #7f8ba3; border: 1px solid #262d3c; border-radius: 999px; padding: 6px 12px;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<h1>Penguin at the <span>Powerlifting Rack</span></h1>
<div class="tag">Ready to Deadlift</div>
</header>
<div class="frame">
<svg viewBox="0 0 1000 700" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="A cartoon penguin stands inside a powerlifting rack gripping a loaded barbell, ready to deadlift.">
<defs>
<linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#232a3a"/>
<stop offset="1" stop-color="#141926"/>
</linearGradient>
<linearGradient id="floor" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#2b3243"/>
<stop offset="1" stop-color="#171c28"/>
</linearGradient>
<linearGradient id="steel" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#3c4457"/>
<stop offset=".22" stop-color="#8a94ab"/>
<stop offset=".5" stop-color="#5a6379"/>
<stop offset=".78" stop-color="#98a3ba"/>
<stop offset="1" stop-color="#394154"/>
</linearGradient>
<linearGradient id="steelV" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#9aa5bd"/>
<stop offset=".45" stop-color="#5c6580"/>
<stop offset="1" stop-color="#333b4d"/>
</linearGradient>
<linearGradient id="bar" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#eef2f8"/>
<stop offset=".3" stop-color="#b9c2d2"/>
<stop offset=".52" stop-color="#7e879b"/>
<stop offset="1" stop-color="#4d5567"/>
</linearGradient>
<linearGradient id="bodyG" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#39415a"/>
<stop offset=".45" stop-color="#1d2333"/>
<stop offset="1" stop-color="#0f131d"/>
</linearGradient>
<linearGradient id="bellyG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset=".62" stop-color="#eef2f8"/>
<stop offset="1" stop-color="#c9d2e2"/>
</linearGradient>
<linearGradient id="flipperG" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#2a3145"/>
<stop offset="1" stop-color="#121722"/>
</linearGradient>
<radialGradient id="redPlate" cx=".35" cy=".3" r=".9">
<stop offset="0" stop-color="#ff6a5c"/><stop offset=".55" stop-color="#d62f2a"/>
<stop offset="1" stop-color="#7c1414"/>
</radialGradient>
<radialGradient id="bluePlate" cx=".35" cy=".3" r=".9">
<stop offset="0" stop-color="#63a9ff"/><stop offset=".55" stop-color="#2560c4"/>
<stop offset="1" stop-color="#12346b"/>
</radialGradient>
<radialGradient id="goldPlate" cx=".35" cy=".3" r=".9">
<stop offset="0" stop-color="#ffd970"/><stop offset=".55" stop-color="#e0a11b"/>
<stop offset="1" stop-color="#7a5205"/>
</radialGradient>
<radialGradient id="blackPlate" cx=".35" cy=".3" r=".9">
<stop offset="0" stop-color="#4a5162"/><stop offset=".55" stop-color="#20242f"/>
<stop offset="1" stop-color="#0a0c12"/>
</radialGradient>
<linearGradient id="beakG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffc44d"/><stop offset="1" stop-color="#f08a12"/>
</linearGradient>
<linearGradient id="beltG" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#7d1d2c"/><stop offset=".5" stop-color="#b62639"/>
<stop offset="1" stop-color="#6d1a28"/>
</linearGradient>
<linearGradient id="bannerG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#2f6fd0"/><stop offset="1" stop-color="#1d3f80"/>
</linearGradient>
<radialGradient id="vig" cx=".5" cy=".45" r=".75">
<stop offset=".55" stop-color="#000" stop-opacity="0"/>
<stop offset="1" stop-color="#000" stop-opacity=".55"/>
</radialGradient>
<radialGradient id="chalkG" cx=".5" cy=".35" r=".7">
<stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#dfe6f2"/>
</radialGradient>
<pattern id="holes" width="28" height="34" patternUnits="userSpaceOnUse">
<rect x="8" y="9" width="11" height="16" rx="3" fill="#0d111a" opacity=".8"/>
</pattern>
<pattern id="knurl" width="7" height="10" patternUnits="userSpaceOnUse">
<path d="M-2 10 L5 0 M5 10 L12 0" stroke="#8a93a6" stroke-width="1.1" opacity=".55"/>
</pattern>
<pattern id="mat" width="56" height="18" patternUnits="userSpaceOnUse">
<rect width="56" height="18" fill="#1b2130"/>
<rect width="56" height="2" fill="#242c3d"/>
</pattern>
</defs>
<!-- ================= WALL ================= -->
<rect x="0" y="0" width="1000" height="620" fill="url(#wall)"/>
<g opacity=".5" stroke="#0f1420" stroke-width="2">
<path d="M0 90 H1000 M0 250 H1000 M0 410 H1000"/>
</g>
<g opacity=".35" stroke="#39415a" stroke-width="1.5">
<path d="M120 0 V90 M340 0 V90 M560 0 V90 M780 0 V90"/>
</g>
<!-- wall padding strip -->
<rect x="0" y="470" width="1000" height="150" fill="#191f2c" opacity=".75"/>
<rect x="0" y="466" width="1000" height="8" fill="#2b3244"/>
<!-- banner -->
<g transform="rotate(-3 150 200)">
<rect x="60" y="120" width="190" height="150" rx="8" fill="url(#bannerG)"/>
<rect x="60" y="120" width="190" height="150" rx="8" fill="none" stroke="#7fb0ff" stroke-width="3" opacity=".8"/>
<text x="155" y="176" text-anchor="middle" font-family="system-ui,-apple-system,Helvetica,Arial,sans-serif"
font-size="34" font-weight="800" fill="#eaf2ff" letter-spacing="1">LIFT</text>
<text x="155" y="220" text-anchor="middle" font-family="system-ui,-apple-system,Helvetica,Arial,sans-serif"
font-size="30" font-weight="800" fill="#ffd166" letter-spacing="1">BIG</text>
<text x="155" y="252" text-anchor="middle" font-family="system-ui,-apple-system,Helvetica,Arial,sans-serif"
font-size="12" font-weight="600" fill="#bcd4ff" letter-spacing="3">FEATHERED</text>
</g>
<!-- wall clock -->
<g transform="translate(862 178)">
<circle r="46" fill="#0f1420" stroke="#4a556e" stroke-width="5"/>
<circle r="38" fill="#1d2433"/>
<g stroke="#8f9bb3" stroke-width="3" stroke-linecap="round">
<path d="M0 -30 V-24 M0 30 V24 M-30 0 H-24 M30 0 H24"/>
</g>
<path d="M0 0 L0 -22" stroke="#e9eef7" stroke-width="4" stroke-linecap="round"/>
<path d="M0 0 L18 8" stroke="#ffb02e" stroke-width="4" stroke-linecap="round"/>
<circle r="4" fill="#e9eef7"/>
</g>
<!-- ================= FLOOR ================= -->
<rect x="0" y="620" width="1000" height="80" fill="url(#floor)"/>
<rect x="0" y="620" width="1000" height="6" fill="#3b4459"/>
<rect x="232" y="622" width="536" height="78" fill="url(#mat)" opacity=".9"/>
<rect x="232" y="622" width="536" height="78" fill="none" stroke="#39425a" stroke-width="3"/>
<!-- floor shadows -->
<g fill="#05070c" opacity=".55">
<ellipse cx="200" cy="622" rx="86" ry="14"/>
<ellipse cx="800" cy="622" rx="86" ry="14"/>
<ellipse cx="500" cy="620" rx="130" ry="18"/>
<ellipse cx="314" cy="626" rx="46" ry="10"/>
<ellipse cx="686" cy="626" rx="46" ry="10"/>
</g>
<!-- gym junk: chalk bowl + bottle (foreground, right) -->
<g>
<rect x="872" y="640" width="66" height="42" rx="10" fill="#b0246a"/>
<rect x="872" y="640" width="66" height="13" rx="6" fill="#d4408a"/>
<ellipse cx="905" cy="642" rx="28" ry="9" fill="#e9eef7"/>
<ellipse cx="905" cy="641" rx="21" ry="6.5" fill="#ffffff"/>
<g fill="#ffffff" opacity=".85">
<circle cx="932" cy="612" r="3.5"/><circle cx="946" cy="598" r="2.4"/>
<circle cx="922" cy="592" r="2"/><circle cx="950" cy="618" r="2.8"/>
</g>
</g>
<g>
<rect x="948" y="622" width="24" height="60" rx="9" fill="#2f9fd6" opacity=".92"/>
<rect x="952" y="606" width="16" height="20" rx="5" fill="#7fd0f2"/>
<rect x="951" y="600" width="18" height="9" rx="3" fill="#1d6f96"/>
</g>
<!-- ================= RACK ================= -->
<g>
<!-- base plates -->
<rect x="286" y="608" width="56" height="16" rx="4" fill="#39415a"/>
<rect x="658" y="608" width="56" height="16" rx="4" fill="#39415a"/>
<!-- uprights -->
<rect x="300" y="92" width="28" height="520" fill="url(#steelV)"/>
<rect x="672" y="92" width="28" height="520" fill="url(#steelV)"/>
<rect x="300" y="92" width="28" height="520" fill="url(#holes)"/>
<rect x="672" y="92" width="28" height="520" fill="url(#holes)"/>
<rect x="300" y="92" width="5" height="520" fill="#aab4ca" opacity=".55"/>
<rect x="672" y="92" width="5" height="520" fill="#aab4ca" opacity=".55"/>
<!-- top beam -->
<rect x="296" y="92" width="408" height="28" rx="7" fill="url(#steelV)"/>
<rect x="296" y="92" width="408" height="6" rx="3" fill="#aab4ca" opacity=".5"/>
<!-- pull-up bar -->
<rect x="336" y="118" width="16" height="44" fill="#4d5567"/>
<rect x="648" y="118" width="16" height="44" fill="#4d5567"/>
<rect x="322" y="156" width="356" height="17" rx="8.5" fill="url(#bar)"/>
<!-- brand plate -->
<g transform="translate(686 250)">
<rect x="0" y="0" width="60" height="20" rx="4" fill="#11151f"/>
<text x="30" y="14" text-anchor="middle" font-family="system-ui,Helvetica,Arial,sans-serif"
font-size="10" font-weight="800" fill="#ffb02e" letter-spacing="1">PENG-RACK</text>
</g>
</g>
<!-- ================= PENGUIN ================= -->
<g>
<!-- body -->
<path d="M500 300
C432 300 396 340 386 400
C376 462 386 518 420 552
C440 572 468 580 500 580
C532 580 560 572 580 552
C614 518 624 462 614 400
C604 340 568 300 500 300 Z"
fill="url(#bodyG)" stroke="#080b12" stroke-width="3"/>
<!-- belly -->
<path d="M500 338
C452 338 428 382 424 432
C420 488 432 534 456 556
C472 570 490 576 500 576
C510 576 528 570 544 556
C568 534 580 488 576 432
C572 382 548 338 500 338 Z"
fill="url(#bellyG)"/>
<!-- belly shading -->
<path d="M500 576 C470 576 448 566 436 546 C432 562 456 586 500 588 C544 586 568 562 564 546 C552 566 530 576 500 576 Z"
fill="#c3ccdb" opacity=".3"/>
<!-- lifting belt -->
<path d="M410 424 H590 A10 10 0 0 1 600 434 V460 A10 10 0 0 1 590 470 H410 A10 10 0 0 1 400 460 V434 A10 10 0 0 1 410 424 Z"
fill="url(#beltG)" stroke="#4c1220" stroke-width="2"/>
<rect x="478" y="426" width="44" height="42" rx="6" fill="#c9d2e2" stroke="#7d879c" stroke-width="2"/>
<rect x="489" y="437" width="22" height="20" rx="3" fill="#39415a"/>
<path d="M400 442 H478 M522 442 H600" stroke="#5e1423" stroke-width="2" opacity=".7"/>
<!-- head -->
<ellipse cx="500" cy="250" rx="80" ry="76" fill="url(#bodyG)" stroke="#080b12" stroke-width="3"/>
<!-- head sheen -->
<path d="M446 202 C470 178 522 172 552 194 C520 190 484 194 462 212 Z" fill="#5a6480" opacity=".5"/>
<!-- white face patches -->
<ellipse cx="458" cy="242" rx="31" ry="35" fill="#f3f6fb"/>
<ellipse cx="542" cy="242" rx="31" ry="35" fill="#f3f6fb"/>
<!-- eyes -->
<g>
<circle cx="462" cy="240" r="13" fill="#12151d"/>
<circle cx="538" cy="240" r="13" fill="#12151d"/>
<circle cx="466" cy="235" r="4.5" fill="#ffffff"/>
<circle cx="542" cy="235" r="4.5" fill="#ffffff"/>
</g>
<!-- determined brows -->
<path d="M438 216 L482 230" stroke="#0a0d14" stroke-width="11" stroke-linecap="round"/>
<path d="M562 216 L518 230" stroke="#0a0d14" stroke-width="11" stroke-linecap="round"/>
<!-- beak -->
<path d="M474 262 Q500 250 526 262 Q522 284 502 300 Q498 302 496 300 Q478 284 474 262 Z"
fill="url(#beakG)" stroke="#a75c05" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M477 272 Q500 280 523 272" fill="none" stroke="#a75c05" stroke-width="2.5" opacity=".85"/>
<!-- feet -->
<g>
<path d="M482 578 C456 580 428 590 408 602 C398 608 400 620 412 620 C428 620 448 612 464 604 C476 598 486 592 486 584 Z"
fill="#f5a623" stroke="#a75c05" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M518 578 C544 580 572 590 592 602 C602 608 600 620 588 620 C572 620 552 612 536 604 C524 598 514 592 514 584 Z"
fill="#f5a623" stroke="#a75c05" stroke-width="2.5" stroke-linejoin="round"/>
<g stroke="#a75c05" stroke-width="2" opacity=".8" fill="none">
<path d="M418 604 L432 612 M436 596 L448 606 M456 589 L466 599"/>
<path d="M582 604 L568 612 M564 596 L552 606 M544 589 L534 599"/>
</g>
</g>
</g>
<!-- ================= FLIPPERS (wings, behind the bar) ================= -->
<g>
<path id="flipper"
d="M444 318
C404 336 372 398 362 466
C357 506 364 534 374 552
C382 566 400 568 406 554
C410 543 402 534 392 528
C382 500 386 450 398 410
C410 372 428 342 452 330 Z"
fill="#333c55" stroke="#080b12" stroke-width="3" stroke-linejoin="round"/>
<use href="#flipper" transform="translate(1000,0) scale(-1,1)"/>
<g fill="none" stroke="#5a6788" stroke-width="3" stroke-linecap="round" opacity=".5">
<path d="M424 350 C398 394 384 452 382 498"/>
<path d="M576 350 C602 394 616 452 618 498"/>
</g>
</g>
<!-- ================= BARBELL ================= -->
<g>
<!-- outer plates first (drawn behind the big ones) -->
<circle cx="132" cy="550" r="52" fill="url(#blackPlate)" stroke="#05070c" stroke-width="3"/>
<circle cx="868" cy="550" r="52" fill="url(#goldPlate)" stroke="#5a3d02" stroke-width="3"/>
<!-- shaft -->
<rect x="132" y="541" width="736" height="18" rx="9" fill="url(#bar)" stroke="#3b4356" stroke-width="1.5"/>
<rect x="330" y="541" width="340" height="18" fill="url(#knurl)" opacity=".75"/>
<rect x="132" y="541" width="736" height="4" rx="2" fill="#ffffff" opacity=".45"/>
<!-- collars -->
<rect x="272" y="526" width="18" height="48" rx="4" fill="#454d60" stroke="#232936" stroke-width="2"/>
<rect x="710" y="526" width="18" height="48" rx="4" fill="#454d60" stroke="#232936" stroke-width="2"/>
<rect x="276" y="532" width="6" height="36" rx="3" fill="#6d778d"/>
<rect x="714" y="532" width="6" height="36" rx="3" fill="#6d778d"/>
<!-- big plates -->
<circle cx="200" cy="550" r="70" fill="url(#redPlate)" stroke="#4a0c0c" stroke-width="4"/>
<circle cx="200" cy="550" r="52" fill="none" stroke="#ffffff" stroke-width="3" opacity=".22"/>
<circle cx="200" cy="550" r="22" fill="#2a0d0d" stroke="#f0b8b0" stroke-width="3"/>
<circle cx="200" cy="550" r="8" fill="#0d1119"/>
<text x="200" y="520" text-anchor="middle" font-family="system-ui,Helvetica,Arial,sans-serif"
font-size="18" font-weight="800" fill="#ffe9e4" opacity=".92">25</text>
<circle cx="800" cy="550" r="70" fill="url(#bluePlate)" stroke="#0d2450" stroke-width="4"/>
<circle cx="800" cy="550" r="52" fill="none" stroke="#ffffff" stroke-width="3" opacity=".22"/>
<circle cx="800" cy="550" r="22" fill="#0c1c3a" stroke="#bcd6ff" stroke-width="3"/>
<circle cx="800" cy="550" r="8" fill="#0d1119"/>
<text x="800" y="520" text-anchor="middle" font-family="system-ui,Helvetica,Arial,sans-serif"
font-size="18" font-weight="800" fill="#e2efff" opacity=".92">20</text>
</g>
<!-- ================= J-HOOKS cradling the bar ================= -->
<g fill="none" stroke="#4e586d" stroke-width="11" stroke-linecap="round" stroke-linejoin="round">
<path d="M334 476 L334 540 L356 540"/>
<path d="M666 476 L666 540 L644 540"/>
</g>
<g fill="none" stroke="#9aa4ba" stroke-width="3" stroke-linecap="round" opacity=".7">
<path d="M334 480 L334 534 L352 534"/>
<path d="M666 480 L666 534 L648 534"/>
</g>
<!-- ================= HANDS WRAPPING THE BAR ================= -->
<g>
<g id="hand">
<path d="M369 546 C369 532 380 524 392 524 C406 524 417 533 417 545
C417 555 408 560 396 560 L380 560 C373 560 369 554 369 546 Z"
fill="#333c55" stroke="#080b12" stroke-width="2.5" stroke-linejoin="round"/>
<g fill="#485471" stroke="#080b12" stroke-width="1.5">
<ellipse cx="381" cy="536" rx="8" ry="6.5" transform="rotate(-14 381 536)"/>
<ellipse cx="396" cy="533" rx="8" ry="6.5" transform="rotate(-14 396 533)"/>
</g>
</g>
<use href="#hand" transform="translate(1000,0) scale(-1,1)"/>
</g>
<!-- chalk dust -->
<g fill="#ffffff" opacity=".8">
<circle cx="372" cy="536" r="3.4"/><circle cx="356" cy="522" r="2.4"/>
<circle cx="366" cy="512" r="1.8"/><circle cx="344" cy="540" r="1.6"/>
<circle cx="628" cy="536" r="3.4"/><circle cx="644" cy="522" r="2.4"/>
<circle cx="634" cy="512" r="1.8"/><circle cx="656" cy="540" r="1.6"/>
</g>
<!-- ================= ANNOTATION ================= -->
<g transform="translate(0 0)">
<path d="M258 470 C300 476 340 500 374 530" fill="none" stroke="#ffb02e" stroke-width="3"
stroke-dasharray="8 7" stroke-linecap="round" opacity=".9"/>
<path d="M362 522 l14 10 l-16 4 z" fill="#ffb02e" opacity=".9"/>
<rect x="48" y="424" width="212" height="52" rx="12" fill="#0f1420" stroke="#ffb02e" stroke-width="2.5" opacity=".97"/>
<text x="154" y="447" text-anchor="middle" font-family="system-ui,-apple-system,Helvetica,Arial,sans-serif"
font-size="15" font-weight="800" fill="#ffb02e" letter-spacing="1.8">READY TO PULL</text>
<text x="154" y="465" text-anchor="middle" font-family="system-ui,-apple-system,Helvetica,Arial,sans-serif"
font-size="11" font-weight="600" fill="#9aa6bd" letter-spacing="1.4">HIPS BACK · CHEST UP</text>
</g>
<!-- effort lines -->
<g stroke="#ffd166" stroke-width="3" stroke-linecap="round" opacity=".65">
<path d="M360 300 L338 282"/><path d="M640 300 L662 282"/>
<path d="M352 330 L326 322"/><path d="M648 330 L674 322"/>
</g>
<!-- vignette -->
<rect x="0" y="0" width="1000" height="700" fill="url(#vig)" pointer-events="none"/>
</svg>
</div>
</div>
</body>
</html>Same prompt, other models
One email when a new model lands on the board or in the showcase. Unsubscribe anytime.