Showcase

A pelican riding a motorcycle, built by Claude Haiku 5.5

Hostedvia Claude CodeOpenRouter
Running live in your browserNew tab
Show the code the model wrote
SVG7,077 characters
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#8fd0f5"/>
      <stop offset="1" stop-color="#e9f8ff"/>
    </linearGradient>
    <radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#fff7c7" stop-opacity="0.95"/>
      <stop offset="1" stop-color="#fff7c7" stop-opacity="0"/>
    </radialGradient>
    <g id="wheel">
      <circle r="62" fill="#1c1d21"/>
      <path d="M19.5 -53.6 A57 57 0 0 1 49.4 -28.5" fill="none" stroke="#4a4f57" stroke-width="4" stroke-linecap="round"/>
      <circle r="41" fill="#b8c0c9"/>
      <circle r="35" fill="#9aa3ad"/>
      <path d="M0 -9 V-35 M0 9 V35 M-9 0 H-35 M9 0 H35 M6.4 6.4 L24.7 24.7 M-6.4 -6.4 L-24.7 -24.7 M6.4 -6.4 L24.7 -24.7 M-6.4 6.4 L-24.7 24.7" stroke="#e6ebf0" stroke-width="2.5" fill="none"/>
      <circle r="9" fill="#5d646d"/>
      <circle r="3" fill="#d0d6dd"/>
    </g>
  </defs>

  <!-- sky, sun, cloud, distant hills, ground -->
  <rect width="800" height="500" fill="url(#sky)"/>
  <circle cx="690" cy="110" r="100" fill="url(#glow)"/>
  <circle cx="690" cy="110" r="42" fill="#ffd54a"/>
  <g fill="#ffffff" opacity="0.92">
    <ellipse cx="150" cy="96" rx="58" ry="20"/>
    <ellipse cx="184" cy="82" rx="36" ry="24"/>
    <ellipse cx="116" cy="100" rx="30" ry="14"/>
  </g>
  <path d="M0 352 Q120 300 250 344 T520 332 T800 326 V420 H0 Z" fill="#b5d9a6" opacity="0.75"/>
  <rect y="420" width="800" height="80" fill="#8fc27a"/>
  <line x1="0" y1="420" x2="800" y2="420" stroke="#5f9a4c" stroke-width="3"/>

  <!-- speed lines and dust behind the rear wheel -->
  <g stroke="#6f8796" stroke-width="5" stroke-linecap="round" opacity="0.5">
    <line x1="36" y1="282" x2="128" y2="282"/>
    <line x1="70" y1="318" x2="160" y2="318"/>
    <line x1="22" y1="354" x2="118" y2="354"/>
    <line x1="58" y1="390" x2="150" y2="390"/>
  </g>
  <g fill="#ffffff" opacity="0.6">
    <circle cx="170" cy="414" r="9"/>
    <circle cx="184" cy="418" r="6"/>
  </g>

  <!-- ground shadow -->
  <ellipse cx="385" cy="422" rx="265" ry="9" fill="#1d3b1a" opacity="0.2"/>

  <!-- wheels: rear 62 px, front 52 px -->
  <use href="#wheel" transform="translate(230 358)"/>
  <use href="#wheel" transform="translate(575 368) scale(0.84)"/>

  <!-- frame, swingarm, shock, exhaust, engine -->
  <path d="M230 358 L322 322" stroke="#2b2e33" stroke-width="9" stroke-linecap="round"/>
  <path d="M304 334 L336 266" stroke="#8d96a0" stroke-width="7" stroke-linecap="round"/>
  <path d="M418 332 Q374 388 296 386" fill="none" stroke="#cfd6de" stroke-width="8" stroke-linecap="round"/>
  <path d="M524 236 L334 264" stroke="#2b2e33" stroke-width="10" stroke-linecap="round"/>
  <path d="M524 244 L426 302" stroke="#2b2e33" stroke-width="10" stroke-linecap="round"/>
  <path d="M334 264 L300 298" stroke="#2b2e33" stroke-width="7" stroke-linecap="round"/>
  <rect x="334" y="294" width="88" height="46" rx="14" fill="#41454c"/>
  <rect x="344" y="298" width="66" height="6" rx="3" fill="#7a818a"/>
  <path d="M356 304 V334 M372 304 V334 M388 304 V334" stroke="#2c2f35" stroke-width="3"/>

  <!-- fuel tank and saddle -->
  <path d="M392 262 Q390 238 416 234 L470 228 Q496 226 500 248 Q500 262 486 268 L448 280 Q420 286 404 282 Q392 278 392 262 Z" fill="#d7262b"/>
  <path d="M408 240 L462 233" stroke="#ff8f87" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
  <path d="M296 254 Q298 240 334 240 L380 241 Q394 243 392 256 Q390 264 380 266 L304 268 Q294 266 296 254 Z" fill="#17181b"/>

  <!-- front fork, steering head, headlight, fender -->
  <path d="M520 240 L572 366" stroke="#aeb6bf" stroke-width="9" stroke-linecap="round"/>
  <path d="M530 240 L582 366" stroke="#6d757e" stroke-width="5" stroke-linecap="round"/>
  <circle cx="524" cy="236" r="10" fill="#2b2e33"/>
  <circle cx="548" cy="256" r="26" fill="#fff3b0" opacity="0.35"/>
  <circle cx="548" cy="256" r="12" fill="#fff6cf" stroke="#6d757e" stroke-width="3"/>
  <path d="M523 338 A60 60 0 0 1 627 338" fill="none" stroke="#2b2e33" stroke-width="8" stroke-linecap="round"/>

  <!-- handlebar, grip, footpeg -->
  <path d="M524 214 L458 199" stroke="#2b2e33" stroke-width="7" stroke-linecap="round"/>
  <rect x="516" y="206" width="18" height="11" rx="3" fill="#41454c"/>
  <path d="M458 199 L436 192" stroke="#101114" stroke-width="13" stroke-linecap="round"/>
  <path d="M380 360 L440 360" stroke="#2b2e33" stroke-width="6" stroke-linecap="round"/>
  <path d="M410 338 L420 358" stroke="#2b2e33" stroke-width="5" stroke-linecap="round"/>

  <!-- legs and webbed feet resting on the peg -->
  <path d="M360 244 L392 318" stroke="#f08a24" stroke-width="8" stroke-linecap="round"/>
  <path d="M386 322 L432 340 Q440 344 434 352 Q428 356 418 354 L404 360 Q392 360 390 350 Q384 346 386 338 Z" fill="#f08a24"/>
  <path d="M432 340 L404 350 M418 346 L398 354" stroke="#b8571a" stroke-width="1.5" fill="none"/>

  <!-- tail (behind body) -->
  <path d="M286 198 L230 166 Q220 182 226 202 L268 224 Z" fill="#ebe6d8"/>
  <path d="M230 166 Q220 182 226 202" fill="none" stroke="#b8b09c" stroke-width="2"/>

  <!-- body: lower-left shade crescent, then the lit white body -->
  <ellipse cx="338" cy="216" rx="72" ry="38" transform="rotate(16 338 216)" fill="#d3ccb9"/>
  <ellipse cx="344" cy="210" rx="72" ry="38" transform="rotate(16 344 210)" fill="#fbfaf5"/>
  <path d="M318 190 Q350 178 384 186" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.8"/>

  <!-- wing reaching forward, tip wrapped around the grip -->
  <path d="M348 202 C372 170 418 160 450 184 C456 189 458 194 456 198 C432 212 414 226 386 232 C368 236 350 228 348 202 Z" fill="#fbfaf5" stroke="#c4bca8" stroke-width="2"/>
  <path d="M426 178 C444 182 455 190 456 198 C440 206 426 202 416 194 C420 188 422 182 426 178 Z" fill="#3d4248"/>
  <path d="M372 210 Q400 200 424 206 M380 222 Q404 214 428 216" stroke="#d2cab7" stroke-width="2" fill="none" stroke-linecap="round"/>

  <!-- S-curved neck, head, and determined eye -->
  <path d="M404 226 C432 214 420 180 438 150" fill="none" stroke="#fbfaf5" stroke-width="26" stroke-linecap="round"/>
  <path d="M396 230 C424 218 412 184 430 154" fill="none" stroke="#d3ccb9" stroke-width="5" stroke-linecap="round"/>
  <circle cx="443" cy="141" r="20" fill="#d3ccb9"/>
  <circle cx="447" cy="139" r="19" fill="#fbfaf5"/>

  <!-- beak with gular pouch -->
  <path d="M454 128 C490 122 524 132 552 150 C524 152 486 150 456 146 Z" fill="#f7b043"/>
  <path d="M456 148 C492 152 522 158 542 166 C524 172 504 182 494 198 C486 210 468 200 462 184 C456 172 452 160 456 148 Z" fill="#f5c25c"/>
  <path d="M456 147 C492 151 524 157 540 164" stroke="#7a4a1e" stroke-width="2.5" fill="none" stroke-linecap="round"/>

  <circle cx="452" cy="136" r="5.5" fill="#f5b400"/>
  <circle cx="453" cy="136" r="3" fill="#141414"/>
  <circle cx="454.3" cy="134.6" r="1.1" fill="#ffffff"/>
  <path d="M436 120 L452 126" stroke="#2b2e33" stroke-width="3" stroke-linecap="round"/>
</svg>

Same prompt, other models

8 more
Compare side by side

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