Showcase

A penguin about to deadlift, built by GPT-6 Luna

Hostedvia Codex CLIOpenRouter
Running live in your browserNew tab
Show the code the model wrote
HTML13,236 characters
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#101a18">
  <title>Polar Power — Ready to Pull</title>
  <style>
    :root {
      color-scheme: dark;
      background: #101a18;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    body {
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: clamp(14px, 3vw, 40px);
      background:
        radial-gradient(ellipse at 50% 52%, rgba(43, 75, 65, .36), transparent 59%),
        #101a18;
    }
    main { width: min(100%, 1440px); }
    .poster {
      display: block;
      width: 100%;
      height: auto;
      overflow: hidden;
      border: 1px solid rgba(224, 229, 207, .18);
      border-radius: 18px;
      box-shadow: 0 36px 100px rgba(0, 0, 0, .42);
    }
    @media (max-width: 640px) {
      body { padding: 10px; }
      .poster { border-radius: 12px; }
    }
  </style>
</head>
<body>
  <main aria-label="Polar Power deadlift poster">
    <svg class="poster" viewBox="0 0 1200 760" role="img" aria-labelledby="poster-title poster-desc" xmlns="http://www.w3.org/2000/svg">
      <title id="poster-title">Ready to pull — Polar Power</title>
      <desc id="poster-desc">A focused penguin sets up to deadlift a loaded barbell inside a powerlifting rack.</desc>
      <defs>
        <linearGradient id="backdrop" x1="0" y1="0" x2="1" y2="1">
          <stop stop-color="#1c302c"/>
          <stop offset=".54" stop-color="#13211f"/>
          <stop offset="1" stop-color="#0d1716"/>
        </linearGradient>
        <radialGradient id="spot" cx="60%" cy="56%" r="57%">
          <stop stop-color="#517461" stop-opacity=".32"/>
          <stop offset="1" stop-color="#17302a" stop-opacity="0"/>
        </radialGradient>
        <linearGradient id="steel" x1="0" y1="0" x2="1" y2="0">
          <stop stop-color="#6e8279"/>
          <stop offset=".48" stop-color="#b2bba7"/>
          <stop offset="1" stop-color="#536960"/>
        </linearGradient>
        <linearGradient id="bar" x1="0" y1="0" x2="0" y2="1">
          <stop stop-color="#f0e7c7"/>
          <stop offset=".55" stop-color="#a9ad98"/>
          <stop offset="1" stop-color="#5e6a60"/>
        </linearGradient>
        <linearGradient id="plate" x1="0" y1="0" x2="1" y2="1">
          <stop stop-color="#40534b"/>
          <stop offset="1" stop-color="#1a2925"/>
        </linearGradient>
        <filter id="soft-shadow" x="-40%" y="-100%" width="180%" height="300%">
          <feGaussianBlur stdDeviation="16"/>
        </filter>
        <pattern id="grain" width="120" height="120" patternUnits="userSpaceOnUse">
          <circle cx="9" cy="17" r="1" fill="#e7e2c8" opacity=".14"/>
          <circle cx="78" cy="43" r=".8" fill="#e7e2c8" opacity=".11"/>
          <circle cx="41" cy="96" r=".7" fill="#e7e2c8" opacity=".1"/>
          <circle cx="108" cy="112" r=".8" fill="#e7e2c8" opacity=".1"/>
        </pattern>
      </defs>

      <!-- Deep green-black training hall -->
      <rect width="1200" height="760" fill="url(#backdrop)"/>
      <rect width="1200" height="760" fill="url(#spot)"/>
      <rect width="1200" height="760" fill="url(#grain)" opacity=".48"/>
      <path d="M0 615H1200" stroke="#6e8272" stroke-opacity=".13"/>
      <path d="M0 668H1200" stroke="#080f0e" stroke-opacity=".7" stroke-width="2"/>

      <!-- Club mark and poster typography -->
      <g fill="#e9e6d2">
        <path d="M67 57h40v40H67z" fill="#d8ed83"/>
        <path d="M78 66c-7 9-5 22 4 27 8 4 15 0 16-7-5 4-10 2-11-3 8-1 11-7 8-14-3 7-9 8-17 5z" fill="#18302a"/>
        <text x="121" y="76" font-size="15" font-weight="800" letter-spacing="3.4">POLAR POWER</text>
        <text x="121" y="96" font-size="10" fill="#a9b4a0" letter-spacing="2.5">BARBELL CLUB · ANTARCTICA</text>
        <text x="66" y="183" font-size="68" font-weight="900" letter-spacing="-4">READY</text>
        <text x="66" y="248" font-size="68" font-weight="900" letter-spacing="-4">TO PULL<tspan fill="#d8ed83">.</tspan></text>
      </g>
      <path d="M68 273h205" stroke="#d8ed83" stroke-width="3"/>
      <text x="68" y="302" fill="#a9b4a0" font-size="12" font-weight="700" letter-spacing="2.4">DEADLIFT · TRAINING DAY 01</text>
      <g transform="translate(980 58)">
        <rect width="152" height="33" rx="16.5" fill="#d8ed83"/>
        <circle cx="18" cy="16.5" r="4" fill="#263b32"/>
        <text x="33" y="21" fill="#263b32" font-size="10" font-weight="900" letter-spacing="1.5">IN SESSION</text>
      </g>

      <!-- Small atmosphere lines behind the rack -->
      <g fill="none" stroke="#c5d2ae" stroke-opacity=".16">
        <path d="M337 170h623" stroke-dasharray="3 9"/>
        <path d="M337 584h623" stroke-dasharray="3 9"/>
        <path d="M316 185v383M980 185v383" stroke-dasharray="2 10"/>
      </g>

      <!-- Power rack -->
      <g stroke-linecap="round" stroke-linejoin="round">
        <!-- top frame -->
        <path d="M352 198h610" stroke="#0a1211" stroke-width="24"/>
        <path d="M352 193h610" stroke="url(#steel)" stroke-width="13"/>
        <path d="M360 190h595" stroke="#d9ddc8" stroke-opacity=".4" stroke-width="2"/>
        <!-- uprights -->
        <path d="M374 198v445M941 198v445" stroke="#091210" stroke-width="28"/>
        <path d="M374 198v445M941 198v445" stroke="url(#steel)" stroke-width="16"/>
        <path d="M369 205v430M936 205v430" stroke="#d9ddc8" stroke-opacity=".28" stroke-width="2"/>
        <!-- perforations -->
        <g fill="#16241f" stroke="#dbe0c9" stroke-opacity=".25" stroke-width="1">
          <circle cx="374" cy="236" r="3.1"/><circle cx="374" cy="260" r="3.1"/><circle cx="374" cy="284" r="3.1"/><circle cx="374" cy="308" r="3.1"/><circle cx="374" cy="332" r="3.1"/><circle cx="374" cy="356" r="3.1"/><circle cx="374" cy="380" r="3.1"/><circle cx="374" cy="404" r="3.1"/><circle cx="374" cy="428" r="3.1"/><circle cx="374" cy="452" r="3.1"/><circle cx="374" cy="476" r="3.1"/><circle cx="374" cy="500" r="3.1"/><circle cx="374" cy="524" r="3.1"/><circle cx="374" cy="548" r="3.1"/><circle cx="374" cy="572" r="3.1"/><circle cx="374" cy="596" r="3.1"/>
          <circle cx="941" cy="236" r="3.1"/><circle cx="941" cy="260" r="3.1"/><circle cx="941" cy="284" r="3.1"/><circle cx="941" cy="308" r="3.1"/><circle cx="941" cy="332" r="3.1"/><circle cx="941" cy="356" r="3.1"/><circle cx="941" cy="380" r="3.1"/><circle cx="941" cy="404" r="3.1"/><circle cx="941" cy="428" r="3.1"/><circle cx="941" cy="452" r="3.1"/><circle cx="941" cy="476" r="3.1"/><circle cx="941" cy="500" r="3.1"/><circle cx="941" cy="524" r="3.1"/><circle cx="941" cy="548" r="3.1"/><circle cx="941" cy="572" r="3.1"/><circle cx="941" cy="596" r="3.1"/>
        </g>
        <!-- rack feet -->
        <path d="M374 635h-45M941 635h45" stroke="#111c19" stroke-width="27"/>
        <path d="M374 632h-45M941 632h45" stroke="url(#steel)" stroke-width="13"/>
        <!-- safety arms and J cups -->
        <path d="M385 441h154M930 441H790" stroke="#0a1211" stroke-width="23"/>
        <path d="M385 437h154M930 437H790" stroke="url(#steel)" stroke-width="12"/>
        <path d="M515 429v13M790 429v13" stroke="#d8ed83" stroke-width="6"/>
      </g>

      <!-- Floor and grounded shadow -->
      <ellipse cx="680" cy="654" rx="345" ry="28" fill="#050a09" opacity=".6" filter="url(#soft-shadow)"/>
      <path d="M270 651h700" stroke="#9baa8f" stroke-opacity=".28" stroke-width="2"/>
      <path d="M330 666h580" stroke="#d8ed83" stroke-opacity=".13" stroke-width="1"/>
      <g stroke="#879884" stroke-opacity=".18">
        <path d="M430 652l-28 20M510 652l-14 20M590 652l-4 20M750 652l7 20M840 652l18 20"/>
      </g>

      <!-- Penguin lifter, hinged into a conventional deadlift setup -->
      <g stroke-linejoin="round" stroke-linecap="round">
        <!-- legs behind the body -->
        <path d="M570 475c-2 34 19 60 48 76l-33 44c-10 14 1 28 17 23l66-43c10-7 12-19 4-29l-28-42c-9-20-22-39-42-51z" fill="#101918" stroke="#e8e5d4" stroke-opacity=".16" stroke-width="3"/>
        <path d="M624 467c18 21 41 43 69 58l-12 52c-4 16 10 25 24 16l42-42c9-10 8-22-2-31l-46-43c-21-25-42-40-67-45z" fill="#17231f" stroke="#e8e5d4" stroke-opacity=".2" stroke-width="3"/>
        <!-- tail feathers -->
        <path d="M529 478c-31 4-52 19-69 39 21 0 40-3 58-10M540 490c-26 15-39 30-49 48 21-7 37-16 54-32" fill="#101817" stroke="#263a32" stroke-width="4"/>
        <!-- main body silhouette -->
        <ellipse cx="664" cy="416" rx="103" ry="151" transform="rotate(35 664 416)" fill="#101918" stroke="#d7ddc9" stroke-opacity=".2" stroke-width="4"/>
        <!-- white front and belly -->
        <ellipse cx="707" cy="424" rx="66" ry="116" transform="rotate(35 707 424)" fill="#ede9d7"/>
        <path d="M669 332c24-23 54-31 76-22 22 9 34 29 31 51-3 23-20 38-42 38-24 0-46-19-65-67z" fill="#f6f1df"/>
        <!-- head -->
        <circle cx="765" cy="302" r="57" fill="#101918" stroke="#d7ddc9" stroke-opacity=".2" stroke-width="4"/>
        <path d="M737 267c20-18 47-12 61 5 11 14 12 33 4 48-10-19-31-27-62-24-12 1-23 5-32 11 1-16 12-31 29-40z" fill="#f3efdc"/>
        <!-- beak and eye -->
        <path d="M812 301l45 15-45 18c5-12 5-22 0-33z" fill="#e5ad48" stroke="#bd762f" stroke-width="3"/>
        <circle cx="793" cy="292" r="5.5" fill="#f7f3e3"/>
        <circle cx="795" cy="292" r="2.6" fill="#111918"/>
        <path d="M753 311c12 7 23 8 34 3" fill="none" stroke="#d7ddc9" stroke-opacity=".38" stroke-width="2"/>
        <!-- near flipper reaching to the bar -->
        <path d="M720 372c25 25 43 65 53 108 8 34 9 67 3 94-3 13-14 19-25 12-8-5-10-14-8-24 6-31 3-57-6-83-11-34-31-65-57-86z" fill="#111a18" stroke="#d7ddc9" stroke-opacity=".22" stroke-width="3"/>
        <path d="M747 408c13 31 21 65 23 96" fill="none" stroke="#354a40" stroke-width="4"/>
        <!-- far flipper, set just behind -->
        <path d="M686 385c-6 44 4 91 20 133 8 20 7 38-1 55-5 11-17 13-25 5-6-6-7-15-2-25 7-14 6-25 0-42-17-45-27-88-19-125z" fill="#19251f" stroke="#d7ddc9" stroke-opacity=".18" stroke-width="3"/>
        <path d="M692 423c0 34 8 62 19 88" fill="none" stroke="#40564a" stroke-width="3"/>
        <!-- feet, peeking behind the shaft -->
        <path d="M592 590c14 1 27 7 38 16 10 8 11 17 3 21-9 4-33 3-56 0-15-2-21-8-14-17 7-9 17-16 29-20z" fill="#e8ae48"/>
        <path d="M702 580c13-2 27 1 40 8 13 7 15 16 7 21-8 6-31 10-56 12-14 1-22-3-17-13 5-11 14-21 26-28z" fill="#e8ae48"/>
        <path d="M583 621l-12 9M602 625l-4 8M722 620l-7 10M742 616l1 10" stroke="#a96c35" stroke-width="3"/>
      </g>

      <!-- Loaded barbell in the foreground -->
      <g stroke-linejoin="round">
        <!-- collars and sleeves -->
        <path d="M397 588h690" stroke="#080e0d" stroke-width="14"/>
        <path d="M397 585h690" stroke="url(#bar)" stroke-width="8"/>
        <path d="M397 582h690" stroke="#fff0c9" stroke-opacity=".65" stroke-width="2"/>
        <path d="M470 575v20M483 575v20M1000 575v20M1013 575v20" stroke="#d8ed83" stroke-width="5"/>
        <!-- left bumper stack -->
        <ellipse cx="459" cy="588" rx="36" ry="66" fill="#0a100f"/>
        <ellipse cx="459" cy="585" rx="30" ry="63" fill="url(#plate)" stroke="#829385" stroke-width="3"/>
        <ellipse cx="459" cy="585" rx="21" ry="51" fill="none" stroke="#c0c9ac" stroke-opacity=".27" stroke-width="2"/>
        <ellipse cx="459" cy="585" rx="9" ry="14" fill="#d8ed83"/>
        <ellipse cx="459" cy="585" rx="4" ry="8" fill="#34483c"/>
        <!-- right bumper stack -->
        <ellipse cx="1025" cy="588" rx="36" ry="66" fill="#0a100f"/>
        <ellipse cx="1025" cy="585" rx="30" ry="63" fill="url(#plate)" stroke="#829385" stroke-width="3"/>
        <ellipse cx="1025" cy="585" rx="21" ry="51" fill="none" stroke="#c0c9ac" stroke-opacity=".27" stroke-width="2"/>
        <ellipse cx="1025" cy="585" rx="9" ry="14" fill="#d8ed83"/>
        <ellipse cx="1025" cy="585" rx="4" ry="8" fill="#34483c"/>
        <!-- subtle hand wraps around the shaft -->
        <path d="M742 579c3-8 13-10 19-4 4 4 5 10 2 15h-18c-4-3-5-7-3-11zM718 579c3-8 12-10 18-4 4 4 5 10 2 15h-17c-4-3-5-7-3-11z" fill="#e8ae48" stroke="#aa6c35" stroke-width="2"/>
        <!-- knurl detail -->
        <path d="M646 582l8 8m0-8 8 8m0-8 8 8m0-8 8 8m0-8 8 8m0-8 8 8m0-8 8 8m0-8 8 8" stroke="#53645a" stroke-width="1.3" opacity=".82"/>
      </g>

      <!-- Footer details -->
      <g font-family="inherit">
        <text x="68" y="705" fill="#d8ed83" font-size="10" font-weight="900" letter-spacing="2.6">BRACE · GRIP · DRIVE</text>
        <text x="1132" y="705" fill="#abb7a5" text-anchor="end" font-size="10" font-weight="700" letter-spacing="2">STRENGTH, WITH A LITTLE EXTRA FLUFF</text>
      </g>
      <path d="M68 723h1064" stroke="#e5e8d5" stroke-opacity=".16"/>
      <text x="68" y="744" fill="#718177" font-size="9" letter-spacing="2">PP / 001</text>
      <text x="1132" y="744" fill="#718177" text-anchor="end" font-size="9" letter-spacing="2">KEEP IT COOL. LIFT IT HEAVY.</text>
    </svg>
  </main>
</body>
</html>

Same prompt, other models

5 more
Compare side by side

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