A penguin about to deadlift, built by DeepSeek V4.1 Flash 1017
Hostedvia OpenCodeOpenRouter
230tok/s
First token included
143.2Ktokens
10m 22s
$0.11
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 Powerlifting — Ready to Pull</title>
<style>
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
min-height: 100vh;
display: grid;
place-items: center;
padding: 34px 20px 26px;
background:
radial-gradient(1100px 760px at 50% 28%, #10242e 0%, #071014 58%, #04090c 100%);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #b6c7d0;
}
.stage { width: min(1200px, 96vw); }
.meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 4px 12px;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: #7f95a1;
}
.meta .brand { display: inline-flex; align-items: center; gap: 9px; color: #d8c3a6; }
.meta .dot { width: 6px; height: 6px; border-radius: 50%; background: #f0a35c; box-shadow: 0 0 10px #f0a35c99; }
.meta .fig { color: #5e7480; }
svg {
display: block;
width: 100%;
height: auto;
border-radius: 20px;
background: #08141b;
box-shadow:
0 50px 90px -40px rgba(0,0,0,.9),
0 0 0 1px rgba(255,255,255,.055);
}
.footer {
display: flex;
justify-content: space-between;
padding: 12px 4px 0;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: #5e7480;
}
@media (max-width: 620px) {
body { padding: 18px 10px; }
.meta { font-size: 9px; letter-spacing: .13em; padding-bottom: 9px; }
.meta .fig { display: none; }
.footer { font-size: 8px; letter-spacing: .16em; }
}
.breathe { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
.breathe { animation: breathe 5.2s ease-in-out infinite; }
.glow { animation: pulse 7s ease-in-out infinite; }
.dust { animation: drift 7.5s ease-in-out infinite alternate; transform-box: fill-box; }
.dust.b { animation-delay: -2.6s; }
.dust.c { animation-delay: -4.4s; }
.shimmer { animation: shimmer 6s ease-in-out infinite; }
}
@keyframes breathe {
0%, 100% { transform: scale(1, 1); }
50% { transform: scale(1.005, 1.008) translateY(-1px); }
}
@keyframes pulse {
0%, 100% { opacity: .85; }
50% { opacity: 1; }
}
@keyframes drift {
from { transform: translateY(0); }
to { transform: translateY(-9px); }
}
@keyframes shimmer {
0%, 100% { opacity: .16; }
50% { opacity: .34; }
}
</style>
</head>
<body>
<main class="stage">
<div class="meta">
<span class="brand"><span class="dot"></span>Penguin Powerlifting Club</span>
<span class="fig">Meet day — attempt 1</span>
</div>
<svg viewBox="0 0 1200 800" role="img" aria-labelledby="ttl dsc" xmlns="http://www.w3.org/2000/svg">
<title id="ttl">A penguin at a powerlifting rack, gripping a loaded barbell, ready to deadlift</title>
<desc id="dsc">Illustration of a chubby penguin in a lifting belt, bent over a loaded barbell on a platform, chalk dust in the air, with a power rack, towel and chalk bucket behind it.</desc>
<defs>
<radialGradient id="bg" cx="50%" cy="36%" r="80%">
<stop offset="0" stop-color="#254654"/>
<stop offset="46%" stop-color="#132a35"/>
<stop offset="100%" stop-color="#050d11"/>
</radialGradient>
<radialGradient id="spot" cx="50%" cy="50%" r="50%">
<stop offset="0" stop-color="#ffb35c" stop-opacity=".34"/>
<stop offset="42%" stop-color="#ff9c4a" stop-opacity=".13"/>
<stop offset="100%" stop-color="#ffb35c" stop-opacity="0"/>
</radialGradient>
<radialGradient id="vignette" cx="50%" cy="44%" r="74%">
<stop offset="52%" stop-color="#000" stop-opacity="0"/>
<stop offset="100%" stop-color="#000" stop-opacity=".68"/>
</radialGradient>
<linearGradient id="steelPost" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#44555f"/>
<stop offset=".16" stop-color="#c3d3db"/>
<stop offset=".36" stop-color="#93a7b2"/>
<stop offset=".58" stop-color="#5e717c"/>
<stop offset=".82" stop-color="#36454e"/>
<stop offset="1" stop-color="#1d282f"/>
</linearGradient>
<linearGradient id="steelBar" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f0f7fa"/>
<stop offset=".16" stop-color="#c6d5dd"/>
<stop offset=".48" stop-color="#7c909c"/>
<stop offset=".7" stop-color="#adbec7"/>
<stop offset="1" stop-color="#54666f"/>
</linearGradient>
<linearGradient id="steelFlat" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#d8e3e8"/>
<stop offset=".5" stop-color="#93a7b2"/>
<stop offset="1" stop-color="#4d5e68"/>
</linearGradient>
<radialGradient id="plateRed" cx="38%" cy="28%" r="82%">
<stop offset="0" stop-color="#f58272"/>
<stop offset=".5" stop-color="#d54b3f"/>
<stop offset="1" stop-color="#8a1f1d"/>
</radialGradient>
<radialGradient id="plateBlue" cx="38%" cy="28%" r="82%">
<stop offset="0" stop-color="#5c9db4"/>
<stop offset=".55" stop-color="#356f85"/>
<stop offset="1" stop-color="#1c414f"/>
</radialGradient>
<radialGradient id="body" cx="40%" cy="26%" r="88%">
<stop offset="0" stop-color="#36434f"/>
<stop offset=".58" stop-color="#1d2731"/>
<stop offset="1" stop-color="#0b1218"/>
</radialGradient>
<linearGradient id="bodyArm" x1="0" y1="0" x2="1" y2=".35">
<stop offset="0" stop-color="#5d7484"/>
<stop offset=".45" stop-color="#354752"/>
<stop offset="1" stop-color="#141e25"/>
</linearGradient>
<linearGradient id="belly" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset=".68" stop-color="#eef3f5"/>
<stop offset="1" stop-color="#ccd9df"/>
</linearGradient>
<linearGradient id="orange" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffc373"/>
<stop offset="1" stop-color="#df7d1e"/>
</linearGradient>
<linearGradient id="wood" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7f5634"/>
<stop offset=".55" stop-color="#694327"/>
<stop offset="1" stop-color="#462b19"/>
</linearGradient>
<linearGradient id="rubber" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#22333c"/>
<stop offset="1" stop-color="#0e1a21"/>
</linearGradient>
<linearGradient id="belt" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#63412a"/>
<stop offset=".45" stop-color="#422919"/>
<stop offset="1" stop-color="#25150c"/>
</linearGradient>
<filter id="blur3"><feGaussianBlur stdDeviation="3"/></filter>
<filter id="blur6"><feGaussianBlur stdDeviation="6"/></filter>
<filter id="blur10"><feGaussianBlur stdDeviation="10"/></filter>
<filter id="blur18"><feGaussianBlur stdDeviation="18"/></filter>
<filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="0" dy="4" stdDeviation="5" flood-color="#000" flood-opacity=".35"/>
</filter>
<pattern id="knurl" width="6" height="16" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="1.6" height="16" fill="#38474f" opacity=".55"/>
</pattern>
<pattern id="holes" width="44" height="30" patternUnits="userSpaceOnUse" patternTransform="translate(170 0)">
<circle cx="22" cy="15" r="4.6" fill="#0a141a" opacity=".8"/>
<circle cx="22" cy="13.6" r="4.6" fill="none" stroke="#ffffff" stroke-opacity=".13" stroke-width="1.2"/>
</pattern>
<filter id="grain">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7"/>
<feColorMatrix type="saturate" values="0"/>
</filter>
</defs>
<!-- ============ WALL ============ -->
<rect width="1200" height="800" fill="url(#bg)"/>
<ellipse class="glow" cx="600" cy="398" rx="440" ry="370" fill="url(#spot)"/>
<g stroke="#ffffff" stroke-opacity=".028" stroke-width="1.5">
<path d="M0 268H1200"/>
<path d="M0 524H1200"/>
<path d="M328 0V648"/>
<path d="M872 0V648"/>
</g>
<!-- wall plaque -->
<g>
<rect x="112" y="46" width="282" height="62" rx="9" fill="#0a161d" stroke="#f0a35c" stroke-opacity=".38"/>
<rect x="112" y="46" width="282" height="62" rx="9" fill="none" stroke="#000" stroke-opacity=".4"/>
<rect x="128" y="62" width="4" height="30" fill="#f0a35c" opacity=".8"/>
<text x="146" y="76" font-family="ui-sans-serif, system-ui, sans-serif" font-size="17" font-weight="800" letter-spacing="5" fill="#e9d6bb">IRON & ICE</text>
<text x="147" y="94" font-family="ui-sans-serif, system-ui, sans-serif" font-size="8" font-weight="600" letter-spacing="4.6" fill="#8fa3ad">POWERLIFTING CLUB</text>
</g>
<!-- ============ FLOOR ============ -->
<path d="M56 648H1144L1200 800H0Z" fill="url(#rubber)"/>
<path d="M56 648H1144" stroke="#5c7480" stroke-opacity=".38" stroke-width="2"/>
<path d="M400 648H800L924 800H276Z" fill="url(#wood)"/>
<g stroke="#1c1109" stroke-opacity=".32" stroke-width="2.5">
<path d="M462 648 384 800"/>
<path d="M524 648 486 800"/>
<path d="M590 648 582 800"/>
<path d="M652 648 684 800"/>
<path d="M716 648 786 800"/>
</g>
<g stroke="#c08a55" stroke-opacity=".1" stroke-width="1.4" fill="none">
<path d="M420 690c40 16 96 8 130 26"/>
<path d="M700 730c36-12 70-10 100 2"/>
<path d="M480 760c50-10 92-6 126 6"/>
</g>
<ellipse cx="600" cy="742" rx="300" ry="86" fill="#ffb35c" opacity=".055"/>
<path d="M400 648H800" stroke="#c08a55" stroke-opacity=".18" stroke-width="2"/>
<!-- floor shadows -->
<ellipse cx="600" cy="692" rx="196" ry="26" fill="#000" opacity=".5" filter="url(#blur10)"/>
<ellipse cx="600" cy="704" rx="310" ry="16" fill="#000" opacity=".3" filter="url(#blur10)"/>
<ellipse cx="360" cy="696" rx="64" ry="12" fill="#000" opacity=".45" filter="url(#blur6)"/>
<ellipse cx="840" cy="696" rx="64" ry="12" fill="#000" opacity=".45" filter="url(#blur6)"/>
<ellipse cx="518" cy="707" rx="46" ry="9" fill="#000" opacity=".38" filter="url(#blur3)"/>
<ellipse cx="682" cy="707" rx="46" ry="9" fill="#000" opacity=".38" filter="url(#blur3)"/>
<!-- ============ POWER RACK ============ -->
<g id="rack">
<!-- rear glow separation -->
<g opacity=".5">
<rect x="164" y="154" width="56" height="510" fill="#000" filter="url(#blur10)"/>
<rect x="980" y="154" width="56" height="510" fill="#000" filter="url(#blur10)"/>
</g>
<!-- uprights -->
<g>
<rect x="170" y="160" width="44" height="500" rx="5" fill="url(#steelPost)" stroke="#081218" stroke-opacity=".7" stroke-width="2"/>
<rect x="986" y="160" width="44" height="500" rx="5" fill="url(#steelPost)" stroke="#081218" stroke-opacity=".7" stroke-width="2"/>
<rect x="170" y="196" width="44" height="448" fill="url(#holes)"/>
<rect x="986" y="196" width="44" height="448" fill="url(#holes)"/>
<rect x="204" y="166" width="4" height="488" fill="#ffffff" opacity=".18"/>
<rect x="1020" y="166" width="4" height="488" fill="#ffffff" opacity=".18"/>
<rect x="172" y="166" width="6" height="488" fill="#000" opacity=".28"/>
<rect x="988" y="166" width="6" height="488" fill="#000" opacity=".28"/>
</g>
<!-- base feet -->
<g>
<rect x="128" y="642" width="224" height="22" rx="9" fill="url(#steelFlat)" stroke="#081218" stroke-opacity=".6"/>
<rect x="848" y="642" width="224" height="22" rx="9" fill="url(#steelFlat)" stroke="#081218" stroke-opacity=".6"/>
<rect x="140" y="662" width="58" height="11" rx="4" fill="#101b21"/>
<rect x="284" y="662" width="58" height="11" rx="4" fill="#101b21"/>
<rect x="860" y="662" width="58" height="11" rx="4" fill="#101b21"/>
<rect x="1002" y="662" width="58" height="11" rx="4" fill="#101b21"/>
<rect x="128" y="645" width="224" height="3" fill="#fff" opacity=".22"/>
<rect x="848" y="645" width="224" height="3" fill="#fff" opacity=".22"/>
<!-- base shadows -->
<ellipse cx="238" cy="672" rx="112" ry="7" fill="#000" opacity=".35" filter="url(#blur3)"/>
<ellipse cx="962" cy="672" rx="112" ry="7" fill="#000" opacity=".35" filter="url(#blur3)"/>
</g>
<!-- top crossbar -->
<g>
<rect x="158" y="146" width="884" height="36" rx="8" fill="url(#steelPost)" stroke="#081218" stroke-opacity=".7" stroke-width="2"/>
<rect x="158" y="149" width="884" height="4" rx="2" fill="#fff" opacity=".32"/>
<rect x="158" y="174" width="884" height="8" rx="3" fill="#000" opacity=".35"/>
<path d="M214 182 L214 214 L258 182Z" fill="#3d4d56"/>
<path d="M986 182 L986 214 L942 182Z" fill="#3d4d56"/>
<text x="600" y="170" text-anchor="middle" font-family="ui-sans-serif, system-ui, sans-serif" font-size="10" font-weight="700" letter-spacing="6" fill="#dfeaf0" opacity=".5">IRON & ICE</text>
<rect x="466" y="163" width="26" height="3" rx="1.5" fill="#f0a35c" opacity=".7"/>
<rect x="708" y="163" width="26" height="3" rx="1.5" fill="#f0a35c" opacity=".7"/>
<!-- mounting bolts -->
<circle cx="180" cy="164" r="3" fill="#101b21" opacity=".8"/>
<circle cx="204" cy="164" r="3" fill="#101b21" opacity=".8"/>
<circle cx="996" cy="164" r="3" fill="#101b21" opacity=".8"/>
<circle cx="1020" cy="164" r="3" fill="#101b21" opacity=".8"/>
</g>
<!-- J-hooks -->
<g>
<g>
<rect x="208" y="416" width="82" height="15" rx="5" fill="url(#steelFlat)" stroke="#0a141a" stroke-opacity=".6"/>
<rect x="276" y="386" width="15" height="48" rx="5" fill="url(#steelFlat)" stroke="#0a141a" stroke-opacity=".6"/>
<rect x="279" y="391" width="9" height="22" rx="3" fill="#e8e2d3" opacity=".72"/>
<rect x="208" y="417" width="70" height="3" fill="#fff" opacity=".25"/>
</g>
<g>
<rect x="910" y="416" width="82" height="15" rx="5" fill="url(#steelFlat)" stroke="#0a141a" stroke-opacity=".6"/>
<rect x="909" y="386" width="15" height="48" rx="5" fill="url(#steelFlat)" stroke="#0a141a" stroke-opacity=".6"/>
<rect x="912" y="391" width="9" height="22" rx="3" fill="#e8e2d3" opacity=".72"/>
<rect x="922" y="417" width="70" height="3" fill="#fff" opacity=".25"/>
</g>
</g>
<!-- towel over the crossbar -->
<g filter="url(#soft)">
<path d="M716 150h86l-4 100c-26 9-52 9-78 0z" fill="#e6dccb" stroke="#b9a992" stroke-opacity=".35"/>
<path d="M758 156v88" stroke="#bfb19b" stroke-width="2" fill="none" opacity=".35"/>
<path d="M776 154c-1 34-2 60-4 86" stroke="#fff" stroke-width="2.6" fill="none" opacity=".5"/>
<path d="M730 156c0 32 0 58 1 84" stroke="#fff" stroke-width="2" fill="none" opacity=".35"/>
<path d="M719 236c24 6 52 6 76 0" stroke="#bfb19b" stroke-width="6" fill="none" opacity=".22"/>
<path d="M722 249c24 6 50 6 74 0" stroke="#f8f2e6" stroke-width="2.5" fill="none" opacity=".48"/>
</g>
</g>
<!-- water bottle -->
<g>
<ellipse cx="276" cy="700" rx="24" ry="6" fill="#000" opacity=".45" filter="url(#blur3)"/>
<rect x="258" y="620" width="35" height="80" rx="11" fill="#20303a" stroke="#0a141a" stroke-opacity=".7"/>
<rect x="262" y="624" width="7" height="70" rx="3.5" fill="#fff" opacity=".12"/>
<rect x="264" y="654" width="23" height="22" rx="3" fill="#f0a35c" opacity=".82"/>
<rect x="264" y="660" width="23" height="3" fill="#3a2410" opacity=".5"/>
<rect x="270" y="604" width="12" height="18" rx="4" fill="#16242c"/>
<rect x="266" y="612" width="20" height="9" rx="3" fill="#2c3f4a"/>
</g>
<!-- ============ PENGUIN ============ -->
<g class="breathe">
<!-- feet -->
<g id="footLeft">
<path d="M506 663C490 671 475 688 481 700c6 11 22 5 31-4 4 10 18 16 26 7 7 8 21 3 21-9 0-14-13-24-25-31z" fill="url(#orange)" stroke="#a85a10" stroke-opacity=".3" stroke-width="2"/>
<path d="M487 697c9-6 17-8 25-6M531 703c8-6 16-8 24-7" stroke="#b96812" stroke-width="2.4" fill="none" stroke-linecap="round" opacity=".6"/>
</g>
<use href="#footLeft" transform="translate(1200 0) scale(-1 1)"/>
<!-- body -->
<path d="M600 340c-88 10-140 88-153 172-13 83 17 148 83 168 24 7 116 7 140 0 66-20 96-85 83-168-13-84-65-162-153-172z" fill="url(#body)" stroke="#070d12" stroke-opacity=".55" stroke-width="2"/>
<!-- rim light on body -->
<path d="M470 486c-16 66 6 132 62 168" fill="none" stroke="#8aa6b7" stroke-opacity=".22" stroke-width="5" stroke-linecap="round"/>
<path d="M735 506c8 50-6 100-44 134" fill="none" stroke="#ffbf80" stroke-opacity=".16" stroke-width="5" stroke-linecap="round"/>
<!-- belly -->
<path d="M600 368c-70 10-102 80-108 158-6 76 26 132 108 152 82-20 114-76 108-152-6-78-38-148-108-158z" fill="url(#belly)"/>
<path d="M600 372c-62 9-94 74-100 150-5 62 14 112 62 136-32-46-38-111-22-172 12-48 32-90 60-114z" fill="#b9cbd3" opacity=".25"/>
<!-- lifting belt -->
<g>
<path d="M468 516c52 17 212 17 264 0l7 38c-60 21-218 21-278 0z" fill="url(#belt)" stroke="#140b06" stroke-width="2"/>
<path d="M470 520c52 17 208 17 260 0" fill="none" stroke="#c9a27a" stroke-width="2" opacity=".32"/>
<path d="M470 521c52 16 208 16 260 0" fill="none" stroke="#d9b98f" stroke-width="1.6" stroke-dasharray="5 5" opacity=".6"/>
<path d="M469 550c58 19 204 19 262 0" fill="none" stroke="#d9b98f" stroke-width="1.6" stroke-dasharray="5 5" opacity=".38"/>
<rect x="562" y="520" width="76" height="50" rx="6" fill="url(#steelFlat)" stroke="#0a141a" stroke-opacity=".65"/>
<rect x="571" y="529" width="58" height="32" rx="3" fill="#202a31"/>
<rect x="571" y="529" width="58" height="32" rx="3" fill="none" stroke="#000" stroke-opacity=".5"/>
<circle cx="600" cy="545" r="4" fill="#f0a35c"/>
<rect x="560" y="527" width="5" height="36" rx="2" fill="#8fa3ad" opacity=".7"/>
<rect x="635" y="527" width="5" height="36" rx="2" fill="#8fa3ad" opacity=".7"/>
</g>
<!-- head, sunk low into the shoulders -->
<g>
<ellipse cx="600" cy="402" rx="74" ry="18" fill="#000" opacity=".2" filter="url(#blur6)"/>
<circle cx="600" cy="318" r="82" fill="url(#body)" stroke="#070d12" stroke-opacity=".55" stroke-width="2"/>
<path d="M526 280a82 82 0 0 1 74-44" fill="none" stroke="#9db9c9" stroke-opacity=".32" stroke-width="6" stroke-linecap="round"/>
<path d="M672 286a82 82 0 0 1 8 44" fill="none" stroke="#ffc98d" stroke-opacity=".3" stroke-width="5" stroke-linecap="round"/>
<!-- face -->
<ellipse cx="600" cy="348" rx="64" ry="50" fill="url(#belly)"/>
<ellipse cx="600" cy="348" rx="64" ry="50" fill="none" stroke="#aebfc8" stroke-opacity=".35"/>
<!-- eyes -->
<g>
<circle cx="576" cy="337" r="10.5" fill="#111b22"/>
<circle cx="624" cy="337" r="10.5" fill="#111b22"/>
<circle cx="572.6" cy="333.4" r="3.4" fill="#fff"/>
<circle cx="620.6" cy="333.4" r="3.4" fill="#fff"/>
<circle cx="579" cy="340" r="1.6" fill="#fff" opacity=".6"/>
<circle cx="627" cy="340" r="1.6" fill="#fff" opacity=".6"/>
</g>
<!-- determined brows -->
<g stroke="#18232c" stroke-width="8.5" stroke-linecap="round">
<path d="M553 319c11-4 22 0 31 6"/>
<path d="M647 319c-11-4-22 0-31 6"/>
</g>
<!-- beak -->
<path d="M571 359c10-13 48-13 58 0-9 22-49 22-58 0z" fill="url(#orange)" stroke="#a85a10" stroke-opacity=".35" stroke-width="1.6"/>
<path d="M575 362c10 8 40 8 50 0" fill="none" stroke="#a8580d" stroke-opacity=".5" stroke-width="2"/>
<path d="M586 353c4 4 24 4 28 0" fill="none" stroke="#ffdba9" stroke-opacity=".6" stroke-width="2.4" stroke-linecap="round"/>
<!-- focus bead of sweat -->
<path d="M688 292c6 8 9 12 9 17a9 9 0 0 1-18 0c0-5 3-9 9-17z" fill="#a9dbe7" opacity=".8"/>
<path d="M686 301c1 3 2 4 2 6" stroke="#fff" stroke-width="1.8" stroke-linecap="round" opacity=".8"/>
</g>
</g>
<!-- ============ BARBELL ============ -->
<g id="barbell">
<!-- sleeves -->
<rect x="296" y="590" width="116" height="28" rx="9" fill="url(#steelBar)" stroke="#0b161c" stroke-opacity=".55" stroke-width="2"/>
<rect x="788" y="590" width="116" height="28" rx="9" fill="url(#steelBar)" stroke="#0b161c" stroke-opacity=".55" stroke-width="2"/>
<!-- shaft -->
<rect x="300" y="596" width="600" height="16" rx="8" fill="url(#steelBar)" stroke="#0b161c" stroke-opacity=".45"/>
<rect x="300" y="598.5" width="600" height="2.4" fill="#fff" opacity=".55"/>
<rect x="300" y="607" width="600" height="3" fill="#000" opacity=".18"/>
<!-- knurling -->
<rect x="410" y="596" width="96" height="16" fill="url(#knurl)" opacity=".85"/>
<rect x="694" y="596" width="96" height="16" fill="url(#knurl)" opacity=".85"/>
<rect x="572" y="596" width="56" height="16" fill="url(#knurl)" opacity=".55"/>
<!-- plates: blue (outer) then red (inner) -->
<g>
<ellipse cx="322" cy="604" rx="30" ry="80" fill="#0d2a35"/>
<ellipse cx="330" cy="604" rx="30" ry="80" fill="url(#plateBlue)" stroke="#0b1a20" stroke-opacity=".7" stroke-width="2"/>
<ellipse cx="327" cy="604" rx="20" ry="54" fill="none" stroke="#d6eef5" stroke-opacity=".2" stroke-width="2"/>
<ellipse cx="330" cy="604" rx="11" ry="25" fill="#33434d" stroke="#849aa5" stroke-opacity=".5" stroke-width="1.5"/>
<ellipse cx="330" cy="604" rx="4.5" ry="11" fill="#0e181e"/>
<ellipse cx="358" cy="604" rx="38" ry="90" fill="#5d1512"/>
<ellipse cx="366" cy="604" rx="38" ry="90" fill="url(#plateRed)" stroke="#4d0f0e" stroke-opacity=".75" stroke-width="2"/>
<ellipse cx="366" cy="604" rx="26" ry="66" fill="none" stroke="#ffd9d2" stroke-opacity=".24" stroke-width="2.4"/>
<ellipse cx="362" cy="604" rx="38" ry="90" fill="none" stroke="#fff" stroke-opacity=".18"/>
<ellipse cx="366" cy="604" rx="12" ry="28" fill="#33434d" stroke="#9db0ba" stroke-opacity=".55" stroke-width="1.8"/>
<ellipse cx="366" cy="604" rx="5" ry="13" fill="#0e181e"/>
</g>
<g>
<ellipse cx="878" cy="604" rx="30" ry="80" fill="#0d2a35"/>
<ellipse cx="870" cy="604" rx="30" ry="80" fill="url(#plateBlue)" stroke="#0b1a20" stroke-opacity=".7" stroke-width="2"/>
<ellipse cx="867" cy="604" rx="20" ry="54" fill="none" stroke="#d6eef5" stroke-opacity=".2" stroke-width="2"/>
<ellipse cx="870" cy="604" rx="11" ry="25" fill="#33434d" stroke="#849aa5" stroke-opacity=".5" stroke-width="1.5"/>
<ellipse cx="870" cy="604" rx="4.5" ry="11" fill="#0e181e"/>
<ellipse cx="842" cy="604" rx="38" ry="90" fill="#5d1512"/>
<ellipse cx="834" cy="604" rx="38" ry="90" fill="url(#plateRed)" stroke="#4d0f0e" stroke-opacity=".75" stroke-width="2"/>
<ellipse cx="834" cy="604" rx="26" ry="66" fill="none" stroke="#ffd9d2" stroke-opacity=".24" stroke-width="2.4"/>
<ellipse cx="838" cy="604" rx="38" ry="90" fill="none" stroke="#fff" stroke-opacity=".18"/>
<ellipse cx="834" cy="604" rx="12" ry="28" fill="#33434d" stroke="#9db0ba" stroke-opacity=".55" stroke-width="1.8"/>
<ellipse cx="834" cy="604" rx="5" ry="13" fill="#0e181e"/>
</g>
<!-- collars -->
<rect x="296" y="586" width="11" height="36" rx="4" fill="url(#steelFlat)" stroke="#0a141a" stroke-opacity=".6"/>
<rect x="893" y="586" width="11" height="36" rx="4" fill="url(#steelFlat)" stroke="#0a141a" stroke-opacity=".6"/>
<!-- chalk smudges on the bar -->
<ellipse cx="460" cy="601" rx="42" ry="11" fill="#fff" opacity=".16" filter="url(#blur3)"/>
<ellipse cx="740" cy="601" rx="42" ry="11" fill="#fff" opacity=".16" filter="url(#blur3)"/>
<path class="shimmer" d="M310 597h240" stroke="#fff" stroke-width="2" opacity=".2"/>
</g>
<!-- ============ ARMS + GRIP ============ -->
<g id="arms">
<!-- left -->
<g>
<path d="M486 418C460 448 444 488 441 530c-2 32 2 58 10 70 7 12 29 13 37-1-12-25-20-57-18-91 2-34 16-66 44-84-4-16-20-18-28-6z" fill="#000" opacity=".32" filter="url(#blur6)" transform="translate(12 6)"/>
<path d="M486 418C460 448 444 488 441 530c-2 32 2 58 10 70 7 12 29 13 37-1-12-25-20-57-18-91 2-34 16-66 44-84-4-16-20-18-28-6z" fill="url(#bodyArm)" stroke="#060c11" stroke-opacity=".85" stroke-width="2.5"/>
<path d="M500 430c-24 30-38 66-41 104-2 30 1 54 8 68" fill="none" stroke="#9fb6c5" stroke-opacity=".4" stroke-width="3" stroke-linecap="round"/>
<path d="M514 438c-22 26-32 58-32 90-1 28 3 52 9 68" fill="none" stroke="#050b0f" stroke-opacity=".32" stroke-width="3" stroke-linecap="round"/>
<ellipse cx="460" cy="601" rx="27" ry="16" fill="#26333e" stroke="#070d12" stroke-opacity=".75" stroke-width="2"/>
<path d="M447 612v8M460 614v8M473 613v7" stroke="#0a1117" stroke-width="5" stroke-linecap="round" opacity=".9"/>
<path d="M447 592c9-4 21-4 30 0" fill="none" stroke="#9db4c3" stroke-opacity=".65" stroke-width="2.4" stroke-linecap="round"/>
<ellipse cx="452" cy="595" rx="13" ry="5" fill="#fff" opacity=".2" filter="url(#blur3)"/>
<ellipse cx="460" cy="601" rx="22" ry="10" fill="#fff" opacity=".08" filter="url(#blur3)"/>
<g fill="#e8f0f4">
<circle cx="449" cy="566" r="2" opacity=".4"/>
<circle cx="461" cy="580" r="1.5" opacity=".5"/>
<circle cx="456" cy="588" r="2.4" opacity=".35"/>
<circle cx="470" cy="572" r="1.2" opacity=".4"/>
</g>
</g>
<!-- right -->
<g>
<path d="M714 418c26 30 42 70 45 112 2 32-2 58-10 70-7 12-29 13-37-1 12-25 20-57 18-91-2-34-16-66-44-84 4-16 20-18 28-6z" fill="#000" opacity=".3" filter="url(#blur6)" transform="translate(-12 6)"/>
<path d="M714 418c26 30 42 70 45 112 2 32-2 58-10 70-7 12-29 13-37-1 12-25 20-57 18-91-2-34-16-66-44-84 4-16 20-18 28-6z" fill="url(#bodyArm)" stroke="#060c11" stroke-opacity=".85" stroke-width="2.5"/>
<path d="M700 430c24 30 38 66 41 104 2 30-1 54-8 68" fill="none" stroke="#9fb6c5" stroke-opacity=".3" stroke-width="3" stroke-linecap="round"/>
<path d="M686 438c22 26 32 58 32 90 1 28-3 52-9 68" fill="none" stroke="#050b0f" stroke-opacity=".32" stroke-width="3" stroke-linecap="round"/>
<ellipse cx="740" cy="601" rx="27" ry="16" fill="#26333e" stroke="#070d12" stroke-opacity=".75" stroke-width="2"/>
<path d="M727 612v8M740 614v8M753 613v7" stroke="#0a1117" stroke-width="5" stroke-linecap="round" opacity=".9"/>
<path d="M727 592c9-4 21-4 30 0" fill="none" stroke="#9db4c3" stroke-opacity=".65" stroke-width="2.4" stroke-linecap="round"/>
<ellipse cx="748" cy="595" rx="13" ry="5" fill="#fff" opacity=".2" filter="url(#blur3)"/>
<ellipse cx="740" cy="601" rx="22" ry="10" fill="#fff" opacity=".08" filter="url(#blur3)"/>
<g fill="#e8f0f4">
<circle cx="751" cy="566" r="2" opacity=".4"/>
<circle cx="739" cy="580" r="1.5" opacity=".5"/>
<circle cx="744" cy="588" r="2.4" opacity=".35"/>
<circle cx="730" cy="572" r="1.2" opacity=".4"/>
</g>
</g>
</g>
<!-- chalk bucket -->
<g>
<ellipse cx="948" cy="708" rx="48" ry="10" fill="#000" opacity=".5" filter="url(#blur3)"/>
<path d="M902 678c0 24 12 38 46 38s46-14 46-38z" fill="#26333b" stroke="#0a141a" stroke-opacity=".6"/>
<ellipse cx="948" cy="678" rx="46" ry="13" fill="#33434c" stroke="#0a141a" stroke-opacity=".5"/>
<ellipse cx="948" cy="676" rx="38" ry="10" fill="#e9eef1"/>
<ellipse cx="942" cy="673" rx="15" ry="5" fill="#fff"/>
<path d="M916 686c8 4 20 5 30 3" stroke="#b9c8d0" stroke-width="3" fill="none" stroke-linecap="round" opacity=".5"/>
<rect x="1002" y="687" width="26" height="20" rx="3" transform="rotate(-9 1015 697)" fill="#f4f7f8" opacity=".9"/>
</g>
<!-- chalk dust -->
<g class="dust" fill="#eef4f7">
<circle cx="430" cy="560" r="4" opacity=".35"/>
<circle cx="414" cy="584" r="2.4" opacity=".5"/>
<circle cx="446" cy="546" r="2" opacity=".45"/>
<circle cx="422" cy="612" r="3" opacity=".3"/>
<circle cx="404" cy="601" r="1.7" opacity=".45"/>
<circle cx="452" cy="576" r="1.6" opacity=".5"/>
</g>
<g class="dust b" fill="#eef4f7">
<circle cx="772" cy="556" r="4.2" opacity=".32"/>
<circle cx="790" cy="582" r="2.2" opacity=".45"/>
<circle cx="756" cy="606" r="2.8" opacity=".3"/>
<circle cx="782" cy="620" r="1.7" opacity=".45"/>
<circle cx="812" cy="598" r="1.5" opacity=".4"/>
</g>
<g class="dust c" fill="#eef4f7">
<circle cx="540" cy="650" r="2" opacity=".3"/>
<circle cx="668" cy="646" r="2.4" opacity=".26"/>
<circle cx="596" cy="626" r="1.6" opacity=".28"/>
<circle cx="902" cy="664" r="2" opacity=".3"/>
<circle cx="986" cy="672" r="1.6" opacity=".26"/>
</g>
<!-- finishing light -->
<rect width="1200" height="800" fill="url(#vignette)"/>
<rect width="1200" height="800" filter="url(#grain)" opacity=".045" style="mix-blend-mode:overlay"/>
</svg>
<div class="footer">
<span>Set · Grip · Pull</span>
<span>Chalk up</span>
</div>
</main>
</body>
</html>Watch the test
Video tests of this model on coding and agent work.
Same prompt, other models
One email when a new model lands on the board or in the showcase. Unsubscribe anytime.