Pelican on a Bicycle — SVG Generation

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500" aria-labelledby="title desc" role="img">
  <title id="title">Pelican Riding a Bicycle</title>
  <desc id="desc">A cartoon pelican with a big beak and wings riding a red bicycle with a basket on the front.</desc>
  
  <!-- Background -->
  <rect width="800" height="500" fill="#a8e6cf"/>
  
  <!-- Ground -->
  <rect y="380" width="800" height="120" fill="#5d9c4e"/>
  
  <!-- Sun -->
  <circle cx="650" cy="100" r="50" fill="#ffeb3b"/>
  <circle cx="650" cy="100" r="35" fill="#ffeb3b" opacity="0.3"/>
  
  <!-- Bicycle frame -->
  <!-- Main frame -->
  <line x1="220" y1="320" x2="420" y2="320" stroke="#e74c3c" stroke-width="18" stroke-linecap="round"/>
  <!-- Rear triangle -->
  <line x1="280" y1="320" x2="220" y2="220" stroke="#e74c3c" stroke-width="14" stroke-linecap="round"/>
  <!-- Seat tube -->
  <line x1="320" y1="320" x2="320" y2="210" stroke="#e74c3c" stroke-width="14" stroke-linecap="round"/>
  <!-- Handlebar stem -->
  <line x1="420" y1="260" x2="460" y2="210" stroke="#e74c3c" stroke-width="12" stroke-linecap="round"/>
  
  <!-- Wheels -->
  <!-- Rear wheel -->
  <circle cx="220" cy="370" r="75" fill="none" stroke="#2c3e50" stroke-width="22"/>
  <circle cx="220" cy="370" r="55" fill="none" stroke="#ecf0f1" stroke-width="14"/>
  <!-- Wheel spokes -->
  <g stroke="#2c3e50" stroke-width="6">
    <line x1="220" y1="295" x2="220" y2="445"/>
    <line x1="145" y1="370" x2="295" y2="370"/>
    <line x1="163" y1="313" x2="277" y2="427"/>
    <line x1="163" y1="427" x2="277" y2="313"/>
  </g>
  
  <!-- Front wheel -->
  <circle cx="520" cy="370" r="75" fill="none" stroke="#2c3e50" stroke-width="22"/>
  <circle cx="520" cy="370" r="55" fill="none" stroke="#ecf0f1" stroke-width="14"/>
  <!-- Wheel spokes -->
  <g stroke="#2c3e50" stroke-width="6">
    <line x1="520" y1="295" x2="520" y2="445"/>
    <line x1="445" y1="370" x2="595" y2="370"/>
    <line x1="463" y1="313" x2="577" y2="427"/>
    <line x1="463" y1="427" x2="577" y2="313"/>
  </g>
  
  <!-- Tires -->
  <circle cx="220" cy="370" r="78" fill="none" stroke="#2c3e50" stroke-width="12"/>
  <circle cx="520" cy="370" r="78" fill="none" stroke="#2c3e50" stroke-width="12"/>
  
  <!-- Pedals and crank -->
  <circle cx="320" cy="320" r="18" fill="#2c3e50"/>
  <rect x="305" y="310" width="8" height="45" rx="4" fill="#2c3e50" transform="rotate(-35 315 335)"/>
  <rect x="312" y="355" width="28" height="12" rx="4" fill="#2c3e50" transform="rotate(-35 315 335)"/>
  
  <!-- Seat -->
  <path d="M290 200 Q330 175 365 195" fill="#2c3e50"/>
  <polygon points="300,205 320,215 355,200" fill="#2c3e50"/>
  
  <!-- Handlebars -->
  <line x1="465" y1="205" x2="510" y2="175" stroke="#2c3e50" stroke-width="14" stroke-linecap="round"/>
  <line x1="500" y1="165" x2="530" y2="155" stroke="#2c3e50" stroke-width="12" stroke-linecap="round"/>
  <line x1="515" y1="150" x2="540" y2="150" stroke="#2c3e50" stroke-width="10" stroke-linecap="round"/>
  
  <!-- Basket (front) -->
  <rect x="545" y="160" width="55" height="45" rx="5" fill="#f1c40f" stroke="#2c3e50" stroke-width="8"/>
  <rect x="545" y="160" width="55" height="8" fill="#e67e22"/>
  
  <!-- Pelican body -->
  <!-- Body -->
  <ellipse cx="355" cy="210" rx="85" ry="68" fill="#ecf0f1" stroke="#2c3e50" stroke-width="12"/>
  
  <!-- Wing -->
  <path d="M310 165 Q240 130 195 195 Q220 245 285 235 Z" fill="#85c1e9" stroke="#2c3e50" stroke-width="12"/>
  
  <!-- Head and neck -->
  <!-- Neck -->
  <path d="M410 185 Q455 125 470 95" fill="none" stroke="#ecf0f1" stroke-width="38" stroke-linecap="round"/>
  <!-- Head -->
  <ellipse cx="485" cy="85" rx="32" ry="29" fill="#ecf0f1" stroke="#2c3e50" stroke-width="10" transform="rotate(-15 485 85)"/>
  
  <!-- Beak upper -->
  <path d="M505 75 Q580 65 610 88" fill="#f39c12" stroke="#2c3e50" stroke-width="8"/>
  <!-- Beak lower -->
  <path d="M505 92 Q575 115 610 93" fill="#f39c12" stroke="#2c3e50" stroke-width="8"/>
  <!-- Beak tip detail -->
  <polygon points="605,83 620,85 607,95" fill="#e67e22"/>
  
  <!-- Eye -->
  <circle cx="475" cy="75" r="9" fill="#2c3e50"/>
  <circle cx="478" cy="73" r="3.5" fill="#fff"/>
  
  <!-- Legs on pedals -->
  <!-- Left leg -->
  <path d="M355 255 L355 310 L375 340" fill="none" stroke="#f39c12" stroke-width="13" stroke-linecap="round"/>
  <!-- Right leg -->
  <path d="M375 245 L395 275 L410 340" fill="none" stroke="#f39c12" stroke-width="13" stroke-linecap="round"/>
  
  <!-- Feet -->
  <!-- Left foot -->
  <path d="M375 345 Q370 365 390 370" fill="none" stroke="#f39c12" stroke-width="9" stroke-linecap="round"/>
  <!-- Right foot -->
  <path d="M410 343 Q415 363 435 367" fill="none" stroke="#f39c12" stroke-width="9" stroke-linecap="round"/>
  
  <!-- Tail feathers -->
  <path d="M265 245 Q225 250 215 275 Q235 290 275 265 Z" fill="#85c1e9" stroke="#2c3e50" stroke-width="8"/>
  
</svg>
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pelican Cyclist</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Fredoka', sans-serif;
            background-color: #f0f9ff;
            overflow: hidden;
        }
        
        /* Glassmorphism for controls */
        .glass-panel {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* Slider Styling */
        input[type=range] {
            -webkit-appearance: none; 
            background: transparent; 
        }
        
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: #f97316;
            cursor: pointer;
            margin-top: -8px; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 4px;
            cursor: pointer;
            background: #cbd5e1;
            border-radius: 2px;
        }

        .select-none {
            user-select: none;
        }
    </style>
