GPT 5 PRO (web interface)
by notupdated
HTML
<!--
Web interface, GPT 5 PRO / Prompt
Generate the SVG code in a single file to display
a flamingo riding a unicycle Then Can you compress
the code, then include it in a html file that
animates the flamingo pedaling the unicycle
and moving from left to right across the screen,
you js/css/svg/html in a single file .
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flamingo on a Unicycle</title>
<style>
html,body{margin:0;padding:0;height:100%;background:#111;display:flex;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;}
svg{max-width:800px;width:100%;height:auto;}
@keyframes rideAcross{0%{transform:translateX(-300px);}100%{transform:translateX(500px);}}
@keyframes spinWheel{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@keyframes pedalLeg{0%{transform:rotate(18deg);}100%{transform:rotate(-18deg);}}
#rider-wrapper{animation:rideAcross 8s linear infinite;}
#wheel-rotor,#crank-rotor{transform-box:fill-box;transform-origin:center;animation:spinWheel 1.2s linear infinite;}
#leg-back-rotor,#leg-front-rotor{transform-box:fill-box;transform-origin:50% 0%;animation:pedalLeg .6s ease-in-out infinite alternate;}
#leg-front-rotor{animation-direction:alternate-reverse;}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#bdeeff"/><stop offset="100%" stop-color="#fefefe"/>
</linearGradient>
<linearGradient id="groundGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#9be28b"/><stop offset="100%" stop-color="#55b15a"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="400" height="230" fill="url(#skyGrad)"/>
<rect x="0" y="230" width="400" height="70" fill="url(#groundGrad)"/>
<circle cx="60" cy="60" r="26" fill="#ffe37e" opacity="0.9"/>
<g fill="#ffffff"...