Animated flamingo - Unicycle GPT OSS 20b

by notupdated

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flamingo Unicycle Animation</title>
<style>
  /* Make the whole scene a flex container so it stays centered vertically */
  body, html {margin:0;height:100%;overflow:hidden;background:#eef;}
  .scene {display:flex;justify-content:center;align-items:center;height:100%;position:relative;}
  
  /* The wrapper that will move from left to right */
  #wrapper{
    position:absolute;
    left:-100%;          /* start off‑screen on the left */
    animation: slide 12s linear infinite;
  }
  
  /* Move the wrapper from left to right */
  @keyframes slide{
    0%{left:-100%;}
    100%{left:100%;}
  }
  
  /* Rotate the wheel while the scene moves */
  #wheel{animation: rotate 1s linear infinite;}
  @keyframes rotate{to{transform:rotate(360deg);}}
  
  /* Small “leg” animation to give the illusion of pedaling */
  #flamingo{animation: hop 0.5s infinite alternate;}
  @keyframes hop{
    from{transform:translateY(0);}
    to{transform:translateY(-5px);}
  }
</style>
</head>
<body>
<div class="scene">
  <div id="wrapper">
    <!-- Inline, minified SVG -->
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
      <!-- Wheel -->
      <circle id="wheel" cx="100" cy="140" r="40" fill="none" stroke="#444" stroke-width="5"/>
      <!-- Frame -->
      <line x1="100" y1="140" x2="100" y2="70" stroke="#444" stroke-width="5"/>
      <!-- Seat -->
      <rect x="95" y="60" width="10" height="5" fill="#444" transform="rotate(-10 100 62.5)"/>
      <!-- Body -->
      <path id="flamingo" d="M75 70 Q65 40 55 50 L55 80 Q50 90 55 95 L80 70 Q85 65 75 70" fill="#ff9f9f" stroke="#e03f3f" stroke-width="3"/>
      <!-- Neck -->
      <path d="M60 40 Q55 20 60 15 L60 25 Q61 27 60 30" fill="#ff9f9f" stroke="#e03f3f" stroke-width="2"/>
      <!-- Head -->
      <circle cx="62" cy="14" r="4" fill="#ff9f9f" stroke="#e03f3f"...