</head>
<body class="h-screen w-screen flex flex-col items-center justify-center relative">

    <!-- Main Scene Container -->
    <div class="relative w-full max-w-4xl aspect-video bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white ring-1 ring-slate-200">
        
        <!-- Sky Gradient Background -->
        <div id="sky-bg" class="absolute inset-0 bg-gradient-to-b from-sky-300 via-sky-100 to-white transition-colors duration-700"></div>

        <!-- SVG Canvas -->
        <svg id="scene" viewBox="0 0 800 450" class="w-full h-full relative z-10" preserveAspectRatio="xMidYMid slice">
            <defs>
                <!-- Bike Frame Gradient -->
                <linearGradient id="frameGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#ec4899;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#be185d;stop-opacity:1" />
                </linearGradient>
                <!-- Metal Gradient -->
                <linearGradient id="metalGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#94a3b8;stop-opacity:1" />
                    <stop offset="50%" style="stop-color:#cbd5e1;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#64748b;stop-opacity:1" />
                </linearGradient>
                <!-- Beak Gradient -->
                <linearGradient id="beakGrad" x1="0%" y1="0%" x2="100%" y2="50%">
                    <stop offset="0%" style="stop-color:#fb923c;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#f97316;stop-opacity:1" />
                </linearGradient>
                <!-- Wheel Spoke Pattern -->
                <pattern id="spokes" width="20" height="20" patternUnits="userSpaceOnUse">
                     <line x1="10" y1="0" x2="10" y2="20" stroke="#cbd5e1" stroke-width="1" />
                     <line x1="0" y1="10" x2="20" y2="10" stroke="#cbd5e1" stroke-width="1" />
                </pattern>
            </defs>

            <!-- Dynamic Background Elements Group -->
            <g id="bg-elements">
                <!-- Clouds will be injected here via JS -->
                <!-- Road Lines -->
                <rect x="-100" y="380" width="1200" height="10" fill="#e2e8f0" />
            </g>

            <!-- Bike Group -->
            <g id="bike-assembly" transform="translate(0, 10)">
                
                <!-- Back Wheel -->
                <g id="wheel-back" transform="translate(250, 350)">
                    <circle r="70" fill="none" stroke="#334155" stroke-width="8" /> <!-- Tire -->
                    <circle r="62" fill="none" stroke="#cbd5e1" stroke-width="2" /> <!-- Rim -->
                    <g id="spokes-back">
                        <line x1="0" y1="-62" x2="0" y2="62" stroke="#cbd5e1" stroke-width="1" />
                        <line x1="-53" y1="-31" x2="53" y2="31" stroke="#cbd5e1" stroke-width="1" />
                        <line x1="-53" y1="31" x2="53" y2="-31" stroke="#cbd5e1" stroke-width="1" />
                    </g>
                    <circle r="5" fill="#475569" /> <!-- Hub -->
                </g>

                <!-- Front Wheel -->
                <g id="wheel-front" transform="translate(550, 350)">
                    <circle r="70" fill="none" stroke="#334155" stroke-width="8" />
                    <circle r="62" fill="none" stroke="#cbd5e1" stroke-width="2" />
                    <g id="spokes-front">
                        <line x1="0" y1="-62" x2="0" y2="62" stroke="#cbd5e1" stroke-width="1" />
                        <line x1="-53" y1="-31" x2="53" y2="31" stroke="#cbd5e1" stroke-width="1" />
                        <line x1="-53" y1="31" x2="53" y2="-31" stroke="#cbd5e1" stroke-width="1" />
                    </g>
                    <circle r="5" fill="#475569" />
                </g>

                <!-- Frame -->
                <!-- Main triangle -->
                <path d="M250,350 L350,180 L520,200 L400,350 Z" fill="none" stroke="url(#frameGrad)" stroke-width="12" stroke-linejoin="round" stroke-linecap="round" />
                <!-- Fork -->
                <path d="M550,350 L520,200" fill="none" stroke="url(#frameGrad)" stroke-width="10" stroke-linecap="round" />
                <!-- Seat post -->
                <path d="M350,180 L340,140" fill="none" stroke="url(#frameGrad)" stroke-width="10" stroke-linecap="round" />
                <!-- Handlebar Stem -->
                <path d="M520,200 L530,150" fill="none" stroke="#475569" stroke-width="8" stroke-linecap="round" />
                <!-- Handlebars -->
                <path d="M510,150 L560,150 L570,130" fill="none" stroke="#cbd5e1" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
                <!-- Seat -->
                <path d="M320,140 Q380,130 380,150 L320,150 Z" fill="#334155" />

                <!-- Crank & Pedals -->
                <g id="crank-assembly" transform="translate(400, 350)">
                    <!-- Left Pedal (Behind) -->
                    <g id="pedal-left-group">
                        <line x1="0" y1="0" x2="0" y2="30" stroke="#334155" stroke-width="6" />
                        <rect x="-10" y="25" width="20" height="6" fill="#1e293b" rx="2" />
                    </g>
                    
                    <!-- Chainring -->
                    <circle r="15" fill="none" stroke="#64748b" stroke-width="4" />
                    
                    <!-- Right Pedal (Front) -->
                    <g id="pedal-right-group">
                        <line x1="0" y1="0" x2="0" y2="-30" stroke="#334155" stroke-width="6" />
                        <rect x="-10" y="-31" width="20" height="6" fill="#1e293b" rx="2" />
                    </g>
                </g>
            </g>

            <!-- Pelican Group -->
            <g id="pelican" transform="translate(340, 140)">
                <!-- Far Leg -->
                <path id="leg-far" d="M20,40 L20,80 L-10,90" fill="none" stroke="#f97316" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
                <path id="foot-far" d="M-10,90 L-20,95" stroke="#f97316" stroke-width="5" stroke-linecap="round" />

                <!-- Tail -->
                <path d="M-10,10 L-40,30 L-10,40 Z" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />

                <!-- Body -->
                <ellipse cx="20" cy="30" rx="45" ry="35" fill="#ffffff" />
                <!-- Wings -->
                <path d="M-10,10 Q20,50 60,20 L60,0 Q30,-10 -10,10 Z" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1"/>

                <!-- Neck & Head -->
                <!-- Neck is a path that we might animate slightly for balance -->
                <path id="neck" d="M50,20 Q60,50 60,80 L60,90" fill="none" stroke="#ffffff" stroke-width="18" stroke-linecap="round" />
                
                <g id="head-group" transform="translate(60, 90)">
                    <!-- Head Circle -->
                    <circle cx="0" cy="0" r="18" fill="#ffffff" />
                    <!-- Eye -->
                    <circle cx="5" cy="-5" r="2.5" fill="#0f172a" />
                    <circle cx="6" cy="-6" r="1" fill="white" />
                    
                    <!-- Lower Beak -->
                    <path d="M10,2 Q70,2 100,10 L10,12 Z" fill="#fbbf24" stroke="#f59e0b" stroke-width="1" />
                    
                    <!-- Pouch -->
                    <path id="pouch" d="M15,12 Q50,40 85,10 Q80,5 60,10" fill="#fca5a5" stroke="#f87171" stroke-width="1" />
                    
                    <!-- Upper Beak -->
                    <path d="M10,-5 Q75,-5 105,5 L10,2 Z" fill="url(#beakGrad)" stroke="#ea580c" stroke-width="1" />

                    <!-- Cap/Hat (The Cyclist) -->
                    <path d="M-18,-2 Q0,-25 18,-2 Z" fill="#ef4444" /> <!-- Cap dome -->
                    <path d="M-5,-15 L5,-15 L0,-25 Z" fill="white" /> <!-- Logo detail -->
                    <path d="M-18,-2 L25,5 L18,-2 Z" fill="#ef4444" /> <!-- Bill -->
                </g>

                <!-- Near Leg -->
                <path id="leg-near" d="M30,40 L30,80 L0,90" fill="none" stroke="#f97316" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
                <path id="foot-near" d="M0,90 L-10,95" stroke="#f97316" stroke-width="5" stroke-linecap="round" />
            </g>

            <g id="handlebar-streamers">
                <!-- Streamers coming off handlebars -->
                <path id="streamer1" d="M560,150 Q580,140 590,160 T610,150" fill="none" stroke="#3b82f6" stroke-width="3" opacity="0.8" />
                <path id="streamer2" d="M560,150 Q580,160 590,140 T610,160" fill="none" stroke="#f43f5e" stroke-width="3" opacity="0.8" />
            </g>

        </svg>

        <!-- Overlay Text/Greeting -->
        <div class="absolute bottom-24 left-8">
            <div class="bg-white/80 px-4 py-2 rounded-lg shadow-lg transform -rotate-2 border border-orange-100">
                <p class="text-slate-700 font-bold text-lg">Morning Ride 🚲</p>
                <p class="text-slate-500 text-sm">Pedal Power!</p>
            </div>
        </div>

    </div>

    <!-- Controls Panel -->
    <div class="mt-6 glass-panel rounded-2xl p-6 flex flex-col md:flex-row items-center gap-8 z-20">
        
        <!-- Speed Control -->
        <div class="flex flex-col w-48">
            <div class="flex justify-between mb-2">
                <label class="text-slate-700 font-semibold text-sm uppercase tracking-wider">Speed</label>
                <span id="speed-display" class="text-orange-500 font-bold">0 km/h</span>
            </div>
            <input type="range" id="speed-slider" min="0" max="50" value="15" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer">
        </div>

        <div class="w-px h-12 bg-slate-300 hidden md:block"></div>

        <!-- Theme Control -->
        <div class="flex items-center gap-4">
            <span class="text-slate-700 font-semibold text-sm uppercase tracking-wider">Theme</span>
            <button id="theme-toggle" class="relative inline-flex h-8 w-14 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-orange-600 focus-visible:ring-offset-2 bg-sky-200">
                <span class="sr-only">Use setting</span>
                <span id="toggle-circle" aria-hidden="true" class="pointer-events-none inline-block h-7 w-7 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out translate-x-0 flex items-center justify-center text-xs">☀️</span>
            </button>
        </div>

    </div>

    <!-- JavaScript Logic -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // --- Configuration ---
            const CONFIG = {
                maxSpeed: 50,
                crankRadius: 30, // Distance from center to pedal
                legLengthThigh: 50,
                legLengthShin: 50,
                hipOffsetX: 20, // Relative to pelican group
                hipOffsetY: 30
            };

            // --- Elements ---
            const els = {
                wheelBack: document.getElementById('wheel-back'),
                wheelFront: document.getElementById('wheel-front'),
                pedalLeftGroup: document.getElementById('pedal-left-group'),
                pedalRightGroup: document.getElementById('pedal-right-group'),
                legNear: document.getElementById('leg-near'), // Thigh (Hip to Knee), Shin (Knee to Foot)
                footNear: document.getElementById('foot-near'), // Foot
                legFar: document.getElementById('leg-far'),
                footFar: document.getElementById('foot-far'),
                pelican: document.getElementById('pelican'),
                pouch: document.getElementById('pouch'),
                neck: document.getElementById('neck'),
                streamer1: document.getElementById('streamer1'),
                streamer2: document.getElementById('streamer2'),
                themeToggle: document.getElementById('theme-toggle'),
                toggleCircle: document.getElementById('toggle-circle'),
                skyBg: document.getElementById('sky-bg'),
                speedSlider: document.getElementById('speed-slider'),
                speedDisplay: document.getElementById('speed-display'),
                bgElements: document.getElementById('bg-elements')
            };

            // --- State ---
            let state = {
                speed: 15, // 0 to 50
                distance: 0,
                time: 0,
                isNight: false,
                clouds: []
            };

            // Initialize Clouds
            for(let i=0; i<4; i++) {
                const cloud = createCloud(i);
                state.clouds.push(cloud);
                els.bgElements.insertBefore(cloud.el, els.bgElements.firstChild);
            }

            function createCloud(index) {
                const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
                const y = 20 + Math.random() * 100;
                const scale = 0.5 + Math.random() * 1;
                const x = Math.random() * 800;
                
                // Simple cloud shape
                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                path.setAttribute("d", "M25,60 Q40,30 65,50 Q80,20 110,45 Q135,25 150,55 Q170,50 160,80 L40,80 Q20,80 25,60 Z");
                path.setAttribute("fill", "white");
                path.setAttribute("opacity", "0.8");
                
                g.appendChild(path);
                g.setAttribute("transform", `translate(${x}, ${y}) scale(${scale})`);
                
                return { el: g, x: x, y: y, scale: scale, speed: 0.2 + Math.random() * 0.3 };
            }

            // --- Inverse Kinematics (IK) for Legs ---
            // Solves the knee position given Hip (fixed), Foot (moving on circle), and lengths
            function solveIK(hipX, hipY, footX, footY, lenThigh, lenShin) {
                const dist = Math.sqrt((footX - hipX)**2 + (footY - hipY)**2);
                
                // If unreachable, straighten leg
                if (dist > lenThigh + lenShin) {
                    const ratio = lenThigh / (lenThigh + lenShin);
                    return {
                        x: hipX + (footX - hipX) * ratio,
                        y: hipY + (footY - hipY) * ratio
                    };
                }

                // Law of Cosines
                // a = shin, b = thigh, c = dist
                // angle at hip
                const alpha = Math.acos( (lenThigh**2 + dist**2 - lenShin**2) / (2 * lenThigh * dist) );
                
                const angleToFoot = Math.atan2(footY - hipY, footX - hipX);
                
                // Two solutions (knee forward or back). We want knee forward (negative relative angle for right leg typically)
                // Adjust based on expected anatomy.
                const kneeAngle = angleToFoot + alpha; 

                return {
                    x: hipX + lenThigh * Math.cos(kneeAngle),
                    y: hipY + lenThigh * Math.sin(kneeAngle)
                };
            }

            // --- Animation Loop ---
            function animate() {
                // Update Time & Distance
                state.time += 0.01 * (state.speed / 10);
                state.distance += state.speed;

                // 1. Rotate Wheels & Crank
                const rotation = -(state.distance * 2) % 360;
                const crankRot = -(state.distance * 2) % 360;
                
                els.wheelBack.setAttribute("transform", `translate(250, 350) rotate(${rotation})`);
                els.wheelFront.setAttribute("transform", `translate(550, 350) rotate(${rotation})`);
                
                // Animate Pedals
                // Pedal Right (Front) relative to crank center (0,0)
                const rad = crankRot * Math.PI / 180;
                const px = Math.sin(rad) * CONFIG.crankRadius;
                const py = Math.cos(rad) * CONFIG.crankRadius;
                
                els.pedalRightGroup.setAttribute("transform", `translate(${px}, ${py})`);
                els.pedalLeftGroup.setAttribute("transform", `translate(${-px}, ${-py})`);

                // 2. Animate Legs (IK)
                // Pelican Hip Global position roughly:
                // Bike Center (400, 350). Pelican Group Translate (340, 140).
                // Hip offset inside pelican (30, 40).
                // Global Hip: 340 + 30 = 370 (X), 140 + 40 = 180 (Y).
                // But we are calculating relative to the bike group's coordinate space? 
                // The legs are in the pelican group. The pedals are in the crank-assembly group.
                // Pelican Group Trans: 340, 140.
                // Crank Center Trans: 400, 350.
                // Foot Position (Crank relative): 400 + px, 350 + py.
                // Hip Position (Global): 340 + 30 = 370, 140 + 40 = 180.
                // Hip Position (Relative to Crank Center): 370 - 400 = -30, 180 - 350 = -170.
                
                const hipX = -30; 
                const hipY = -170;

                // Near Leg (Right Leg) Logic
                const kneeNear = solveIK(hipX, hipY, px, py, CONFIG.legLengthThigh, CONFIG.legLengthShin);
                
                // Construct Path: M Hip, L Knee, L Foot
                // Global coordinates for path inside pelican group? NO, legs are inside Pelican group.
                // Hip is local inside pelican group.
                // Foot is outside.
                // We need Foot local to Pelican Group.
                // Crank (400, 350). Pelican (340, 140).
                // FootGlobal = (400 + px, 350 + py).
                // FootLocal = FootGlobal - (340, 140) = (60 + px, 210 + py).
                
                const footLocalX = 60 + px;
                const footLocalY = 210 + py;
                const kneeLocalX = 60 + kneeNear.x;
                const kneeLocalY = 210 + kneeNear.y;

                // Draw Near Leg (Thigh to Knee, Shin to Foot)
                // d="M hipX hipY L kneeX kneeY L footX footY"
                // Note: Hip in pelican group is roughly (30, 40). 
                els.legNear.setAttribute("d", `M30,40 L${kneeLocalX},${kneeLocalY} L${footLocalX},${footLocalY}`);
                
                // Draw Foot
                // Simple line sticking out from foot
                els.footNear.setAttribute("d", `M${footLocalX},${footLocalY} L${footLocalX - 15},${footLocalY + 5}`);


                // Far Leg (Left Leg)
                // Offset Hip slightly for depth
                const hipXFar = 10; 
                const hipYFar = -170;
                
                // Foot left is opposite
                const pxLeft = -px;
                const pyLeft = -py;
                
                const footLocalX_L = 60 + pxLeft;
                const footLocalY_L = 210 + pyLeft;

                const kneeFar = solveIK(hipXFar, hipYFar, pxLeft, pyLeft, CONFIG.legLengthThigh, CONFIG.legLengthShin);
                // Knee Far Global? No, local. 
                // Crank center to Pelican origin math applies to knee offset too.
                
                els.legFar.setAttribute("d", `M30,40 L${60 + kneeFar.x},${210 + kneeFar.y} L${footLocalX_L},${footLocalY_L}`);
                els.footFar.setAttribute("d", `M${footLocalX_L},${footLocalY_L} L${footLocalX_L - 15},${footLocalY_L + 5}`);

                // 3. Body Movement (Bounce & Sway)
                const bounce = Math.sin(state.time * 4) * 2;
                const sway = Math.sin(state.time * 2) * 1;
                
                // Pelican bounce
                els.pelican.setAttribute("transform", `translate(${340 + sway}, ${140 + bounce}) rotate(${sway * 0.5})`);

                // Neck bounce (inverse slightly for lag)
                const neckLag = Math.sin(state.time * 4 - 1) * 1;
                // Update neck path control point
                els.neck.setAttribute("d", `M50,20 Q${60 + neckLag},50 ${60 + sway},80 L${60 + sway},${90 + bounce*0.2}`);

                // Head rotation
                const head = document.getElementById('head-group');
                head.setAttribute("transform", `translate(${60 + sway}, ${90 + bounce}) rotate(${sway})`);

                // Pouch flap (wind effect based on speed)
                const pouchFlap = Math.sin(state.time * 10) * (state.speed / 5);
                els.pouch.setAttribute("d", `M15,12 Q50,${40 + pouchFlap} 85,10 Q80,5 60,10`);

                // 4. Background Parallax & Clouds
                state.clouds.forEach(c => {
                    c.x -= c.speed * (state.speed / 10 + 0.5); // Move clouds based on speed base + extra
                    if (c.x < -150) c.x = 850;
                    c.el.setAttribute("transform", `translate(${c.x}, ${c.y}) scale(${c.scale})`);
                });

                // 5. Streamers
                const streamerWave = Math.sin(state.time * 15) * 5 * (state.speed/20);
                els.streamer1.setAttribute("d", `M560,150 Q580,${140 + streamerWave} 590,${160 - streamerWave} T610,${150 + streamerWave}`);
                els.streamer2.setAttribute("d", `M560,150 Q580,${160 - streamerWave} 590,${140 + streamerWave} T610,${160 - streamerWave}`);

                requestAnimationFrame(animate);
            }

            // --- Event Listeners ---
            
            // Slider
            els.speedSlider.addEventListener('input', (e) => {
                state.speed = parseInt(e.target.value);
                els.speedDisplay.innerText = state.speed + " km/h";
                
                // Adjust animation speed/duration if needed, but frame-based math handles it mostly.
            });

            // Theme Toggle
            els.themeToggle.addEventListener('click', () => {
                state.isNight = !state.isNight;
                const btn = els.themeToggle;
                const circle = els.toggleCircle;

                if (state.isNight) {
                    btn.classList.remove('bg-sky-200');
                    btn.classList.add('bg-slate-700');
                    circle.classList.add('translate-x-6');
                    circle.innerText = '🌙';
                    
                    els.skyBg.classList.remove('from-sky-300', 'via-sky-100', 'to-white');
                    els.skyBg.classList.add('from-indigo-900', 'via-purple-900', 'to-slate-900');
                    
                    // Darken SVG elements (simple filter or color swap)
                    document.getElementById('scene').style.filter = "brightness(0.7) contrast(1.2)";
                    
                } else {
                    btn.classList.add('bg-sky-200');
                    btn.classList.remove('bg-slate-700');
                    circle.classList.remove('translate-x-6');
                    circle.innerText = '☀️';
                    
                    els.skyBg.classList.add('from-sky-300', 'via-sky-100', 'to-white');
                    els.skyBg.classList.remove('from-indigo-900', 'via-purple-900', 'to-slate-900');
                    
                    document.getElementById('scene').style.filter = "none";
                }
            });

            // Start Animation
            animate();
        });
    </script>
