<!--

Generated by DrawGPT.
Free, open source, AI generated images in SVG, PNG, and HTML Canvas format.
https://drawgpt.ai

Created: 2025-05-16T23:21:00+00:00
-->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 512 512" width="512" height="512">
  <title>Pelican on Two Wheels: The Cycling Bird</title>
  <desc>This pelican pedals around town, but beware: beak baskets are not great for groceries. Fun fact: pelicans can fit more in their beak than you can fit in a bike basket! Not so fly-by-night, eh?</desc>
  <metadata type="keywords">pelican,bicycle,fun,animal,cycle</metadata>

  <!-- Animated Sky Background -->
  <rect id="bg-sky" class="background" x="0" y="0" width="512" height="512" fill="#c7eaff"/>
  
  <!-- Rolling grassy ground -->
  <ellipse id="ground-shadow" class="ground" cx="256" cy="440" rx="250" ry="54" fill="#8ed07c"/>
  <ellipse id="ground-highlight" class="ground" cx="356" cy="460" rx="110" ry="18" fill="#a2ef95" opacity="0.7"/>

  <!-- Static cartoon clouds -->
  <g id="cloud1" class="cloud">
    <ellipse id="cloud1a" cx="90" cy="130" rx="40" ry="20" fill="#f5f9fa"/>
    <ellipse id="cloud1b" cx="120" cy="120" rx="30" ry="16" fill="#f5f9fa"/>
    <ellipse id="cloud1c" cx="105" cy="145" rx="29" ry="14" fill="#f5f9fa"/>
  </g>
  <g id="cloud2" class="cloud">
    <ellipse id="cloud2a" cx="380" cy="70" rx="34" ry="16" fill="#e7f3f9"/>
    <ellipse id="cloud2b" cx="412" cy="85" rx="23" ry="9" fill="#e7f3f9"/>
  </g>
  
  <!-- Pelican shadow for dimension -->
  <ellipse id="pelican-shadow" class="shadow" cx="240" cy="430" rx="60" ry="13" fill="#5b8762" opacity="0.22">
    <animate attributeName="rx" values="60;65;60" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="0.22;0.18;0.22" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
  </ellipse>
  
  <!-- Bicycle group: animated wheels rotate -->
  <g id="bike" class="bicycle" stroke="#3a2d12" stroke-width="5" fill="none">
    <!-- Back Wheel -->
    <g id="back-wheel-group">
      <circle id="back-wheel" class="wheel" cx="180" cy="400" r="48" fill="#f6f7f6" stroke-width="10"/>
      <!-- Spokes: animateFull rotation -->
      <g id="back-spokes" class="spokes">
        <line id="spoke1" x1="180" y1="400" x2="180" y2="352"/>
        <line id="spoke2" x1="180" y1="400" x2="220" y2="363"/>
        <line id="spoke3" x1="180" y1="400" x2="214" y2="388"/>
        <line id="spoke4" x1="180" y1="400" x2="212" y2="417"/>
        <line id="spoke5" x1="180" y1="400" x2="180" y2="444"/>
        <line id="spoke6" x1="180" y1="400" x2="146" y2="432"/>
        <line id="spoke7" x1="180" y1="400" x2="142" y2="389"/>
        <line id="spoke8" x1="180" y1="400" x2="147" y2="363"/>
        <animateTransform attributeName="transform" type="rotate" from="0 180 400" to="360 180 400" dur="5s" repeatCount="indefinite"/>
      </g>
    </g>
    
    <!-- Front Wheel -->
    <g id="front-wheel-group">
      <circle id="front-wheel" class="wheel" cx="332" cy="400" r="48" fill="#f6f7f6" stroke-width="10"/>
      <!-- Spokes: animate full rotation -->
      <g id="front-spokes" class="spokes">
        <line id="fspoke1" x1="332" y1="400" x2="332" y2="352"/>
        <line id="fspoke2" x1="332" y1="400" x2="368" y2="363"/>
        <line id="fspoke3" x1="332" y1="400" x2="368" y2="389"/>
        <line id="fspoke4" x1="332" y1="400" x2="372" y2="417"/>
        <line id="fspoke5" x1="332" y1="400" x2="332" y2="448"/>
        <line id="fspoke6" x1="332" y1="400" x2="297" y2="432"/>
        <line id="fspoke7" x1="332" y1="400" x2="292" y2="389"/>
        <line id="fspoke8" x1="332" y1="400" x2="298" y2="362"/>
        <animateTransform attributeName="transform" type="rotate" from="0 332 400" to="360 332 400" dur="5s" repeatCount="indefinite"/>
      </g>
    </g>
    
    <!-- Bike Frame -->
    <polyline id="bike-frame-main" class="frame"
      points="180,400 218,320 332,320 332,400" stroke="#2e2324" stroke-width="12" fill="none"/>
    <!-- Crossbar -->
    <line id="crossbar" class="frame"
      x1="218" y1="320" x2="258" y2="368" stroke="#5B3E15" stroke-width="6"/>
    <!-- Chain & pedals -->
    <circle id="crank" class="crank" cx="258" cy="368" r="15" fill="#bbbbbb"/>
    <g id="pedal-group">
      <rect id="pedal1" class="pedal" x="272" y="358" rx="4" width="18" height="8" fill="#e28835"/>
      <rect id="pedal2" class="pedal" x="242" y="378" rx="4" width="18" height="8" fill="#31b16b"/>
      <animateTransform attributeName="transform" type="rotate" from="0 258 368" to="360 258 368" dur="5s" repeatCount="indefinite"/>
    </g>
    <!-- Handlebar & basket -->
    <polyline id="handlebar"
      class="handlebar" points="332,320 355,285 330,280" stroke="#a35419" stroke-width="8" fill="none"/>
    <!-- Handlebar grip: -->
    <rect id="grip" class="handlebar" x="322" y="270" width="22" height="10" fill="#ffe57d" rx="5"/>
    
    <!-- Wicker basket hanging -->
    <ellipse id="basket" class="basket" cx="355" cy="295" rx="22" ry="13" fill="#c18e5f" stroke="#7a5b36" stroke-width="4"/>
    <!-- Some colorful groceries -->
    <ellipse id="grocery1" class="groceries" cx="347" cy="289" rx="5" ry="6" fill="#e64383"/>
    <ellipse id="grocery2" class="groceries" cx="361" cy="285" rx="6" ry="6.5" fill="#57a5cc"/>
    <ellipse id="grocery3" class="groceries" cx="355" cy="282" rx="6.2" ry="6.8" fill="#eade7d"/>
  </g>

  

  <!-- Pelican Cycling (Animated) -->
  <g id="pelican" class="pelican" stroke="#483614" stroke-width="2" stroke-linecap="round">
    <!-- Animated body up and down (gentle bounce) -->
    <g>
      <animateTransform attributeName="transform" type="translate" values="0,0; 0,-12; 0,0" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
      <!-- Main body (detailed feathers) -->
      <ellipse id="body" class="pelican-body" cx="238" cy="330" rx="65" ry="50" fill="white" />
      <!-- Feather shading -->
      <ellipse id="shadow-body" class="feather-shadow" cx="250" cy="355" rx="35" ry="22" fill="#e8eeea" opacity="0.66"/>
      <ellipse id="belly" class="feather-belly" cx="225" cy="355" rx="15" ry="12" fill="#fefdfe" opacity="0.9"/>
      <!-- Animated wings flap up/down in sync with body movement -->
      <g>
        <path id="wing-back" class="pelican-wing"
        d="M192 346 Q138 280 183 300 Q210 320 195 346 Z"
        fill="#edf0f0" stroke="#aeb2b6" stroke-width="2">
        </path>
      <!-- Flapping SMIL animation -->
        <animateTransform attributeName="transform" type="rotate" values="0 192 340;19 192 340;0 192 340" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
      </g>
      
      
      <g>
        <path id="wing-front" class="pelican-wing"
        d="M258 351 Q310 270 318 315 Q295 342 258 351 Z"
        fill="#eaeeee" stroke="#aeb2b6" stroke-width="2"/>
        <animateTransform attributeName="transform" type="rotate" values="0 258 340;-14 258 340;0 258 340" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
      </g>
      
      <!-- Animated legs pedaling (crank synchronous) -->
      <g>
        <!-- Leg 1 -->
        <g>
          <animateTransform attributeName="transform" type="rotate" values="30 248 387;250 248 387;30 248 387" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
          <rect id="leg1" class="leg" x="244" y="355" width="12" height="38" fill="#ffdf6d" rx="5" stroke="#c68100"/>
          <ellipse id="foot1" class="foot" cx="250" cy="395" rx="11" ry="6" fill="#ffcc34" stroke="#886100"/>
          <ellipse id="toe1" class="foot" cx="253" cy="401" rx="4.5" ry="2.1" fill="#ffbc30" opacity="0.84"/>
        </g>
        <!-- Leg 2 -->
        <g>
          <animateTransform attributeName="transform" type="rotate" values="210 252 393;30 252 393;210 252 393" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
          <rect id="leg2" class="leg" x="247" y="357" width="12" height="38" fill="#ffdb70" rx="5" stroke="#c68100"/>
          <ellipse id="foot2" class="foot" cx="253" cy="398" rx="9" ry="5" fill="#ffd34f" stroke="#886100"/>
          <ellipse id="toe2" class="foot" cx="257" cy="402" rx="4.1" ry="1.7" fill="#ffc549"/>
        </g>
      </g>
  
      <!-- Neck (animated sway as it rides) -->
      <g>
        <animateTransform attributeName="transform" type="rotate" values="-7 261 310;15 261 310;-7 261 310" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
        <path id="neck" class="neck" d="M258 310 
          Q269 285 308 234 Q331 230 355 253 Q323 234 299 249 Q284,259 265,315"
            fill="none" stroke="#ece8d5" stroke-width="19" stroke-linecap="round"/>
        <path id="neck-edge" class="neck" d="M262 313 
          Q269 285 303.5 240.5 Q328 237 353.5 252.8"
          fill="none" stroke="#c7baa0" stroke-width="5.1" stroke-linecap="round"/>
      </g>
      
      <!-- Pelican Animated Head Bob -->
      <g>
        <animateTransform attributeName="transform" type="translate" values="0,0;2,-6;0,0" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
        <!-- Back part of head shadow/curve -->
        <ellipse id="head-back" class="pelican-head" cx="344" cy="220" rx="32" ry="30" fill="#e7dbbc"/>
        <!-- Head main -->
        <ellipse id="head" class="pelican-head" cx="345" cy="219" rx="25" ry="22" fill="#fefff7" />
        <!-- Top of head coloring -->
        <ellipse id="head-top" class="head-feather" cx="342" cy="212" rx="17" ry="7" fill="#eee4ae"/>
        <!-- Crest -->
        <path id="crest" class="head-feather" d="M348 197 Q350 184 331 187 Q338 197 348 197Z"
          fill="#f3edb3" stroke="#eee784" stroke-width="2"/>
        
        <!-- Eye -->
        <ellipse id="eye-white" class="eye" cx="357" cy="217" rx="8.8" ry="7.2" fill="#fff"/>
        <ellipse id="iris" class="eye" cx="357" cy="220" rx="3.8" ry="3.2" fill="#383e42"/>
        <ellipse id="eyehighlight" class="eye" cx="358.6" cy="219.3" rx="1.2" ry="0.8" fill="#fff"/>
        
        <!-- Animated blinking -->
        <rect id="eyelid" class="eye" x="349.5" y="212" width="15.5" height="7" fill="#fffbd1" opacity="0">
          <animate attributeName="opacity" values="0;0;0.95;0;0" keyTimes="0;0.05;0.07;0.09;1" dur="5s" repeatCount="indefinite"/>
        </rect>
    
        <!-- Cheek spot -->
        <ellipse id="cheek-spot" class="cheek" cx="351" cy="228" rx="4.2" ry="2.6" fill="#e3ceb7" opacity="0.56"/>
        
        <!-- Animated beak: slight open/close -->
        <g id="beak-open-group">
          <!-- Beak upper curve -->
          <path id="beak-upper" class="beak"
            d="M362 227 Q407 240 416 230 Q410 213 372 215 Q360 221 362 227 Z"
            fill="#f4bb47" stroke="#ba5900" stroke-width="2"/>
          
          <!-- Lower beak (animate height) -->
          <g>
            <path id="beak-lower"
              class="beak"
              d="M377 230 Q430 273 417 234 Q414 225 362 227 Q366 235 377 230 Z"
              fill="#efd97e" stroke="#ba8800" stroke-width="2">
              <animate attributeName="d"
                values="
                  M377 230 Q430 273 417 234 Q414 225 362 227 Q366 235 377 230 Z;
                  M377 232 Q430 283 417 236 Q414 225 362 229 Q366 237 377 232 Z;
                  M377 230 Q430 273 417 234 Q414 225 362 227 Q366 235 377 230 Z
                "
                keyTimes="0;0.5;1"
                dur="5s"
                repeatCount="indefinite"/>
            </path>
          </g>
          <!-- Beak pouch shading -->
          <ellipse id="beak-pouch" class="beak" cx="392" cy="240" rx="21" ry="11" fill="#eae187" opacity="0.48"/>
          <!-- Naris -->
          <ellipse id="nostril" class="beak" cx="372" cy="226.7" rx="2.2" ry="1.0" fill="#594000" />
        </g>
      </g>
    </g>
  </g>
  
  <!-- Road/light shadow details -->
  <g id="road-lines" class="road">
    <rect id="line1" x="95" y="421" width="55" height="4.6" rx="2.3" fill="#fff" opacity="0.2"/>
    <rect id="line2" x="240" y="424" width="55" height="4.4" rx="2.2" fill="#ffffbb" opacity="0.14"/>
    <rect id="line3" x="360" y="429" width="27" height="3.4" rx="1.7" fill="#fff" opacity="0.1"/>
  </g>

  <!-- Sparkle animated on bike basket like glint -->
  <g id="sparkle-group" class="sparkle">
    <polygon id="sparkle" points="355,295 358,302 364,297 359,304 366,308 358,308 363,314 356,312 355,318 353,312 346,314 352,308 344,308 351,304 346,297 353,303"
        fill="#fffbe8" opacity="0">
      <animate attributeName="opacity" values="0;0.85;0;0" keyTimes="0;0.04;0.08;1" dur="5s" repeatCount="indefinite"/>
      <animateTransform attributeName="transform" type="scale" additive="sum"
        values="1 1 355 308;1.7 1.7 355 308;1 1 355 308"
        keyTimes="0;0.04;0.08;1"
        dur="5s"
        repeatCount="indefinite"/>
    </polygon>
  </g>
</svg>