A penguin about to deadlift, built by Claude Opus 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 Deadlift</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Oswald:wght@600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0a0d12;
--caption: #8592a3;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px 16px;
background: radial-gradient(ellipse at 50% 35%, #172231 0%, var(--bg) 70%);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
figure { margin: 0; width: min(100%, 1200px); }
svg {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05);
}
figcaption {
margin-top: 14px;
text-align: center;
color: var(--caption);
font-size: 14px;
letter-spacing: .02em;
}
.chalk-font { font-family: "Caveat", "Comic Sans MS", "Chalkboard SE", cursive; }
.sign-font { font-family: "Oswald", "Impact", "Arial Narrow", sans-serif; }
/* ---- animation ---- */
.anim-head { animation: brace 3.4s ease-in-out infinite; }
.anim-belly { animation: belly 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 40%; }
.anim-blink { animation: blink 6s infinite; transform-box: fill-box; transform-origin: 50% 60%; }
.anim-tails { animation: sway 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 50%; }
.anim-sweat { animation: sweat 3.8s ease-in infinite; }
.anim-aurora { animation: aurora 10s ease-in-out infinite alternate; }
.flake { animation: snow 9s linear infinite; }
.dust { animation: dust 4.5s ease-out infinite; opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes brace { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.6px); } }
@keyframes belly { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.018, 1.01); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes sweat {
0% { transform: translateY(-6px); opacity: 0; }
20% { opacity: 1; }
80% { transform: translateY(16px); opacity: .9; }
100% { transform: translateY(22px); opacity: 0; }
}
@keyframes aurora { 0% { transform: translateX(-14px); opacity: .55; } 100% { transform: translateX(14px); opacity: 1; } }
@keyframes snow { 0% { transform: translate(0, 0); } 100% { transform: translate(-14px, 330px); } }
@keyframes dust {
0% { transform: translate(0, 0) scale(.6); opacity: 0; }
15% { opacity: .85; }
100% { transform: translate(8px, -46px) scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
svg * { animation: none !important; }
.dust { opacity: .5; }
}
</style>
</head>
<body>
<figure>
<svg viewBox="0 0 1200 900" role="img" aria-labelledby="t d" xmlns="http://www.w3.org/2000/svg">
<title id="t">Penguin ready to deadlift</title>
<desc id="d">A determined penguin in a red headband and lifting belt stands at a power rack, flippers chalked and gripping a loaded barbell on a wooden platform, set up to deadlift. A chalkboard reads "Deadlift 1 × 1 @ 235 kg" and an aurora glows through the window.</desc>
<defs>
<!-- environment -->
<linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#18212d"/>
<stop offset="1" stop-color="#2b3a4c"/>
</linearGradient>
<pattern id="blocks" width="120" height="56" patternUnits="userSpaceOnUse">
<path d="M0 .75H120M0 28.75H120M.75 0V28M60.75 28V56" fill="none" stroke="#fff" stroke-opacity=".05" stroke-width="1.5"/>
</pattern>
<radialGradient id="halo" cx=".5" cy=".5" r=".5">
<stop offset="0" stop-color="#7aa3cf" stop-opacity=".42"/>
<stop offset="1" stop-color="#7aa3cf" stop-opacity="0"/>
</radialGradient>
<linearGradient id="floor" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#0d1015"/>
<stop offset="1" stop-color="#1a1e25"/>
</linearGradient>
<pattern id="speckle" width="14" height="14" patternUnits="userSpaceOnUse">
<circle cx="3" cy="4" r=".9" fill="#fff" fill-opacity=".06"/>
<circle cx="10" cy="9" r=".7" fill="#fff" fill-opacity=".05"/>
<circle cx="7" cy="12.5" r=".6" fill="#8fb0ff" fill-opacity=".06"/>
</pattern>
<linearGradient id="wood" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7e522b"/>
<stop offset="1" stop-color="#c58b52"/>
</linearGradient>
<radialGradient id="spot" cx=".5" cy=".5" r=".5">
<stop offset="0" stop-color="#fff4d6" stop-opacity=".26"/>
<stop offset="1" stop-color="#fff4d6" stop-opacity="0"/>
</radialGradient>
<linearGradient id="cone" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffe9b8" stop-opacity=".16"/>
<stop offset="1" stop-color="#ffe9b8" stop-opacity="0"/>
</linearGradient>
<radialGradient id="vignette" cx=".5" cy=".48" r=".72">
<stop offset=".55" stop-color="#000" stop-opacity="0"/>
<stop offset="1" stop-color="#000" stop-opacity=".6"/>
</radialGradient>
<!-- window -->
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#060d22"/>
<stop offset=".6" stop-color="#11345a"/>
<stop offset="1" stop-color="#2a6788"/>
</linearGradient>
<clipPath id="winClip"><rect x="52" y="122" width="236" height="296" rx="3"/></clipPath>
<!-- steel -->
<linearGradient id="steel" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#4a525e"/>
<stop offset=".25" stop-color="#2d333c"/>
<stop offset="1" stop-color="#1b1f25"/>
</linearGradient>
<linearGradient id="steelBack" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#2a3039"/>
<stop offset="1" stop-color="#15191e"/>
</linearGradient>
<pattern id="holes" width="32" height="26" patternUnits="userSpaceOnUse">
<rect x="11" y="8" width="10" height="10" rx="2.5" fill="#07090c"/>
</pattern>
<pattern id="holesBack" width="28" height="24" patternUnits="userSpaceOnUse">
<rect x="10" y="8" width="8" height="8" rx="2" fill="#07090c" fill-opacity=".8"/>
</pattern>
<linearGradient id="chrome" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#59616c"/>
<stop offset=".28" stop-color="#f4f7fa"/>
<stop offset=".55" stop-color="#a6afb9"/>
<stop offset="1" stop-color="#3a4048"/>
</linearGradient>
<linearGradient id="chromeH" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#6b737e"/>
<stop offset=".4" stop-color="#eef2f6"/>
<stop offset="1" stop-color="#7d8692"/>
</linearGradient>
<pattern id="knurl" width="4" height="4" patternUnits="userSpaceOnUse">
<path d="M0 0L4 4M4 0L0 4" stroke="#1c2127" stroke-opacity=".5" stroke-width=".8"/>
</pattern>
<!-- plates -->
<linearGradient id="redFace" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ff6255"/>
<stop offset=".45" stop-color="#d92b2b"/>
<stop offset="1" stop-color="#9c1a1a"/>
</linearGradient>
<linearGradient id="blueFace" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#4f8cf0"/>
<stop offset=".45" stop-color="#1f5fc4"/>
<stop offset="1" stop-color="#143f85"/>
</linearGradient>
<linearGradient id="greenFace" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#55c777"/>
<stop offset="1" stop-color="#1d7a3c"/>
</linearGradient>
<!-- penguin -->
<radialGradient id="bodyGrad" cx=".38" cy=".22" r=".85">
<stop offset="0" stop-color="#465066"/>
<stop offset=".45" stop-color="#262c38"/>
<stop offset="1" stop-color="#13161c"/>
</radialGradient>
<radialGradient id="headGrad" cx=".4" cy=".25" r=".8">
<stop offset="0" stop-color="#4b5670"/>
<stop offset=".55" stop-color="#252b37"/>
<stop offset="1" stop-color="#14171d"/>
</radialGradient>
<linearGradient id="bellyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#d2dce8"/>
</linearGradient>
<linearGradient id="flipGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#3e4759"/>
<stop offset="1" stop-color="#1a1e26"/>
</linearGradient>
<linearGradient id="beakGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffc35c"/>
<stop offset="1" stop-color="#f08124"/>
</linearGradient>
<linearGradient id="footGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffb04a"/>
<stop offset="1" stop-color="#e57a1c"/>
</linearGradient>
<linearGradient id="leather" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#4a2c1c"/>
<stop offset="1" stop-color="#26150d"/>
</linearGradient>
<clipPath id="headClip"><circle cx="600" cy="485" r="100"/></clipPath>
<filter id="blur2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="2"/></filter>
<filter id="blur6" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="6"/></filter>
<filter id="blur10" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="10"/></filter>
</defs>
<!-- =================== WALL =================== -->
<rect width="1200" height="600" fill="url(#wall)"/>
<rect width="1200" height="600" fill="url(#blocks)"/>
<!-- window with an Antarctic night -->
<g>
<rect x="40" y="110" width="260" height="320" rx="8" fill="#0c1016" stroke="#3a4453" stroke-width="3"/>
<g clip-path="url(#winClip)">
<rect x="52" y="122" width="236" height="296" fill="url(#sky)"/>
<g fill="#fff">
<circle cx="74" cy="140" r="1.1" opacity=".8"/><circle cx="118" cy="132" r=".8" opacity=".6"/>
<circle cx="150" cy="158" r="1.2" opacity=".9"/><circle cx="204" cy="136" r=".9" opacity=".7"/>
<circle cx="246" cy="150" r="1.3" opacity=".8"/><circle cx="272" cy="130" r=".8" opacity=".6"/>
<circle cx="96" cy="176" r=".8" opacity=".5"/><circle cx="230" cy="186" r=".9" opacity=".6"/>
</g>
<g class="anim-aurora" filter="url(#blur6)">
<path d="M30 214C80 170 128 236 180 190S260 168 310 196L310 232C262 214 222 254 170 228S84 246 30 258Z" fill="#46f5a6" opacity=".45"/>
<path d="M30 186C90 150 130 196 190 166S270 150 310 168L310 186C260 176 220 206 170 196S80 200 30 210Z" fill="#9b7bff" opacity=".35"/>
</g>
<polygon points="52,330 84,286 104,302 140,250 172,296 200,280 236,318 266,292 288,306 288,380 52,380" fill="#7c9fbf"/>
<polygon points="140,250 156,276 146,296 172,296" fill="#c8dcec"/>
<polygon points="84,286 92,300 80,312 104,302" fill="#c8dcec"/>
<polygon points="266,292 276,304 262,312 288,306" fill="#c8dcec"/>
<rect x="52" y="372" width="236" height="46" fill="#0a2236"/>
<polygon points="118,380 134,358 158,364 170,350 198,380" fill="#e9f4fc"/>
<polygon points="170,350 198,380 176,380" fill="#a9c8df"/>
<path d="M124 388H192M136 396H182" stroke="#e9f4fc" stroke-opacity=".25" stroke-width="2"/>
<g fill="#fff" opacity=".9">
<circle class="flake" cx="64" cy="100" r="2" style="animation-delay:-0.5s"/>
<circle class="flake" cx="92" cy="100" r="1.5" style="animation-delay:-3.2s;animation-duration:11s"/>
<circle class="flake" cx="118" cy="100" r="2.4" style="animation-delay:-6.1s"/>
<circle class="flake" cx="146" cy="100" r="1.6" style="animation-delay:-1.8s;animation-duration:10s"/>
<circle class="flake" cx="172" cy="100" r="2" style="animation-delay:-7.4s"/>
<circle class="flake" cx="198" cy="100" r="1.4" style="animation-delay:-4.6s;animation-duration:12s"/>
<circle class="flake" cx="226" cy="100" r="2.2" style="animation-delay:-2.7s"/>
<circle class="flake" cx="252" cy="100" r="1.6" style="animation-delay:-8.3s;animation-duration:10s"/>
<circle class="flake" cx="280" cy="100" r="2" style="animation-delay:-5.2s"/>
<circle class="flake" cx="106" cy="100" r="1.3" style="animation-delay:-9.6s;animation-duration:13s"/>
<circle class="flake" cx="212" cy="100" r="1.3" style="animation-delay:-10.9s;animation-duration:13s"/>
<circle class="flake" cx="160" cy="100" r="1.2" style="animation-delay:-11.6s;animation-duration:14s"/>
</g>
<polygon points="52,122 112,122 52,262" fill="#fff" opacity=".05"/>
</g>
<rect x="167" y="122" width="6" height="296" fill="#0c1016"/>
<rect x="52" y="266" width="236" height="6" fill="#0c1016"/>
<rect x="32" y="428" width="276" height="12" rx="2" fill="#3a4351"/>
</g>
<!-- chalkboard -->
<g>
<rect x="900" y="116" width="270" height="292" rx="6" fill="#6a4728" stroke="#3d2814" stroke-width="2"/>
<rect x="912" y="128" width="246" height="268" rx="2" fill="#1d2924"/>
<ellipse cx="1010" cy="250" rx="90" ry="60" fill="#fff" opacity=".035"/>
<ellipse cx="1100" cy="170" rx="50" ry="26" fill="#fff" opacity=".03"/>
<g class="chalk-font" fill="#eef3ee">
<text x="930" y="166" font-size="28" font-weight="600">Today:</text>
<text x="930" y="210" font-size="40" font-weight="700" letter-spacing="1">DEADLIFT</text>
<text x="932" y="250" font-size="27" font-weight="600">1 × 1 @ 235 kg</text>
<text x="932" y="290" font-size="22" font-weight="600" opacity=".88">big air · lats tight</text>
<text x="932" y="324" font-size="22" font-weight="600" opacity=".88">push the ice away</text>
<text x="932" y="370" font-size="22" font-weight="600" opacity=".88">then:</text>
</g>
<g fill="none" stroke="#eef3ee" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" opacity=".88">
<path d="M930 174Q978 180 1022 172"/>
<path d="M990 364Q1010 348 1032 364Q1010 380 990 364Z"/>
<path d="M1032 364L1046 354V374Z"/>
<circle cx="999" cy="361" r="1.2" fill="#eef3ee"/>
<path d="M1112 156l8 8 14-18"/>
</g>
<rect x="906" y="404" width="258" height="8" rx="2" fill="#4c331d"/>
<rect x="1040" y="398" width="22" height="6" rx="2" fill="#f2f2ee"/>
<rect x="1074" y="399" width="14" height="5" rx="2" fill="#f5c0c8"/>
</g>
<!-- warm glow behind the lifter -->
<ellipse cx="600" cy="460" rx="320" ry="270" fill="url(#halo)"/>
<!-- motto sign -->
<g>
<rect x="438" y="144" width="324" height="54" rx="6" fill="#0f141b" stroke="#f2c94c" stroke-opacity=".35" stroke-width="1.5"/>
<text class="sign-font" x="600" y="180" font-size="23" font-weight="600" fill="#f2c94c" text-anchor="middle"
textLength="290" lengthAdjust="spacingAndGlyphs">WADDLE · BRACE · PULL</text>
</g>
<!-- baseboard + floor -->
<rect x="0" y="586" width="1200" height="12" fill="#0d1116"/>
<rect x="0" y="596" width="1200" height="304" fill="url(#floor)"/>
<rect x="0" y="596" width="1200" height="304" fill="url(#speckle)"/>
<!-- pendant lamps -->
<g>
<polygon points="142,64 198,64 360,600 -20,600" fill="url(#cone)"/>
<polygon points="1002,64 1058,64 1220,600 840,600" fill="url(#cone)"/>
<g stroke="#07090c" stroke-width="2"><line x1="170" y1="0" x2="170" y2="36"/><line x1="1030" y1="0" x2="1030" y2="36"/></g>
<ellipse cx="170" cy="66" rx="60" ry="16" fill="#ffd98a" opacity=".28" filter="url(#blur10)"/>
<ellipse cx="1030" cy="66" rx="60" ry="16" fill="#ffd98a" opacity=".28" filter="url(#blur10)"/>
<path d="M140 63L153 36H187L200 63Z" fill="#2b313a" stroke="#0d1014" stroke-width="2"/>
<path d="M1000 63L1013 36H1047L1060 63Z" fill="#2b313a" stroke="#0d1014" stroke-width="2"/>
<ellipse cx="170" cy="63" rx="30" ry="4.5" fill="#fff0c8"/>
<ellipse cx="1030" cy="63" rx="30" ry="4.5" fill="#fff0c8"/>
</g>
<!-- =================== POWER RACK =================== -->
<!-- back frame -->
<g>
<g transform="translate(393 102)">
<rect width="28" height="508" fill="url(#steelBack)"/>
<rect width="28" height="508" fill="url(#holesBack)"/>
</g>
<g transform="translate(779 102)">
<rect width="28" height="508" fill="url(#steelBack)"/>
<rect width="28" height="508" fill="url(#holesBack)"/>
</g>
<rect x="393" y="102" width="414" height="22" fill="#1d2229"/>
<rect x="393" y="596" width="414" height="14" fill="#14171c"/>
<polygon points="393,598 421,598 400,656 368,656" fill="#181c22"/>
<polygon points="779,598 807,598 832,656 800,656" fill="#181c22"/>
</g>
<!-- front frame -->
<g>
<g transform="translate(364 70)">
<rect width="32" height="580" fill="url(#steel)"/>
<rect y="30" width="32" height="550" fill="url(#holes)"/>
<rect width="32" height="580" fill="none" stroke="#0a0c0f" stroke-width="2"/>
</g>
<g transform="translate(804 70)">
<rect width="32" height="580" fill="url(#steel)"/>
<rect y="30" width="32" height="550" fill="url(#holes)"/>
<rect width="32" height="580" fill="none" stroke="#0a0c0f" stroke-width="2"/>
</g>
<rect x="364" y="70" width="472" height="28" fill="#262c35" stroke="#0a0c0f" stroke-width="2"/>
<line x1="366" y1="72" x2="834" y2="72" stroke="#5a6472" stroke-width="1.5"/>
<text class="sign-font" x="600" y="90" font-size="14" font-weight="600" fill="#dfe6ee" text-anchor="middle" letter-spacing="6">ANTARCTIC IRON</text>
<rect x="350" y="644" width="60" height="12" rx="2" fill="#1f242b" stroke="#0a0c0f" stroke-width="1.5"/>
<rect x="790" y="644" width="60" height="12" rx="2" fill="#1f242b" stroke="#0a0c0f" stroke-width="1.5"/>
<!-- J-hooks -->
<g id="jhook">
<rect x="360" y="212" width="40" height="44" rx="4" fill="#2d333c" stroke="#0e1115" stroke-width="2"/>
<path d="M398 222H416Q423 222 423 229V246Q423 257 412 257H398Z" fill="#2d333c" stroke="#0e1115" stroke-width="2"/>
<path d="M401 226H414Q418 226 418 230V243Q418 251 410 251H401Z" fill="#f2c230"/>
<circle cx="380" cy="234" r="4.5" fill="#a3acb7" stroke="#0e1115" stroke-width="1.5"/>
</g>
<use href="#jhook" transform="translate(1200 0) scale(-1 1)"/>
<!-- resistance band hanging on the right hook -->
<path d="M818 256C800 300 802 380 812 424C818 446 832 446 836 424C844 380 846 304 830 256" fill="none" stroke="#7b55d9" stroke-width="6" stroke-linecap="round"/>
<path d="M818 256C800 300 802 380 812 424" fill="none" stroke="#a88cf0" stroke-width="2" stroke-linecap="round" opacity=".6"/>
</g>
<!-- =================== PLATFORM =================== -->
<polygon points="204,660 996,660 1284,900 -84,900" fill="#111418"/>
<polygon points="204,660 996,660 1284,900 -84,900" fill="url(#speckle)"/>
<polygon points="402,660 798,660 942,900 258,900" fill="url(#wood)"/>
<g stroke="#5e3a1d" stroke-opacity=".55" stroke-width="1.5">
<line x1="468" y1="660" x2="372" y2="900"/>
<line x1="534" y1="660" x2="486" y2="900"/>
<line x1="600" y1="660" x2="600" y2="900"/>
<line x1="666" y1="660" x2="714" y2="900"/>
<line x1="732" y1="660" x2="828" y2="900"/>
<line x1="428" y1="728" x2="486" y2="728"/>
<line x1="560" y1="700" x2="610" y2="700"/>
<line x1="660" y1="752" x2="718" y2="752"/>
<line x1="764" y1="690" x2="790" y2="690"/>
<line x1="520" y1="850" x2="588" y2="850"/>
<line x1="780" y1="836" x2="856" y2="836"/>
<line x1="340" y1="880" x2="420" y2="880"/>
</g>
<g stroke="#000" stroke-opacity=".5" stroke-width="2">
<line x1="402" y1="660" x2="258" y2="900"/>
<line x1="798" y1="660" x2="942" y2="900"/>
</g>
<line x1="204" y1="660" x2="996" y2="660" stroke="#4a5260" stroke-width="2"/>
<line x1="204" y1="660" x2="-84" y2="900" stroke="#2c323b" stroke-width="2"/>
<line x1="996" y1="660" x2="1284" y2="900" stroke="#2c323b" stroke-width="2"/>
<ellipse cx="600" cy="780" rx="460" ry="130" fill="url(#spot)"/>
<!-- chalk mess on the platform -->
<g fill="#fff">
<ellipse cx="560" cy="826" rx="46" ry="8" opacity=".08"/>
<ellipse cx="664" cy="832" rx="34" ry="6" opacity=".07"/>
<ellipse cx="452" cy="850" rx="20" ry="4" opacity=".06"/>
</g>
<!-- chalky footprints from the bowl to the bar -->
<g fill="none" stroke="#f4f6f8" stroke-width="3.5" stroke-linecap="round">
<path transform="translate(154 764) rotate(135)" d="M0 6V-7M0 2L-6 -7M0 2L6 -7" opacity=".14"/>
<path transform="translate(196 800) rotate(124)" d="M0 6V-7M0 2L-6 -7M0 2L6 -7" opacity=".17"/>
<path transform="translate(240 830) rotate(112)" d="M0 6V-7M0 2L-6 -7M0 2L6 -7" opacity=".2"/>
<path transform="translate(302 852) rotate(98)" d="M0 6V-7M0 2L-6 -7M0 2L6 -7" opacity=".23"/>
<path transform="translate(370 846) rotate(86)" d="M0 6V-7M0 2L-6 -7M0 2L6 -7" opacity=".26"/>
<path transform="translate(438 846) rotate(76)" d="M0 6V-7M0 2L-6 -7M0 2L6 -7" opacity=".3"/>
<path transform="translate(494 824) rotate(66)" d="M0 6V-7M0 2L-6 -7M0 2L6 -7" opacity=".34"/>
</g>
<!-- chalk stand -->
<g>
<ellipse cx="110" cy="714" rx="44" ry="10" fill="#000" opacity=".45" filter="url(#blur2)"/>
<ellipse cx="110" cy="710" rx="40" ry="9" fill="#232830" stroke="#0d1014" stroke-width="2"/>
<rect x="105" y="520" width="10" height="190" fill="url(#chromeH)"/>
<path d="M52 498H168L156 532Q110 545 64 532Z" fill="#8a949f" stroke="#454d57" stroke-width="2"/>
<path d="M62 506H158" stroke="#fff" stroke-opacity=".25" stroke-width="2"/>
<path d="M70 520Q80 528 76 536M138 520Q132 530 140 534" stroke="#fff" stroke-opacity=".5" stroke-width="3" fill="none" stroke-linecap="round"/>
<ellipse cx="110" cy="498" rx="58" ry="9" fill="#b0b9c3"/>
<path d="M58 498Q76 478 98 485Q114 472 134 482Q152 478 162 498Q110 508 58 498Z" fill="#f4f6f8"/>
<rect x="86" y="480" width="18" height="12" rx="3" fill="#fff" stroke="#d7dde3" transform="rotate(-12 95 486)"/>
<rect x="118" y="478" width="16" height="11" rx="3" fill="#fff" stroke="#d7dde3" transform="rotate(10 126 484)"/>
<text x="110" y="526" font-family="system-ui, sans-serif" font-size="11" font-weight="700" fill="#2b3139" text-anchor="middle" letter-spacing="2">CHALK</text>
<g fill="#fff">
<circle class="dust" cx="92" cy="476" r="3" style="animation-delay:-0.4s"/>
<circle class="dust" cx="112" cy="470" r="2.4" style="animation-delay:-1.9s"/>
<circle class="dust" cx="130" cy="474" r="3.2" style="animation-delay:-3.1s"/>
<circle class="dust" cx="102" cy="468" r="2" style="animation-delay:-2.6s;animation-duration:5.5s"/>
</g>
</g>
<!-- towel + pre-workout sardine -->
<g>
<polygon points="22,846 176,838 194,886 10,894" fill="#3f8fc0"/>
<polygon points="22,846 176,838 179,846 21,854" fill="#e9f4fb" opacity=".9"/>
<polygon points="14,880 190,872 192,878 12,886" fill="#e9f4fb" opacity=".9"/>
<g transform="rotate(-5 104 864)">
<path d="M70 864Q92 848 124 860Q130 864 124 868Q92 880 70 864Z" fill="#b7c6d3" stroke="#5f7284" stroke-width="2"/>
<path d="M72 864Q96 856 124 862" stroke="#5c7fa6" stroke-width="3" fill="none" opacity=".6"/>
<path d="M124 864L140 852L136 864L140 876Z" fill="#9fb1c1" stroke="#5f7284" stroke-width="2" stroke-linejoin="round"/>
<circle cx="80" cy="861" r="2.4" fill="#1a1f26"/>
</g>
</g>
<!-- shaker + kettlebell -->
<g>
<ellipse cx="1088" cy="824" rx="30" ry="7" fill="#000" opacity=".45" filter="url(#blur2)"/>
<path d="M1066 752H1110L1106 818Q1088 826 1070 818Z" fill="#dfe8f0" fill-opacity=".35" stroke="#c9d4de" stroke-width="2"/>
<path d="M1068 774H1108L1106 818Q1088 826 1070 818Z" fill="#f49ab0"/>
<rect x="1064" y="736" width="48" height="18" rx="4" fill="#20252c" stroke="#0d1014" stroke-width="1.5"/>
<rect x="1080" y="726" width="14" height="12" rx="3" fill="#20252c"/>
<rect x="1068" y="788" width="40" height="14" fill="#fff"/>
<text x="1088" y="799" font-family="system-ui, sans-serif" font-size="9" font-weight="800" fill="#c2324f" text-anchor="middle" letter-spacing="1">KRILL</text>
<ellipse cx="1150" cy="856" rx="44" ry="9" fill="#000" opacity=".5" filter="url(#blur2)"/>
<path d="M1124 806C1116 760 1184 760 1176 806" fill="none" stroke="#20252c" stroke-width="11" stroke-linecap="round"/>
<path d="M1124 806C1116 760 1184 760 1176 806" fill="none" stroke="#4a5362" stroke-width="3" stroke-linecap="round" opacity=".5" transform="translate(-2 -2)"/>
<circle cx="1150" cy="818" r="36" fill="#20252c"/>
<ellipse cx="1150" cy="852" rx="26" ry="5" fill="#15191e"/>
<ellipse cx="1138" cy="806" rx="12" ry="8" fill="#4a5362" opacity=".55"/>
<text x="1150" y="830" font-family="system-ui, sans-serif" font-size="16" font-weight="800" fill="#e6ebf0" text-anchor="middle">24</text>
</g>
<!-- =================== SHADOWS =================== -->
<ellipse cx="600" cy="808" rx="175" ry="17" fill="#000" opacity=".55" filter="url(#blur6)"/>
<ellipse cx="948" cy="808" rx="82" ry="10" fill="#000" opacity=".55" filter="url(#blur6)"/>
<ellipse cx="252" cy="808" rx="82" ry="10" fill="#000" opacity=".55" filter="url(#blur6)"/>
<!-- =================== PLATES (right side; mirrored on the left) =================== -->
<g id="plates">
<!-- sleeve end + collar -->
<rect x="960" y="690" width="58" height="20" fill="url(#chrome)" stroke="#2a2f36" stroke-width="1.5"/>
<ellipse cx="1018" cy="700" rx="4" ry="10" fill="#d6dde4" stroke="#2a2f36" stroke-width="1.5"/>
<ellipse cx="990" cy="700" rx="5" ry="21" fill="#8e98a3" stroke="#2a2f36" stroke-width="1.5"/>
<rect x="966" y="679" width="24" height="42" fill="url(#chrome)"/>
<rect x="974" y="666" width="8" height="14" rx="2" fill="#c0392b" stroke="#5c1610" stroke-width="1.5"/>
<!-- 10 kg green -->
<ellipse cx="963" cy="700" rx="17" ry="78" fill="#165a2c" stroke="#0b3018" stroke-width="1.5"/>
<rect x="947" y="622" width="16" height="156" fill="#165a2c"/>
<ellipse cx="947" cy="700" rx="17" ry="78" fill="url(#greenFace)"/>
<!-- 20 kg blue -->
<ellipse cx="947" cy="700" rx="23" ry="105" fill="#123a78" stroke="#081d40" stroke-width="1.5"/>
<rect x="934" y="595" width="13" height="210" fill="#123a78"/>
<ellipse cx="934" cy="700" rx="23" ry="105" fill="url(#blueFace)"/>
<!-- 25 kg reds -->
<ellipse cx="934" cy="700" rx="23" ry="105" fill="#8f1717" stroke="#4d0909" stroke-width="1.5"/>
<rect x="920" y="595" width="14" height="210" fill="#8f1717"/>
<ellipse cx="920" cy="700" rx="23" ry="105" fill="url(#redFace)"/>
<ellipse cx="920" cy="700" rx="23" ry="105" fill="#8f1717" stroke="#4d0909" stroke-width="1.5"/>
<rect x="906" y="595" width="14" height="210" fill="#8f1717"/>
<ellipse cx="906" cy="700" rx="23" ry="105" fill="url(#redFace)"/>
<ellipse cx="906" cy="700" rx="23" ry="105" fill="#8f1717" stroke="#4d0909" stroke-width="1.5"/>
<rect x="892" y="595" width="14" height="210" fill="#8f1717"/>
<ellipse cx="892" cy="700" rx="23" ry="105" fill="url(#redFace)" stroke="#5e0f0f" stroke-width="1.5"/>
<!-- face detail -->
<ellipse cx="892" cy="700" rx="19" ry="88" fill="none" stroke="#000" stroke-opacity=".22" stroke-width="2"/>
<path d="M880 622Q884 604 892 600" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="2.5" stroke-linecap="round"/>
<ellipse cx="892" cy="700" rx="9" ry="34" fill="url(#chromeH)" stroke="#3a4048" stroke-width="1.5"/>
<ellipse cx="892" cy="700" rx="4.5" ry="12" fill="#1a1d22"/>
</g>
<use href="#plates" transform="translate(1200 0) scale(-1 1)"/>
<g font-family="system-ui, sans-serif" font-weight="800" fill="#fff" text-anchor="middle" opacity=".9">
<text transform="translate(892 657) scale(.34 1)" font-size="30">25</text>
<text transform="translate(308 657) scale(.34 1)" font-size="30">25</text>
<text transform="translate(892 764) scale(.34 1)" font-size="18">KG</text>
<text transform="translate(308 764) scale(.34 1)" font-size="18">KG</text>
</g>
<!-- =================== PENGUIN =================== -->
<g id="penguin">
<!-- legs -->
<path id="legL" d="M540 750C529 770 531 790 546 799H585C591 786 591 768 587 750Z" fill="#1d2129" stroke="#0b0d11" stroke-width="2.5"/>
<use href="#legL" transform="translate(1200 0) scale(-1 1)"/>
<!-- body -->
<path d="M600 452C690 452 752 515 760 602C766 680 742 748 672 766C642 774 558 774 528 766C458 748 434 680 440 602C448 515 510 452 600 452Z"
fill="url(#bodyGrad)" stroke="#0b0d11" stroke-width="3"/>
<!-- belly + belt (breathing in, bracing) -->
<g class="anim-belly">
<path d="M600 562C664 562 712 612 715 676C718 725 690 756 642 764C616 768 584 768 558 764C510 756 482 725 485 676C488 612 536 562 600 562Z" fill="url(#bellyGrad)"/>
<path d="M440 622Q600 648 760 622L763 664Q600 692 437 664Z" fill="url(#leather)" stroke="#120a05" stroke-width="2"/>
<path d="M444 630Q600 656 756 630" fill="none" stroke="#d64545" stroke-width="1.8" stroke-dasharray="5 4"/>
<path d="M442 657Q600 684 758 657" fill="none" stroke="#d64545" stroke-width="1.8" stroke-dasharray="5 4"/>
<rect x="580" y="636" width="40" height="42" rx="6" fill="none" stroke="#dbe1e8" stroke-width="5"/>
<rect x="580" y="636" width="40" height="42" rx="6" fill="none" stroke="#7d8692" stroke-width="1" transform="translate(1 1)"/>
<line x1="600" y1="636" x2="600" y2="678" stroke="#dbe1e8" stroke-width="4"/>
<line x1="600" y1="657" x2="624" y2="657" stroke="#c4ccd5" stroke-width="3" stroke-linecap="round"/>
<circle cx="520" cy="650" r="3" fill="#c9a24a"/><circle cx="680" cy="650" r="3" fill="#c9a24a"/>
</g>
<!-- flippers (upper part) -->
<g id="flipL">
<path d="M492 515C462 520 440 552 436 600C432 645 440 676 446 694H478C478 660 482 620 490 585C495 560 502 538 506 522Z"
fill="url(#flipGrad)" stroke="#0b0d11" stroke-width="2.5"/>
<path d="M486 520C462 528 446 558 441 600C438 630 441 660 446 684" fill="none" stroke="#8eaad0" stroke-opacity=".45" stroke-width="2.5" stroke-linecap="round"/>
</g>
<use href="#flipL" transform="translate(1200 0) scale(-1 1)"/>
<!-- head -->
<g class="anim-head">
<!-- headband tails, flowing behind -->
<g class="anim-tails">
<path d="M686 424C714 418 736 404 754 390L762 401C744 418 722 436 692 440Z" fill="#e63946" stroke="#7e1620" stroke-width="1.5"/>
<path d="M688 436C712 444 728 460 742 478L731 485C718 468 704 456 684 448Z" fill="#c92a37" stroke="#7e1620" stroke-width="1.5"/>
</g>
<circle cx="600" cy="485" r="100" fill="url(#headGrad)" stroke="#0b0d11" stroke-width="3"/>
<path d="M517 437A96 96 0 0 1 683 437" fill="none" stroke="#b4cdea" stroke-opacity=".4" stroke-width="3" stroke-linecap="round"/>
<!-- face mask -->
<path d="M600 445C578 420 526 422 520 468C514 515 545 566 600 580C655 566 686 515 680 468C674 422 622 420 600 445Z" fill="#fbfdff"/>
<!-- headband -->
<g clip-path="url(#headClip)">
<path d="M480 398Q600 428 720 398V422Q600 452 480 422Z" fill="#e63946"/>
<path d="M480 407Q600 437 720 407V412Q600 442 480 412Z" fill="#fff" opacity=".9"/>
<path d="M480 422Q600 452 720 422" fill="none" stroke="#7e1620" stroke-width="1.5"/>
</g>
<ellipse cx="687" cy="431" rx="9" ry="11" fill="#c92a37" stroke="#7e1620" stroke-width="1.5"/>
<!-- determined eyes -->
<g class="anim-blink">
<path d="M556 478L581 486C581 497 576 503 568 503C560 503 555 494 556 478Z" fill="#15181e"/>
<path d="M644 478L619 486C619 497 624 503 632 503C640 503 645 494 644 478Z" fill="#15181e"/>
<circle cx="572" cy="492" r="3.2" fill="#fff"/><circle cx="564" cy="498" r="1.5" fill="#fff"/>
<circle cx="636" cy="492" r="3.2" fill="#fff"/><circle cx="628" cy="498" r="1.5" fill="#fff"/>
</g>
<g fill="none" stroke="#15181e" stroke-width="7" stroke-linecap="round">
<path d="M545 464Q566 466 587 477"/>
<path d="M655 464Q634 466 613 477"/>
</g>
<!-- blush + beak -->
<ellipse cx="541" cy="523" rx="13" ry="7" fill="#ff7f9b" opacity=".45"/>
<ellipse cx="659" cy="523" rx="13" ry="7" fill="#ff7f9b" opacity=".45"/>
<path d="M581 510C588 501 612 501 619 510C617 526 608 540 600 548C592 540 583 526 581 510Z" fill="url(#beakGrad)" stroke="#b55c12" stroke-width="2"/>
<path d="M587 522Q600 529 613 522" fill="none" stroke="#b55c12" stroke-width="2" stroke-linecap="round"/>
<circle cx="594" cy="510" r="1.6" fill="#b55c12"/><circle cx="606" cy="510" r="1.6" fill="#b55c12"/>
<path d="M590 505Q600 502 608 505" fill="none" stroke="#fff" stroke-opacity=".6" stroke-width="2" stroke-linecap="round"/>
<!-- sweat -->
<g class="anim-sweat">
<path d="M494 434C494 434 485 447 485 453C485 458.5 489 462 494 462C499 462 503 458.5 503 453C503 447 494 434 494 434Z" fill="#9edcff" stroke="#3a8fc4" stroke-width="1.5"/>
<circle cx="491" cy="452" r="2" fill="#fff" opacity=".8"/>
</g>
</g>
<!-- feet -->
<path id="footL" transform="rotate(8 556 800)"
d="M520 800C522 788 578 784 592 796C598 804 594 812 586 812C580 816 572 814 570 810C564 816 554 816 552 810C546 816 536 816 534 810C524 814 518 808 520 800Z"
fill="url(#footGrad)" stroke="#b25e10" stroke-width="2"/>
<use href="#footL" transform="translate(1200 0) scale(-1 1)"/>
</g>
<!-- =================== BAR =================== -->
<g>
<rect x="334" y="695" width="532" height="10" fill="url(#chrome)"/>
<rect x="340" y="695" width="246" height="10" fill="url(#knurl)"/>
<rect x="614" y="695" width="246" height="10" fill="url(#knurl)"/>
<rect x="419" y="695" width="2" height="10" fill="#e6ebf0"/>
<rect x="779" y="695" width="2" height="10" fill="#e6ebf0"/>
<rect x="334" y="695" width="532" height="10" fill="none" stroke="#2a2f36" stroke-width="1"/>
<!-- sleeve stubs + inner collars -->
<rect x="878" y="690" width="16" height="20" fill="url(#chrome)" stroke="#2a2f36" stroke-width="1"/>
<rect x="306" y="690" width="16" height="20" fill="url(#chrome)" stroke="#2a2f36" stroke-width="1"/>
<rect x="864" y="684" width="16" height="32" rx="2" fill="url(#chrome)" stroke="#2a2f36" stroke-width="1.5"/>
<rect x="320" y="684" width="16" height="32" rx="2" fill="url(#chrome)" stroke="#2a2f36" stroke-width="1.5"/>
</g>
<!-- chalk on the bar -->
<g fill="#fff" filter="url(#blur2)">
<ellipse cx="462" cy="700" rx="30" ry="5" opacity=".35"/>
<ellipse cx="738" cy="700" rx="30" ry="5" opacity=".35"/>
</g>
<!-- =================== FLIPPER GRIP (over the bar) =================== -->
<g id="gripL">
<path d="M442 688C442 679 482 679 482 688L483 712C483 725 441 725 441 712Z" fill="url(#flipGrad)" stroke="#0b0d11" stroke-width="2.5"/>
<path d="M445 709Q462 716 480 709" fill="none" stroke="#0b0d11" stroke-width="2" stroke-opacity=".7"/>
<ellipse cx="461" cy="701" rx="15" ry="9" fill="#fff" opacity=".4" filter="url(#blur2)"/>
<circle cx="452" cy="694" r="1.6" fill="#fff" opacity=".8"/>
<circle cx="470" cy="706" r="1.3" fill="#fff" opacity=".7"/>
<circle cx="459" cy="713" r="1.1" fill="#fff" opacity=".6"/>
</g>
<use href="#gripL" transform="translate(1200 0) scale(-1 1)"/>
<!-- chalk dust drifting off the flippers -->
<g fill="#fff">
<circle class="dust" cx="452" cy="688" r="2.6" style="animation-delay:-0.2s"/>
<circle class="dust" cx="470" cy="684" r="2" style="animation-delay:-1.6s;animation-duration:5s"/>
<circle class="dust" cx="460" cy="680" r="3" style="animation-delay:-3.3s"/>
<circle class="dust" cx="730" cy="686" r="2.4" style="animation-delay:-0.9s;animation-duration:5.2s"/>
<circle class="dust" cx="748" cy="682" r="2.8" style="animation-delay:-2.4s"/>
<circle class="dust" cx="740" cy="688" r="1.8" style="animation-delay:-3.9s"/>
</g>
<!-- overhead light + vignette -->
<polygon points="560,0 640,0 860,900 340,900" fill="url(#cone)" opacity=".55"/>
<rect width="1200" height="900" fill="url(#vignette)" pointer-events="none"/>
</svg>
<figcaption>Bar over mid-flipper, lats tight, big breath in. 235 kg loaded.</figcaption>
</figure>
</body>
</html>Same prompt, other models
One email when a new model lands on the board or in the showcase. Unsubscribe anytime.