Showcase

A penguin about to deadlift, built by DeepSeek V4.1 Flash 1017

Hostedvia OpenCodeOpenRouter
Running live in your browserNew tab
Speed
230tok/s
First token included
Written
143.2Ktokens
Time to build
10m 22s
Cost to build
$0.11
DeepSeek V4.1 Flash 1017's builds and scores
Show the code the model wrote
HTML30,090 characters
<!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 &mdash; 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 &amp; 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 &amp; 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 &middot; Grip &middot; Pull</span>
    <span>Chalk up</span>
  </div>
</main>
</body>
</html>

Watch the test

Video tests of this model on coding and agent work.

DeepSeek V4.1 Flash First Test | Better V4 Flash? | Coding with OpenCode, Frontend & Agentic Work11 Sep 2026

Same prompt, other models

6 more
Compare side by side

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