</body>
</html>
```

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 520" width="900" height="520" role="img" aria-label="Pelican riding a bicycle">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#b9e7ff"/>
      <stop offset="100%" stop-color="#eef9ff"/>
    </linearGradient>
    <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#9adf9f"/>
      <stop offset="100%" stop-color="#69b96f"/>
    </linearGradient>
    <linearGradient id="pelicanBody" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#f8fbff"/>
      <stop offset="100%" stop-color="#d8e2ea"/>
    </linearGradient>
    <linearGradient id="beakGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ffb347"/>
      <stop offset="100%" stop-color="#ff8a00"/>
    </linearGradient>
    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="160%">
      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000000" flood-opacity="0.2"/>
    </filter>
  </defs>

  <rect width="900" height="520" fill="url(#sky)"/>
  <rect y="390" width="900" height="130" fill="url(#ground)"/>
  <ellipse cx="440" cy="392" rx="340" ry="28" fill="#000" opacity="0.12"/>

  <!-- Bike -->
  <g stroke-linecap="round" stroke-linejoin="round" filter="url(#softShadow)">
    <g fill="none">
      <circle cx="260" cy="360" r="95" stroke="#111827" stroke-width="12" fill="#f8fafc"/>
      <circle cx="620" cy="360" r="95" stroke="#111827" stroke-width="12" fill="#f8fafc"/>
      <circle cx="260" cy="360" r="16" stroke="#111827" stroke-width="6" fill="#d1d5db"/>
      <circle cx="620" cy="360" r="16" stroke="#111827" stroke-width="6" fill="#d1d5db"/>

      <g stroke="#9ca3af" stroke-width="3">
        <line x1="260" y1="360" x2="260" y2="270"/>
        <line x1="260" y1="360" x2="260" y2="450"/>
        <line x1="260" y1="360" x2="170" y2="360"/>
        <line x1="260" y1="360" x2="350" y2="360"/>
        <line x1="260" y1="360" x2="196" y2="296"/>
        <line x1="260" y1="360" x2="324" y2="296"/>
        <line x1="260" y1="360" x2="196" y2="424"/>
        <line x1="260" y1="360" x2="324" y2="424"/>

        <line x1="620" y1="360" x2="620" y2="270"/>
        <line x1="620" y1="360" x2="620" y2="450"/>
        <line x1="620" y1="360" x2="530" y2="360"/>
        <line x1="620" y1="360" x2="710" y2="360"/>
        <line x1="620" y1="360" x2="556" y2="296"/>
        <line x1="620" y1="360" x2="684" y2="296"/>
        <line x1="620" y1="360" x2="556" y2="424"/>
        <line x1="620" y1="360" x2="684" y2="424"/>
      </g>
    </g>

    <g stroke="#374151" stroke-width="8" fill="none">
      <line x1="260" y1="360" x2="430" y2="334"/>
      <line x1="260" y1="360" x2="390" y2="252"/>
      <line x1="390" y1="252" x2="545" y2="250"/>
      <line x1="545" y1="250" x2="430" y2="334"/>
      <line x1="390" y1="252" x2="430" y2="334"/>
      <line x1="545" y1="250" x2="620" y2="360"/>
      <line x1="430" y1="334" x2="620" y2="360"/>
      <line x1="545" y1="250" x2="560" y2="228"/>
      <path d="M530 225 Q560 205 590 225" />
    </g>

    <rect x="360" y="236" width="62" height="14" rx="7" fill="#111827"/>

    <g fill="none" stroke="#111827" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="430" cy="334" r="31" stroke-width="4"/>
      <circle cx="430" cy="334" r="20" stroke-width="6" fill="#e5e7eb"/>
      <line x1="260" y1="344" x2="430" y2="318" stroke-width="3"/>
      <line x1="260" y1="376" x2="430" y2="350" stroke-width="3"/>
      <line x1="430" y1="334" x2="392" y2="311" stroke-width="6"/>
      <line x1="430" y1="334" x2="468" y2="357" stroke-width="6"/>
      <rect x="378" y="304" width="28" height="10" rx="4" fill="#6b7280" stroke-width="3"/>
      <rect x="454" y="352" width="28" height="10" rx="4" fill="#6b7280" stroke-width="3"/>
    </g>
  </g>

  <!-- Pelican -->
  <g stroke-linecap="round" stroke-linejoin="round" filter="url(#softShadow)">
    <path d="M335 230
             C335 178 385 145 455 150
             C525 155 570 198 568 248
             C566 300 517 334 447 329
             C378 324 335 282 335 230 Z"
          fill="url(#pelicanBody)" stroke="#3f3f46" stroke-width="4"/>

    <path d="M337 236 L297 220 L321 257 Z" fill="#c8d2db" stroke="#3f3f46" stroke-width="4"/>

    <path d="M382 249 C420 220 470 224 501 251 C465 272 421 276 382 249 Z"
          fill="#c5d0d9" stroke="#3f3f46" stroke-width="4"/>

    <path d="M521 214
             C546 177 553 146 582 122
             C603 105 625 110 630 130
             C634 150 622 167 604 184
             C586 200 565 210 548 216"
          fill="none" stroke="#3f3f46" stroke-width="30"/>
    <path d="M521 214
             C546 177 553 146 582 122
             C603 105 625 110 630 130
             C634 150 622 167 604 184
             C586 200 565 210 548 216"
          fill="none" stroke="#eef3f7" stroke-width="24"/>

    <circle cx="628" cy="132" r="34" fill="#f4f8fb" stroke="#3f3f46" stroke-width="4"/>
    <path d="M607 102 Q618 90 631 102" fill="none" stroke="#3f3f46" stroke-width="4"/>

    <path d="M654 131 C710 138 760 150 800 165 C748 173 700 171 652 160 Z"
          fill="url(#beakGrad)" stroke="#8a4b00" stroke-width="4"/>
    <path d="M653 159 C711 170 751 191 751 218 C701 226 658 213 626 184 Z"
          fill="#f6b5a7" stroke="#8a4b00" stroke-width="4"/>

    <circle cx="609" cy="124" r="7" fill="#111827"/>
    <circle cx="611" cy="122" r="2.3" fill="#ffffff"/>

    <path d="M499 245 C551 212 598 209 629 230 C597 252 547 264 499 245 Z"
          fill="#d2dae1" stroke="#3f3f46" stroke-width="4"/>

    <path d="M431 307 C422 310 406 312 392 311" fill="none" stroke="#f59e0b" stroke-width="8"/>
    <path d="M460 306 C466 325 471 341 468 357" fill="none" stroke="#f59e0b" stroke-width="8"/>
    <path d="M388 312 l10 4 M388 312 l8 -6" stroke="#f59e0b" stroke-width="4"/>
    <path d="M468 357 l10 4 M468 357 l8 -6" stroke="#f59e0b" stroke-width="4"/>
  </g>

  <g stroke="#374151" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path d="M530 225 Q560 205 590 225" />
  </g>
</svg>
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pelican on Bicycle</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 100%);
            overflow: hidden;
        }
        
        svg {
            width: 100%;
            height: 100vh;
            max-width: 1000px;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes bob {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
        
        @keyframes cloudMove {
            from { transform: translateX(100px); }
            to { transform: translateX(-900px); }
        }
        
        .wheel {
            animation: spin 2s linear infinite;
        }
        
        #pelican-group {
            animation: bob 1s ease-in-out infinite;
        }
        
        .cloud {
            animation: cloudMove 25s linear infinite;
        }
        
        .cloud:nth-child(2) {
            animation-delay: -12s;
        }
    </style>
</head>
<body>
    <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" />
            </linearGradient>
            <linearGradient id="groundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#90EE90;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#7CFC00;stop-opacity:1" />
            </linearGradient>
        </defs>
        
        <!-- Background -->
        <rect width="800" height="600" fill="url(#skyGradient)"/>
        
        <!-- Sun -->
        <circle cx="700" cy="80" r="50" fill="#FFD700" opacity="0.9">
            <animate attributeName="r" values="50;55;50" dur="3s" repeatCount="indefinite"/>
        </circle>
        
        <!-- Clouds -->
        <g class="cloud" transform="translate(800, 100)">
            <ellipse cx="0" cy="0" rx="30" ry="20" fill="white" opacity="0.8"/>
            <ellipse cx="25" cy="-5" rx="25" ry="18" fill="white" opacity="0.8"/>
            <ellipse cx="50" cy="0" rx="30" ry="20" fill="white" opacity="0.8"/>
        </g>
        <g class="cloud" transform="translate(800, 150)">
            <ellipse cx="0" cy="0" rx="25" ry="15" fill="white" opacity="0.7"/>
            <ellipse cx="20" cy="-3" rx="20" ry="14" fill="white" opacity="0.7"/>
            <ellipse cx="40" cy="0" rx="25" ry="15" fill="white" opacity="0.7"/>
        </g>
        
        <!-- Ground -->
        <rect x="0" y="480" width="800" height="120" fill="url(#groundGradient)"/>
        <line x1="0" y1="480" x2="800" y2="480" stroke="#7CB342" stroke-width="4"/>
        
        <!-- Road -->
        <rect x="0" y="520" width="800" height="80" fill="#A9A9A9"/>
        <line x1="0" y1="560" x2="800" y2="560" stroke="#FFF" stroke-width="4" stroke-dasharray="40,40"/>
        
        <!-- Bicycle Group -->
        <g transform="translate(400, 480)">
            <!-- Back Wheel -->
            <g transform="translate(-120, 0)" class="wheel">
                <circle r="70" fill="none" stroke="#2C3E50" stroke-width="8"/>
                <circle r="65" fill="none" stroke="#34495E" stroke-width="2"/>
                <g stroke="#7F8C8D" stroke-width="2">
                    <line x1="0" y1="-65" x2="0" y2="65"/>
                    <line x1="-65" y1="0" x2="65" y2="0"/>
                    <line x1="-46" y1="-46" x2="46" y2="46"/>
                    <line x1="46" y1="-46" x2="-46" y2="46"/>
                </g>
            </g>
            
            <!-- Front Wheel -->
            <g transform="translate(120, 0)" class="wheel">
                <circle r="70" fill="none" stroke="#2C3E50" stroke-width="8"/>
                <circle r="65" fill="none" stroke="#34495E" stroke-width="2"/>
                <g stroke="#7F8C8D" stroke-width="2">
                    <line x1="0" y1="-65" x2="0" y2="65"/>
                    <line x1="-65" y1="0" x2="65" y2="0"/>
                    <line x1="-46" y1="-46" x2="46" y2="46"/>
                    <line x1="46" y1="-46" x2="-46" y2="46"/>
                </g>
            </g>
            
            <!-- Frame -->
            <path d="M -120 0 L -20 -130 L 100 -130 L 120 0" fill="none" stroke="#E74C3C" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M -20 -130 L -50 0" fill="none" stroke="#E74C3C" stroke-width="7" stroke-linecap="round"/>
            <path d="M 30 -130 L -50 0" fill="none" stroke="#E74C3C" stroke-width="7" stroke-linecap="round"/>
            
            <!-- Chainring -->
            <circle cx="-50" cy="0" r="25" fill="none" stroke="#7F8C8D" stroke-width="3"/>
            
            <!-- Pedals -->
            <g id="pedals">
                <line x1="-50" y1="0" x2="-50" y2="40" stroke="#7F8C8D" stroke-width="4"/>
                <rect x="-65" y="38" width="30" height="10" fill="#2C3E50" rx="2"/>
                <line x1="-50" y1="0" x2="-50" y2="-40" stroke="#7F8C8D" stroke-width="4" opacity="0.3"/>
            </g>
            
            <!-- Seat -->
            <path d="M 10 -130 Q 10 -150 30 -150 L 50 -150 Q 60 -150 60 -140 L 50 -130 Z" fill="#8B4513"/>
            
            <!-- Handlebars -->
            <path d="M 100 -130 L 100 -160 L 80 -180" fill="none" stroke="#C0C0C0" stroke-width="5" stroke-linecap="round"/>
            <circle cx="80" cy="-180" r="5" fill="#2C3E50"/>
        </g>
        
        <!-- Pelican Group -->
        <g id="pelican-group" transform="translate(400, 340)">
            <!-- Back Leg (Left) -->
            <path d="M -20 20 Q -35 80 -50 140" fill="none" stroke="#FF8C00" stroke-width="10" stroke-linecap="round"/>
            <ellipse cx="-50" cy="140" rx="10" ry="5" fill="#FF8C00"/>
            
            <!-- Body -->
            <ellipse cx="0" cy="0" rx="55" ry="45" fill="#FDFDFD" stroke="#ECECEC" stroke-width="2"/>
            
            <!-- Tail -->
            <path d="M -50 0 L -75 10 L -70 -10 Z" fill="#B8B8B8"/>
            
            <!-- Wing (Left - folded) -->
            <path d="M -20 -10 Q -40 10 -10 25 Q 20 15 10 -15" fill="#D3D3D3" stroke="#A9A9A9" stroke-width="1"/>
            
            <!-- Wing (Right - on handlebar) -->
            <path d="M 20 -10 Q 60 -30 80 -50" fill="none" stroke="#FDFDFD" stroke-width="15" stroke-linecap="round"/>
            <path d="M 20 -10 Q 60 -30 80 -50" fill="none" stroke="#ECECEC" stroke-width="15" stroke-linecap="round" stroke-dasharray="5,5"/>
            
            <!-- Front Leg (Right) -->
            <path d="M -10 25 Q -25 85 -40 145" fill="none" stroke="#FF8C00" stroke-width="10" stroke-linecap="round"/>
            <ellipse cx="-40" cy="145" rx="10" ry="5" fill="#FF8C00"/>
            
            <!-- Neck -->
            <path d="M 40 -10 Q 60 -50 50 -100" fill="none" stroke="#FDFDFD" stroke-width="28" stroke-linecap="round"/>
            
            <!-- Head -->
            <ellipse cx="50" cy="-110" rx="22" ry="20" fill="#FDFDFD"/>
            
            <!-- Beak -->
            <path d="M 68 -105 Q 130 -95 140 -100 Q 130 -85 70 -90 Z" fill="#FFD700"/>
            <path d="M 70 -115 Q 120 -125 125 -120 Q 120 -105 72 -100 Z" fill="#FF8C00"/>
            <path d="M 72 -105 Q 100 -100 110 -105" fill="none" stroke="#FFA500" stroke-width="2"/>
            
            <!-- Eye -->
            <circle cx="55" cy="-115" r="4" fill="#000"/>
            <circle cx="56" cy="-116" r="1.5" fill="#FFF"/>
            
            <!-- Helmet (Safety first!) -->
            <path d="M 30 -120 Q 50 -140 75 -125" fill="none" stroke="#E74C3C" stroke-width="4"/>
            <ellipse cx="50" cy="-125" rx="25" ry="8" fill="#E74C3C" opacity="0.8"/>
        </g>
        
        <!-- Speed lines -->
        <g stroke="#FFF" stroke-width="3" stroke-linecap="round" opacity="0.6">
            <line x1="200" y1="500" x2="250" y2="500"/>
            <line x1="180" y1="520" x2="240" y2="520"/>
            <line x1="600" y1="510" x2="650" y2="510"/>
        </g>
    </svg>
</body>
</html>
```

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" width="900" height="600" role="img" aria-label="A pelican riding a bicycle" style="display:block;margin:0 auto">
  <title>Pelican riding a bicycle</title>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#d8f1ff"/>
      <stop offset="100%" stop-color="#ffffff"/>
    </linearGradient>
    <linearGradient id="bikePaint" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#28b6dd"/>
      <stop offset="100%" stop-color="#1c73d1"/>
    </linearGradient>
    <linearGradient id="bodyGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#e8eef2"/>
    </linearGradient>
    <linearGradient id="wingGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#b4bcc4"/>
      <stop offset="100%" stop-color="#79838d"/>
    </linearGradient>
    <linearGradient id="beakGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#f8c55a"/>
      <stop offset="100%" stop-color="#f08c43"/>
    </linearGradient>
    <linearGradient id="pouchGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffdda6"/>
      <stop offset="100%" stop-color="#f6b46e"/>
    </linearGradient>
    <filter id="shadow" x="-25%" y="-25%" width="150%" height="170%">
      <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#000000" flood-opacity="0.18"/>
    </filter>
  </defs>

  <style>
    .frame { stroke-width: 12; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .spoke { stroke: #9aa5ae; stroke-width: 3; stroke-linecap: round; }
    .feather { stroke: #dfe4e8; stroke-width: 4; stroke-linecap: round; fill: none; opacity: .75; }
    .leg { stroke: #ec8a39; stroke-width: 10; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  </style>

  <rect width="900" height="600" fill="url(#sky)"/>
  <circle cx="120" cy="98" r="42" fill="#ffe391"/>

  <g fill="#ffffff" opacity=".82">
    <ellipse cx="215" cy="112" rx="44" ry="24"/>
    <ellipse cx="252" cy="112" rx="36" ry="28"/>
    <ellipse cx="287" cy="112" rx="42" ry="22"/>
    <ellipse cx="654" cy="120" rx="36" ry="20"/>
    <ellipse cx="682" cy="118" rx="29" ry="24"/>
    <ellipse cx="710" cy="121" rx="35" ry="19"/>
  </g>

  <path d="M0 450 C160 430 315 470 470 452 S755 430 900 450 L900 600 L0 600 Z" fill="#d9e9b0"/>
  <path d="M0 492 C170 474 335 506 530 487 S760 474 900 488 L900 600 L0 600 Z" fill="#b7cf7a"/>
  <ellipse cx="410" cy="532" rx="308" ry="19" fill="#000000" opacity=".08"/>

  <g stroke="#97c7df" stroke-width="6" stroke-linecap="round" opacity=".55">
    <path d="M78 370 Q118 360 158 370" fill="none"/>
    <path d="M102 404 Q134 396 166 404" fill="none"/>
  </g>

  <g filter="url(#shadow)">
    <g transform="translate(240 420)">
      <circle r="106" fill="none" stroke="#2b2f33" stroke-width="18"/>
      <circle r="84" fill="none" stroke="#8f99a2" stroke-width="6"/>
      <g class="spoke">
        <line x1="0" y1="0" x2="0" y2="-82"/>
        <line x1="0" y1="0" x2="41" y2="-71"/>
        <line x1="0" y1="0" x2="71" y2="-41"/>
        <line x1="0" y1="0" x2="82" y2="0"/>
        <line x1="0" y1="0" x2="71" y2="41"/>
        <line x1="0" y1="0" x2="41" y2="71"/>
        <line x1="0" y1="0" x2="0" y2="82"/>
        <line x1="0" y1="0" x2="-41" y2="71"/>
        <line x1="0" y1="0" x2="-71" y2="41"/>
        <line x1="0" y1="0" x2="-82" y2="0"/>
        <line x1="0" y1="0" x2="-71" y2="-41"/>
        <line x1="0" y1="0" x2="-41" y2="-71"/>
      </g>
      <circle r="13" fill="#68727b"/>
    </g>

    <g transform="translate(580 420)">
      <circle r="106" fill="none" stroke="#2b2f33" stroke-width="18"/>
      <circle r="84" fill="none" stroke="#8f99a2" stroke-width="6"/>
      <g class="spoke">
        <line x1="0" y1="0" x2="0" y2="-82"/>
        <line x1="0" y1="0" x2="41" y2="-71"/>
        <line x1="0" y1="0" x2="71" y2="-41"/>
        <line x1="0" y1="0" x2="82" y2="0"/>
        <line x1="0" y1="0" x2="71" y2="41"/>
        <line x1="0" y1="0" x2="41" y2="71"/>
        <line x1="0" y1="0" x2="0" y2="82"/>
        <line x1="0" y1="0" x2="-41" y2="71"/>
        <line x1="0" y1="0" x2="-71" y2="41"/>
        <line x1="0" y1="0" x2="-82" y2="0"/>
        <line x1="0" y1="0" x2="-71" y2="-41"/>
        <line x1="0" y1="0" x2="-41" y2="-71"/>
      </g>
      <circle r="13" fill="#68727b"/>
    </g>

    <g class="frame" stroke="url(#bikePaint)">
      <line x1="240" y1="420" x2="400" y2="420"/>
      <line x1="240" y1="420" x2="340" y2="290"/>
      <line x1="340" y1="290" x2="400" y2="420"/>
      <line x1="340" y1="290" x2="500" y2="300"/>
      <line x1="500" y1="300" x2="400" y2="420"/>
      <line x1="500" y1="300" x2="580" y2="420"/>
      <line x1="515" y1="296" x2="595" y2="416"/>
    </g>

    <circle cx="240" cy="420" r="18" fill="none" stroke="#2b2f33" stroke-width="7"/>
    <path d="M258 405 Q330 392 388 404" fill="none" stroke="#6c5a25" stroke-width="5" stroke-linecap="round"/>
    <path d="M258 435 Q330 446 388 436" fill="none" stroke="#6c5a25" stroke-width="5" stroke-linecap="round"/>

    <circle cx="400" cy="420" r="29" fill="#ffd44d" stroke="#2b2f33" stroke-width="8"/>
    <circle cx="400" cy="420" r="8" fill="#2b2f33"/>
    <line x1="400" y1="420" x2="362" y2="392" stroke="#2b2f33" stroke-width="7" stroke-linecap="round"/>
    <line x1="400" y1="420" x2="438" y2="448" stroke="#2b2f33" stroke-width="7" stroke-linecap="round"/>
    <line x1="348" y1="392" x2="376" y2="392" stroke="#2b2f33" stroke-width="7" stroke-linecap="round"/>
    <line x1="424" y1="448" x2="452" y2="448" stroke="#2b2f33" stroke-width="7" stroke-linecap="round"/>

    <line x1="340" y1="290" x2="340" y2="272" stroke="#2b2f33" stroke-width="6" stroke-linecap="round"/>
    <path d="M320 272 Q343 260 368 269" fill="none" stroke="#2b2f33" stroke-width="10" stroke-linecap="round"/>
    <line x1="500" y1="300" x2="544" y2="258" stroke="#2b2f33" stroke-width="8" stroke-linecap="round"/>
    <path d="M528 256 L562 266" fill="none" stroke="#2b2f33" stroke-width="8" stroke-linecap="round"/>
    <path d="M542 258 L577 252" fill="none" stroke="#2b2f33" stroke-width="8" stroke-linecap="round"/>
  </g>

  <g filter="url(#shadow)">
    <path d="M223 301 C189 286 173 317 201 334 C175 341 176 366 214 364 C191 383 216 402 251 384 L272 340 Z"
          fill="#e8edf0" stroke="#d0d7dd" stroke-width="3"/>

    <ellipse cx="360" cy="302" rx="148" ry="96" fill="url(#bodyGrad)" stroke="#d0d7dd" stroke-width="3"/>
    <ellipse cx="386" cy="342" rx="85" ry="42" fill="#dfe6eb" opacity=".55"/>

    <path d="M291 248 C241 282 247 356 321 376 C392 394 447 346 425 283 C408 235 340 219 291 248 Z"
          fill="url(#wingGrad)" stroke="#78818a" stroke-width="2.5"/>
    <path d="M413 279 Q457 265 500 292" fill="none" stroke="#9aa3ab" stroke-width="18" stroke-linecap="round"/>
    <path d="M493 289 Q505 287 511 295" fill="none" stroke="#747d86" stroke-width="5" stroke-linecap="round"/>

    <path d="M304 269 C327 292 338 325 338 362" class="feather"/>
    <path d="M335 255 C359 281 372 316 371 354" class="feather"/>
    <path d="M366 252 C388 278 399 309 398 342" class="feather"/>

    <path d="M430 245 C456 204 463 169 496 151"
          fill="none" stroke="#cfd6dc" stroke-width="56" stroke-linecap="round"/>
    <path d="M429 243 C455 203 461 170 495 151"
          fill="none" stroke="url(#bodyGrad)" stroke-width="46" stroke-linecap="round"/>
    <path d="M447 230 C464 198 473 175 500 159"
          fill="none" stroke="#f6e5a6" stroke-width="14" stroke-linecap="round" opacity=".6"/>

    <ellipse cx="511" cy="148" rx="40" ry="35" fill="url(#bodyGrad)" stroke="#d0d7dd" stroke-width="3"/>
    <ellipse cx="504" cy="138" rx="18" ry="11" fill="#ffffff" opacity=".45"/>

    <path d="M483 128 Q469 113 475 99" fill="none" stroke="#8c9298" stroke-width="6" stroke-linecap="round"/>
    <path d="M495 124 Q488 108 495 94" fill="none" stroke="#8c9298" stroke-width="5" stroke-linecap="round"/>

    <circle cx="522" cy="146" r="5" fill="#171a1d"/>
    <circle cx="524" cy="144" r="1.6" fill="#ffffff"/>

    <path d="M529 138 L667 122 Q686 120 684 133 L651 151 Q591 160 530 157 Z"
          fill="url(#beakGrad)" stroke="#d98539" stroke-width="2.5"/>
    <path d="M529 160 C579 165 626 183 649 172 C651 193 628 220 588 224 C556 228 532 205 528 173 Z"
          fill="url(#pouchGrad)" stroke="#d98539" stroke-width="2.5"/>
    <path d="M531 160 C579 165 626 178 650 172" fill="none" stroke="#cf7a33" stroke-width="3"/>
    <path d="M671 122 L684 121 L683 132 L670 134 Z" fill="#434b53"/>
    <path d="M548 142 Q556 144 559 151" fill="none" stroke="#c06d2d" stroke-width="3" stroke-linecap="round"/>

    <path d="M350 356 Q359 378 362 392" class="leg"/>
    <path d="M404 357 Q420 399 438 448" class="leg"/>
    <path d="M347 396 Q359 385 373 392 Q361 403 346 403 Z" fill="#ec8a39"/>
    <path d="M424 451 Q438 440 453 448 Q441 459 424 461 Z" fill="#ec8a39"/>
    <path d="M356 394 L362 402 L368 394" fill="none" stroke="#d97525" stroke-width="2" stroke-linecap="round"/>
    <path d="M434 448 L440 457 L446 448" fill="none" stroke="#d97525" stroke-width="2" stroke-linecap="round"/>
  </g>
</svg>

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pelican on a Bicycle</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #1D3557;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: sans-serif;
        }
        .svg-container {
            width: 100%;
            max-width: 900px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
            border-radius: 12px;
            overflow: hidden;
            background-color: #CBEAF2;
        }
        svg {
            display: block;
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="svg-container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
            <defs>
                <!-- Gradients -->
                <linearGradient id="pouchGradient" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="#FFB703" />
                    <stop offset="60%" stop-color="#F48C06" />
                    <stop offset="100%" stop-color="#DC2F02" />
                </linearGradient>

                <!-- Reusable Wheel -->
                <g id="wheel">
                    <circle cx="0" cy="0" r="70" fill="none" stroke="#2B2D42" stroke-width="12"/>
                    <circle cx="0" cy="0" r="62" fill="none" stroke="#E0E1DD" stroke-width="4"/>
                    <!-- Spokes -->
                    <line x1="-62" y1="0" x2="62" y2="0" stroke="#BDC3C7" stroke-width="2"/>
                    <line x1="0" y1="-62" x2="0" y2="62" stroke="#BDC3C7" stroke-width="2"/>
                    <line x1="-53.7" y1="-31" x2="53.7" y2="31" stroke="#BDC3C7" stroke-width="2"/>
                    <line x1="-31" y1="-53.7" x2="31" y2="53.7" stroke="#BDC3C7" stroke-width="2"/>
                    <line x1="53.7" y1="-31" x2="-53.7" y2="31" stroke="#BDC3C7" stroke-width="2"/>
                    <line x1="31" y1="-53.7" x2="-31" y2="53.7" stroke="#BDC3C7" stroke-width="2"/>
                    <line x1="-43.8" y1="-43.8" x2="43.8" y2="43.8" stroke="#BDC3C7" stroke-width="2"/>
                    <line x1="-43.8" y1="43.8" x2="43.8" y2="-43.8" stroke="#BDC3C7" stroke-width="2"/>
                    <!-- Speed/Motion Arcs -->
                    <path d="M 35 -50 A 61 61 0 0 1 50 -35" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" opacity="0.9"/>
                    <path d="M -35 50 A 61 61 0 0 1 -50 35" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" opacity="0.9"/>
                    <!-- Hub -->
                    <circle cx="0" cy="0" r="10" fill="#E63946"/>
                    <circle cx="0" cy="0" r="4" fill="#E0E1DD"/>
                </g>

                <!-- Reusable Fish -->
                <g id="fish">
                    <path d="M 0 0 C -10 -15, -30 -15, -40 0 C -30 15, -10 15, 0 0 Z" fill="#457A9D" />
                    <path d="M 0 0 L 10 -8 L 5 0 L 10 8 Z" fill="#457A9D" />
                    <circle cx="-32" cy="-2" r="2" fill="#FFFFFF"/>
                    <circle cx="-32" cy="-2" r="1" fill="#1D3557"/>
                </g>
            </defs>

            <!-- BACKGROUND -->
            <rect x="0" y="0" width="800" height="600" fill="#CBEAF2" />
            
            <!-- Sun -->
            <circle cx="150" cy="150" r="120" fill="#FFD166" opacity="0.15"/>
            <circle cx="150" cy="150" r="90" fill="#FFD166" opacity="0.3"/>
            <circle cx="150" cy="150" r="60" fill="#FFD166"/>

            <!-- Clouds -->
            <path d="M 600,100 C 600,80 630,70 650,90 C 670,60 720,70 730,100 C 760,110 750,140 720,140 L 600,140 C 570,140 570,110 600,100 Z" fill="#FFFFFF" opacity="0.9"/>
            <path d="M 300,180 C 300,160 320,150 340,170 C 350,150 380,160 390,180 C 410,190 400,210 380,210 L 300,210 C 280,210 280,190 300,180 Z" fill="#FFFFFF" opacity="0.7"/>

            <!-- Sea and Beach -->
            <path d="M 0 420 Q 200 410 400 420 T 800 420 L 800 470 L 0 470 Z" fill="#2A9D8F" opacity="0.8"/>
            <rect x="0" y="470" width="800" height="130" fill="#E9C46A" />

            <!-- Ground Shadow -->
            <ellipse cx="375" cy="470" rx="220" ry="12" fill="#000000" opacity="0.15"/>

            <!-- Speed Lines (Background) -->
            <line x1="50" y1="100" x2="150" y2="100" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" opacity="0.6"/>
            <line x1="600" y1="200" x2="750" y2="200" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" opacity="0.4"/>
            <line x1="20" y1="300" x2="180" y2="300" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
            <line x1="650" y1="380" x2="720" y2="380" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" opacity="0.7"/>
            <line x1="50" y1="460" x2="250" y2="460" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" opacity="0.8"/>

            <!-- ================= SCENE MIDDLE/BACKGROUND ================= -->

            <!-- Scarf Tail (Blowing backwards) -->
            <path d="M 365 145 Q 260 140 180 110 Q 220 135 250 145 Q 160 150 140 160 Q 230 170 365 155 Z" fill="#D62828"/>
            
            <!-- Bird's Background Goggle/Eye -->
            <ellipse cx="385" cy="85" rx="10" ry="14" fill="#A8DADC" stroke="#1D3557" stroke-width="3" transform="rotate(15 385 85)" opacity="0.8"/>
            
            <!-- Left Leg (Background) -->
            <line x1="290" y1="260" x2="330" y2="395" stroke="#C44536" stroke-width="8" stroke-linecap="round"/>
            <!-- Left Foot -->
            <path d="M 320 395 L 345 390 L 350 400 L 325 400 Z" fill="#C44536"/>

            <!-- ================= BICYCLE (FRAME & DRIVE TRAIN) ================= -->
            
            <!-- Rear Wheel -->
            <use href="#wheel" x="200" y="400" />
            
            <!-- Front Wheel -->
            <!-- Drawn early so fork goes over it perfectly -->
            <use href="#wheel" x="550" y="400" />

            <!-- Chain and Chainring Background -->
            <path d="M 200 388 L 350 395 C 365 395, 365 445, 350 445 L 200 412 C 190 412, 190 388, 200 388 Z" fill="none" stroke="#555555" stroke-width="6"/>
            <path d="M 200 388 L 350 395 C 365 395, 365 445, 350 445 L 200 412 C 190 412, 190 388, 200 388 Z" fill="none" stroke="#BBBBBB" stroke-width="2" stroke-dasharray="4 4"/>
            <circle cx="200" cy="400" r="14" fill="#2B2D42"/>

            <!-- Bicycle Main Frame (Red) -->
            <!-- Rear Triangle (Seat tube, Chainstay, Seatstay) -->
            <path d="M 200 400 L 350 420 L 300 280 Z" fill="none" stroke="#E63946" stroke-width="12" stroke-linejoin="round"/>
            <!-- Front Triangle (Seat tube, Top tube, Down tube) -->
            <path d="M 300 280 L 480 260 L 500 300 L 350 420 Z" fill="none" stroke="#E63946" stroke-width="12" stroke-linejoin="round"/>
            
            <!-- Fork -->
            <line x1="480" y1="260" x2="550" y2="400" stroke="#E63946" stroke-width="12" stroke-linecap="round"/>
            
            <!-- Chainring Foreground -->
            <circle cx="350" cy="420" r="26" fill="#2B2D42"/>
            <circle cx="350" cy="420" r="18" fill="none" stroke="#E0E1DD" stroke-width="2" stroke-dasharray="6 4"/>
            <circle cx="350" cy="420" r="6" fill="#E63946"/>
            
            <!-- Left Crank (Background crank arm) -->
            <line x1="350" y1="420" x2="330" y2="395" stroke="#8D99AE" stroke-width="8" stroke-linecap="round"/>
            <circle cx="330" cy="395" r="5" fill="#1D3557"/>

            <!-- Seat Post and Seat -->
            <line x1="300" y1="280" x2="290" y2="240" stroke="#8D99AE" stroke-width="10" stroke-linecap="round"/>
            <path d="M 250 240 C 270 230, 310 230, 320 240 C 330 250, 260 250, 250 240 Z" fill="#8B5A2B" stroke="#5C3A21" stroke-width="2"/>

            <!-- ================= BICYCLE BASKET & EXTRAS ================= -->
            
            <!-- Handlebar Stem -->
            <line x1="480" y1="260" x2="480" y2="220" stroke="#BDC3C7" stroke-width="10" stroke-linecap="round"/>

            <!-- Basket Back (Inside) -->
            <path d="M 490 280 L 530 280 L 550 230 L 470 230 Z" fill="#DDA15E" />

            <!-- Fish inside basket -->
            <use href="#fish" x="510" y="240" transform="rotate(-65 510 240)"/>
            <use href="#fish" x="535" y="245" transform="rotate(-40 535 245)"/>
            
            <!-- Basket Front Overlap -->
            <path d="M 490 280 L 530 280 L 550 230 L 470 230 Z" fill="#BC6C25" opacity="0.8"/>
            <path d="M 490 280 L 530 280 L 550 230 L 470 230 Z" fill="none" stroke="#9A561D" stroke-width="4" stroke-linejoin="round"/>
            <!-- Basket Weave -->
            <line x1="485" y1="255" x2="540" y2="255" stroke="#9A561D" stroke-width="4"/>
            <line x1="496" y1="280" x2="484" y2="230" stroke="#9A561D" stroke-width="4"/>
            <line x1="510" y1="280" x2="505" y2="230" stroke="#9A561D" stroke-width="4"/>
            <line x1="524" y1="280" x2="526" y2="230" stroke="#9A561D" stroke-width="4"/>

            <!-- ================= PELICAN BODY ================= -->
            
            <!-- Main Body (Tail, Belly, Neck, Head) -->
            <path d="M 190 240 C 230 180, 270 120, 360 80 C 380 70, 410 80, 420 100 C 410 125, 390 140, 380 145 C 380 200, 400 240, 350 270 C 320 285, 290 280, 270 260 C 230 270, 200 260, 190 240 Z" fill="#FFFFFF" stroke="#E0E1DD" stroke-width="3" stroke-linejoin="round"/>

            <!-- Motion marks coming off the back -->
            <path d="M 170 200 Q 140 200 120 210" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
            <path d="M 180 230 Q 140 230 100 240" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" opacity="0.8"/>

            <!-- Right Leg (Foreground) -->
            <line x1="320" y1="270" x2="370" y2="445" stroke="#E76F51" stroke-width="8" stroke-linecap="round"/>
            <!-- Front Crank Arm Overlapping Leg slightly -->
            <line x1="350" y1="420" x2="370" y2="445" stroke="#8D99AE" stroke-width="8" stroke-linecap="round"/>
            <circle cx="370" cy="445" r="5" fill="#1D3557"/>
            <!-- Right Foot Overlapping Pedal -->
            <path d="M 355 440 L 385 440 L 390 450 L 360 450 Z" fill="#E76F51"/>

            <!-- ================= FACE, BEAK & POUCH ================= -->
            
            <!-- Scarf Neck Wrap (Behind Beak) -->
            <path d="M 360 135 C 380 140, 385 150, 370 155 C 350 150, 350 140, 360 135 Z" fill="#D62828"/>

            <!-- A little fish tail escaping the beak -->
            <path d="M 540 140 C 530 120, 560 120, 570 135 C 580 110, 600 120, 580 150 Z" fill="#457A9D" />

            <!-- Pouch! Drooping over the basket! -->
            <path d="M 415 110 Q 500 125 565 142 C 550 260, 430 260, 380 145 Z" fill="url(#pouchGradient)" stroke="#DC2F02" stroke-width="3"/>
            
            <!-- Upper Beak -->
            <path d="M 410 95 Q 520 100 580 135 C 585 138, 580 145, 570 145 Q 500 122 415 110 Z" fill="#FFB703" stroke="#E5A500" stroke-width="2"/>

            <!-- Head / Forehead Top Smoothing -->
            <path d="M 410 95 Q 400 80 380 80 Q 360 85 360 95" fill="none" stroke="#FFFFFF" stroke-width="4"/>

            <!-- Goggles! (Foreground Lens) -->
            <path d="M 370 95 L 420 95" fill="none" stroke="#111111" stroke-width="4" stroke-linecap="round"/>
            <ellipse cx="405" cy="95" rx="12" ry="16" fill="#A8DADC" stroke="#1D3557" stroke-width="4" transform="rotate(15 405 95)"/>
            <path d="M 398 86 A 7 7 0 0 1 408 92" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>

            <!-- ================= FOREGROUND (HANDLEBARS, WING) ================= -->
            
            <!-- Handlebar Curving Over Pouch -->
            <path d="M 480 220 C 460 210, 430 200, 410 210" fill="none" stroke="#BDC3C7" stroke-width="10" stroke-linecap="round"/>
            <circle cx="410" cy="210" r="12" fill="#2B2D42"/>

            <!-- Pelican Wing Holding the Handlebar -->
            <path d="M 330 160 C 370 160, 410 180, 420 210 Q 425 220 410 220 C 380 220, 340 230, 310 240 C 280 250, 260 220, 240 210 Q 280 170 330 160 Z" fill="#FFFFFF" stroke="#E0E1DD" stroke-width="4" stroke-linejoin="round"/>
            <!-- Feather detailed lines inside wing -->
            <path d="M 310 240 L 300 260 M 340 230 L 330 250 M 370 220 L 360 240" stroke="#DDDDDD" stroke-width="4" stroke-linecap="round"/>
            <!-- Dark Wingtip Feathers -->
            <path d="M 270 215 L 240 210 C 240 230, 250 240, 270 230 Z" fill="#2B2D42" />

        </svg>
    </div>
</body>
</html>
```

Here is an SVG of a pelican riding a bicycle:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pelican on a Bicycle</title>
</head>
<body style="background:#87CEEB; display:flex; justify-content:center; align-items:center; height:100vh; margin:0;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 350" width="500" height="450">

    <!-- Ground -->
    <line x1="0" y1="310" x2="400" y2="310" stroke="#555" stroke-width="3"/>

    <!-- BICYCLE -->
    <!-- Rear Wheel -->
    <circle cx="120" cy="280" r="50" fill="none" stroke="#333" stroke-width="6"/>
    <circle cx="120" cy="280" r="8" fill="#333"/>
    <!-- Rear spokes -->
    <line x1="120" y1="230" x2="120" y2="330" stroke="#555" stroke-width="2"/>
    <line x1="70" y1="280" x2="170" y2="280" stroke="#555" stroke-width="2"/>
    <line x1="85" y1="245" x2="155" y2="315" stroke="#555" stroke-width="2"/>
    <line x1="155" y1="245" x2="85" y2="315" stroke="#555" stroke-width="2"/>

    <!-- Front Wheel -->
    <circle cx="300" cy="280" r="50" fill="none" stroke="#333" stroke-width="6"/>
    <circle cx="300" cy="280" r="8" fill="#333"/>
    <!-- Front spokes -->
    <line x1="300" y1="230" x2="300" y2="330" stroke="#555" stroke-width="2"/>
    <line x1="250" y1="280" x2="350" y2="280" stroke="#555" stroke-width="2"/>
    <line x1="265" y1="245" x2="335" y2="315" stroke="#555" stroke-width="2"/>
    <line x1="335" y1="245" x2="265" y2="315" stroke="#555" stroke-width="2"/>

    <!-- Bike Frame -->
    <!-- Main triangle -->
    <line x1="120" y1="280" x2="210" y2="210" stroke="#c0392b" stroke-width="6" stroke-linecap="round"/>
    <line x1="210" y1="210" x2="300" y2="280" stroke="#c0392b" stroke-width="6" stroke-linecap="round"/>
    <line x1="210" y1="210" x2="160" y2="280" stroke="#c0392b" stroke-width="6" stroke-linecap="round"/>
    <line x1="120" y1="280" x2="160" y2="280" stroke="#c0392b" stroke-width="4"/>

    <!-- Seat post -->
    <line x1="175" y1="215" x2="175" y2="190" stroke="#333" stroke-width="5" stroke-linecap="round"/>
    <!-- Seat -->
    <ellipse cx="175" cy="187" rx="22" ry="7" fill="#333"/>

    <!-- Handlebar post -->
    <line x1="285" y1="240" x2="285" y2="210" stroke="#333" stroke-width="5" stroke-linecap="round"/>
    <!-- Handlebars -->
    <line x1="268" y1="210" x2="302" y2="210" stroke="#333" stroke-width="5" stroke-linecap="round"/>
    <line x1="268" y1="210" x2="265" y2="222" stroke="#333" stroke-width="4" stroke-linecap="round"/>
    <line x1="302" y1="210" x2="305" y2="222" stroke="#333" stroke-width="4" stroke-linecap="round"/>

    <!-- Pedal crank -->
    <circle cx="185" cy="258" r="10" fill="#888"/>
    <line x1="175" y1="258" x2="195" y2="258" stroke="#555" stroke-width="4"/>
    <rect x="165" y="255" width="14" height="6" rx="2" fill="#333"/>
    <rect x="196" y="255" width="14" height="6" rx="2" fill="#333"/>

    <!-- PELICAN BODY -->
    <!-- Body -->
    <ellipse cx="195" cy="175" rx="45" ry="35" fill="white" stroke="#ddd" stroke-width="1"/>

    <!-- Wing (left, tucked) -->
    <ellipse cx="158" cy="178" rx="22" ry="12" fill="#e0e0e0" stroke="#bbb" stroke-width="1" transform="rotate(-15,158,178)"/>

    <!-- Wing (right, out for balance) -->
    <ellipse cx="240" cy="165" rx="35" ry="13" fill="#e0e0e0" stroke="#bbb" stroke-width="1" transform="rotate(-25,240,165)"/>

    <!-- Neck -->
    <path d="M195,142 Q200,120 210,108 Q215,98 212,88" fill="none" stroke="white" stroke-width="16" stroke-linecap="round"/>
    <path d="M195,142 Q200,120 210,108 Q215,98 212,88" fill="none" stroke="#ddd" stroke-width="1"/>

    <!-- Head -->
    <ellipse cx="210" cy="82" rx="20" ry="17" fill="white" stroke="#ddd" stroke-width="1"/>

    <!-- Eye -->
    <circle cx="218" cy="76" r="5" fill="#222"/>
    <circle cx="220" cy="74" r="2" fill="white"/>

    <!-- Beak (top) -->
    <path d="M222,82 Q250,85 260,92 Q250,96 222,92 Z" fill="#f39c12" stroke="#e67e22" stroke-width="1"/>
    <!-- Pouch -->
    <path d="M222,92 Q250,96 255,105 Q240,112 220,105 Q218,98 222,92 Z" fill="#f0a030" stroke="#e67e22" stroke-width="1"/>

    <!-- Tail feathers -->
    <path d="M150,175 Q130,185 120,195 Q135,188 145,190 Q125,200 115,212 Q133,200 148,198" fill="#ddd" stroke="#bbb" stroke-width="1"/>

    <!-- Legs on pedals -->
    <!-- Left leg -->
    <line x1="175" y1="192" x2="182" y2="230" stroke="#f0a030" stroke-width="5" stroke-linecap="round"/>
    <line x1="182" y1="230" x2="173" y2="258" stroke="#f0a030" stroke-width="5" stroke-linecap="round"/>
    <!-- Right leg -->
    <line x1="185" y1="193" x2="190" y2="228" stroke="#f0a030" stroke-width="5" stroke-linecap="round"/>
    <line x1="190" y1="228" x2="198" y2="257" stroke="#f0a030" stroke-width="5" stroke-linecap="round"/>

    <!-- Feet -->
    <ellipse cx="170" cy="261" rx="10" ry="4" fill="#e67e22" transform="rotate(-10,170,261)"/>
    <ellipse cx="200" cy="260" rx="10" ry="4" fill="#e67e22" transform="rotate(10,200,260)"/>

    <!-- Helmet -->
    <ellipse cx="210" cy="70" rx="22" ry="13" fill="#e74c3c"/>
    <rect x="188" y="68" width="44" height="7" rx="3" fill="#c0392b"/>

  </svg>
</body>
</html>
```

This illustration features a cheerful pelican perched on a red bicycle, complete with:
- 🚲 A detailed bicycle with spokes, frame, handlebars, pedals, and seat
- 🐦 A white pelican with its signature orange pouch beak
- Wings spread slightly for balance
- Orange legs on the pedals
- A cute red helmet for safety!