Prompted in AI Studio:
Generate an SVG of a pelican riding a bicycle
Initiating the Visualization
I'm now fully immersed in the creation process. My focus is entirely on visualizing a pelican gracefully riding a bicycle, all within a valid SVG format. I'm carefully considering color palettes and gradients to bring this unique scene to life within the code.
Refining the Composition
I'm now zeroing in on the specifics, breaking the design into elements for an SVG. I'm focusing on the bicycle details -- wheels, frame, handlebars, pedals, and chainring. For the pelican, I'm defining its beak, head, wings, and webbed feet. I'm choosing a vibrant color palette, planning placement for the scene within a defined viewBox for landscape aspect ratio. I'm also planning the bicycle and pelican placement.
Constructing the Scene
I'm now drafting the SVG elements. I'm focusing on the bike's skeleton - wheels, frame, and connecting tubes. I'm using coordinates like cx="250" cy="450" and planning red tubular lines and thick black circles for the tires. I'm planning for a soft radial gradient for the sky to create a lovely backdrop for the pelican's adventure. I will also add a simple ground plane or ellipse to cast a shadow under the bike.
Defining Element Attributes
I'm now focusing on attribute definition for SVG elements. The bicycle seat is now a simple black shape at 330, 280. The handlebars ascend from 500, 280 and curve to 480, 220. I'm updating pedal placement based on the new feet coordinates; I'm mapping the cranks and positioning the bird's body for a sitting position on the seat, leaning forward. My current work now shifts to defining attributes for the pelican's head and neck.
Enhancing Accessory Design
My focus has shifted to accessorizing the pelican cyclist, considering a retro cycling cap or goggles to add flair. I'm imagining a striped cycling cap with a tiny brim turned up for visual appeal.
I'm now refining the SVG coordinates and canvas dimensions, with a viewBox="0 0 800 600" and a shadow underneath the bike. The bike wheels are getting refined, with black tires and lighter rims. I am also working on spokes via groups and rotations.
Finalizing Bicycle Geometry
I'm now integrating the spoke and hub details I previously created, adding the red frame lines, focusing on the bicycle's BB, seat cluster, and head tube. I'm carefully placing the bicycle components for realistic bike geometry, adjusting coordinates for a more natural fork angle. I am defining BB, rear drop, seat cluster, head tube top and bottom.
Defining Frame Geometry
I'm now focusing on constructing the bicycle frame's lines for the SVG path element. I'm carefully determining the coordinates for the top tube, down tube, seat tube, chainstays, and seatstays, taking into account the geometry, trying M200,450 L350,450 for the chainstay. I'm experimenting with a element to define the complete frame, using the coordinates to visualize the bike's skeleton.
Refining Frame Construction
I'm now iterating on the SVG element for the bicycle frame, carefully refining the coordinates. I've broken the frame into sections for clarity. I'm focusing on the chainstay, down tube, head tube, seat tube, top tube, seat stay, and fork. The head tube's placement and the fork's positioning are being carefully calculated for a realistic appearance, and the frame is now showing its shape. I'm taking care to use separate paths for separate strokes.
Analyzing Frame Geometry
I'm now deep in calculations to refine frame angles, starting with the head tube and fork. I'm carefully analyzing coordinate relationships, ensuring they align with expected bike geometry, using calculations such as the relationship between X and Y axes. The recent adjustment was moving the fork intersection along the down tube, now with X increasing and Y decreasing, and the fork's placement is set.
Perfecting Frame Dimensions
I've finalized the bicycle frame geometry using elements. The current coordinates, from chainstays to handlebars, feel just right. I've integrated a chainring and pedal setup now, refining the seat post and saddle, and also incorporated the handlebars.
Defining Pelican Anatomy
I'm now focused on constructing the pelican's body using SVG elements, crafting a realistic pose. I'm placing the pelican on the seat, working from tail to head with a curve. I'm focusing on attributes and coordinates to render the bird's posture. I'm currently defining the chest and back with curves that I'm tweaking.
Mapping Pelican Paths
I'm now meticulously mapping the pelican's path in the SVG. Using bezier curves, I've outlined the body from tail to head, and I'm refining the neck's curvature and chest, carefully placing anchor points. I'm focusing on attributes like fill and stroke for a clean aesthetic.
I've crafted the head and beak coordinates, focusing on the pelican's anatomy and eye placement, and I'm adding subtle shading.
Defining Pelican's Head
I'm now zeroing in on the pelican's head and beak, refining the SVG paths for a natural curvature, particularly the pouch. I'm focusing on the lower mandible and throat connection, and I'm ensuring accurate proportions. I've re-evaluated coordinates, and now I'm connecting the wing to the handlebars.
Defining Wing Attributes
I'm now focusing on the pelican's wing path details. I'm adding a black tip to the wing using a secondary path. I'm considering raising the back wing for balance and joy. I'm working out the curve details, now positioning and defining the wing, refining the path's Bezier curves for a more dynamic look. I'm taking the back wing's placement relative to the bird's body.
I'm now also defining legs and feet, and planning their placement related to the pedals.
Defining Leg Positioning
I'm now focusing on leg and foot placement to connect to pedals. I'm placing the back leg's coordinates at M270,240 L330,410 and foot at 330, 410, and front leg coordinates at M290,240 Q330,350 370,490. I'm also now refining the path for a front webbed foot, and also rounding its appearance. I will add a gradient.
Adding Chain and Fenders
I'm now integrating the chain, visualizing its path around the cogs with an SVG . The current focus includes path coordinates and arc calculations to define its movement. I am also adding fenders for a touch of whimsy.
Adding Whimsical Elements
I've incorporated yellow fenders with precise arc coordinates. I've also designed a retro cycling cap with a flipped-up brim and racing stripe, all in SVG paths. Now, I'm working to position them correctly in the scene.
Adding Dynamic Background Elements
I'm now incorporating movement by adding flowing scarf elements. I've also implemented a sky with sun and clouds, enhancing the sense of motion. The focus now is on refining the cloud's path for a softer look, alongside the addition of a sky and a sun.
Positioning Dynamic Elements
I'm now incorporating absolute positioning for cloud elements, defining their paths with bezier curves. Cloud 1 and 2 are rendered with opacity adjustments. I'm working on the ground elements now, planning a curved road path with defined coordinates and road lines, and checking that the new path aligns with the wheel positions.
\n\nFine-Tuning Ground Elements
I've refined the ground path by using a sweeping curved path for the road. The wheel alignment coordinates are now accurate, with the rear wheel at 200, 520, and the front wheel at 550, 520. I'm now fine-tuning the road line path for a consistent visual flow.
Adjusting Scene Depth
I'm now revising the road elements; I've simplified it to a flat surface for proper wheel grounding. The bike now has accurate road contact. I've also incorporated a shadow filter to add depth to the bike frame, making the bike clearly separated from other elements. I'm focusing on defining the Z-order, arranging the background elements like the sky, sun, and clouds in the appropriate layering.
Revising Z-order Priorities
I'm now carefully revisiting Z-order, specifically the front leg and pedal placement. I've realized the leg should be behind the pedal to create a realistic sense of depth, with the foot covering the bottom portion. I'm updating the elements' order for correct layering.
Revising Layering Order
I'm now iterating on depth ordering; I must ensure my layers are in the correct sequence. The crank arm must be over the chainring, then the pedal, then the foot. I've corrected the order with the leg, foot, and pedal on top for proper visual layering. I've re-defined pelican coordinates for realistic body contours.
Defining Pelican Curves
I'm now iterating on the pelican's body path with bezier curves to define a realistic anatomy. I'm focusing on crafting the back and neck curvature with the first bezier curve, starting at 170, 210. The head is defined, with coordinates from the start point to the tip of the head, and I'm fine-tuning curve control points for a smooth transition.
Perfecting Pelican Features
I'm now integrating the beak details and eye components into the SVG. I've placed the bezier curves for the upper and lower mandibles, precisely connecting them to the neck. I have also added the eyes. I'm focusing on attributes like fill and stroke for a clean aesthetic. I am also working on adding the cap.
Adjusting Wing Placement
I'm now making final adjustments to the wings' placement and attributes. I've re-checked the front wing's Bezier curves, ensuring the wingtip now intersects the handlebars correctly. I'm focusing on defining the grip and stem using elements. I've corrected the handlebar curve coordinates and finalized the wing's connection to the handlebars.
Finalizing Pelican Wing Placement
I'm now integrating the wing elements, and the recent focus has been on refining both the front and back wing paths and tip paths, specifically re-evaluating the placement of the wing tips in the scene. I am now defining the frame shadow, which makes the bicycle visually pop from the scene.
Refining Frame Highlights
I'm now implementing highlights for the bike frame using SVG paths. I'm focusing on defining lighter colored strokes to create a 3D effect on the tubular lines, using a translation to offset the paths. I've ensured a solid stroke for the tubes, and the highlights are now bringing the frame to life.
Replicating Wheel Components
I'm now focusing on efficiently duplicating the rear wheel for the front. I'm using with href pointing to the rear wheel definition, adjusting its position using x and y offsets, but realized offsets relative to the original coordinates, so adjustments are needed.
Duplicating Wheel Successfully
I've successfully duplicated the rear wheel for the front using . I've calculated the x offset (350) to correctly place the front wheel at 550, using the original wheel as a template. Now both wheels are positioned and rendered accurately, showing the tag's value!
Optimizing Visual Hierarchy
I'm now focusing on refining the visual impact by creating groups for logical SVG parts. I'm grouping the wheels and integrating this approach for the seat and seatpost. I'm also now adding the chainring and chain elements to the bike group.
Integrating Handlebars and Legs
I'm now integrating the handlebars, stem, and grips to the bike frame, making adjustments to the positioning, now with updated handlebar coordinates at M 455 220 Q 490 200, 470 190. I am also working on adding the back leg, including crank and pedal details. The leg is now defined with a path, with back leg coordinates at M 270 240 L 330 405.
Refining Dynamic Element Placement
I'm now implementing the scarf elements' motion, placing the path elements for their fluid movement. The scarf's initial positioning and curve coordination is taking place to align to the pelican. The flowing fabric is now visually dynamic, with smooth curves.
Adding Final Whimsy
I'm now incorporating final details like sun rays with a glowing effect using multiple circles. I'm also adding hills in the background to ground the scene and providing a sense of depth and space. I'm tweaking the colors for a cohesive aesthetic.
I am also fine tuning the pelican's neck with the recent attributes.
Refining Scenery Elements
I'm now integrating sun rays and background hills, along with those wind-suggesting lines, and I'm adding those light green hills. I'm focusing on the sky's color, but I've added a few motion lines to imply speed and movement. I've re-defined the scenic order for depth perception.
Analyzing Pelican's Anatomy
I'm now iterating on the pelican's neck and pouch integration, reconciling that the pouch is part of the neck and I must overlap it. The throat's curve now flows smoothly into the pouch path, with C 610, 95, 410, 95, 375, 110. I'm integrating that the pouch is the neck, and the existing neck coordinates are now being modified, by reviewing the curves.
Refining Pelican's Anatomy
I've successfully integrated the pouch into the pelican's neck with the path details. The pouch now curves fluidly, starting from the head (410, 60) down to the throat (375, 110). I'm adding subtle tail feathers at the end of the main body, using an adjusted Bezier curve path C 350 210, 330 260, 280 260 L 130 240 L 160 220 with jagged lines to get it just right.
Adding a Basket (Fun!)
I'm now integrating a bicycle basket, complete with a fish for the pelican. I'm focusing on defining an orange basket shape using paths and lines, adding weave details, and positioning the basket on the handlebars. I've defined a basket with coordinates such as M 480 210 to define its shape. The basket details are now integrated and positioned.
Verifying Layered Structure
I'm now carefully reviewing and refining the SVG's layering using tags like and the Z-order of groups and elements. I'm focusing on the correct rendering sequence: background, hills, sun, clouds, road, bike, and finally the pelican with its accessories and motion elements. I'm making sure elements are stacked logically and visually. I'm also ensuring the basket is on top of the bike, and that the fish is correctly positioned with its head up.
Confirming Leg Placement
Now I'm confirming that the layering ensures the front crank and pedal correctly overlay the bike frame. The front leg and foot, now rendered over the crank and pedal, also align with the intended positioning. I'm verifying the layering order with comments within the SVG. The plan worked.
Organizing Layered Structure
I'm now implementing the correct Z-order in the SVG based on that defined visual hierarchy. I'm grouping elements by the visual layers, as planned, and the bike drivetrain base now holds the chain and chainring. I've ensured a cohesive layered structure with comments indicating the purpose of each section and order.
Refining Element Positioning
I'm now focusing on refining the front crank's pivot point. I realize that for realistic rotation, the crank needs to orbit the chainring's center at 350, 450. The crank's current placement (370, 490) will now rotate around that central point! I'm verifying proportions for the bike frame. I am confirming seat tube coordinates.
Finalizing Scene Aesthetics
I'm now implementing the color palette refinements, updating the SVG with the planned colors. The bike frame is a vibrant red, and highlights provide depth. I'm focusing on the sky's light blue and the pelican's subtle shading. The basket is orange, with a fish inside for fun.
Integrating Final Visual Details
I'm now adding the final details for the pelican's expression. After reviewing, a simple angled cheek line will add the desired focus. I've also added the sun and sky colors. The SVG is ready!
Validating Elements Iteratively
I'm now meticulously reviewing all paths, focusing on closure and syntax. I'm verifying the XML casing and element structures for correctness, and I'm ensuring everything is properly closed and consistent. I am now refining to create a better image. I am self-correcting by mental walk-through, verifying the leg/pedal layering and ensuring all elements overlap correctly.
Validating Pelican Placement
I'm now iterating on the pelican's placement regarding the bicycle seat, ensuring realistic contact. I'm confirming a 25px overlap of the belly on the seat, to visually indicate a sitting position. My main plan is that the weight of the pelican will look accurate. I am visualizing, and validating the plan.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
<defs>
<!-- Gradients -->
<linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#BAE6FD" />
<stop offset="100%" stop-color="#F0F9FF" />
</linearGradient>
<!-- Drop Shadow for Frame -->
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="2" dy="5" stdDeviation="3" flood-color="#000" flood-opacity="0.15" />
</filter>
<!-- Wheel Definition -->
<g id="wheel">
<!-- Tire -->
<circle cx="0" cy="0" r="66" fill="none" stroke="#1F2937" stroke-width="14" />
<!-- Inner Rim -->
<circle cx="0" cy="0" r="59" fill="none" stroke="#94A3B8" stroke-width="4" />
<!-- Spokes -->
<g stroke="#CBD5E1" stroke-width="2">
<line x1="0" y1="-59" x2="0" y2="59" />
<line x1="-59" y1="0" x2="59" y2="0" />
<line x1="-42" y1="-42" x2="42" y2="42" />
<line x1="-42" y1="42" x2="42" y2="-42" />
<line x1="-22.5" y1="-54.5" x2="22.5" y2="54.5" />
<line x1="22.5" y1="-54.5" x2="-22.5" y2="54.5" />
<line x1="-54.5" y1="-22.5" x2="54.5" y2="22.5" />
<line x1="-54.5" y1="22.5" x2="54.5" y2="-22.5" />
</g>
<!-- Hub -->
<circle cx="0" cy="0" r="10" fill="#475569" />
<circle cx="0" cy="0" r="5" fill="#E2E8F0" />
</g>
</defs>
<!-- 1. Sky & Environment -->
<rect x="0" y="0" width="800" height="600" fill="url(#skyGrad)" />
<g id="sun">
<circle cx="680" cy="120" r="80" fill="#FEF08A" opacity="0.3" />
<circle cx="680" cy="120" r="60" fill="#FEF08A" opacity="0.6" />
<circle cx="680" cy="120" r="40" fill="#FDE047" />
</g>
<g id="clouds">
<!-- Cloud 1 -->
<path d="M 150 180 Q 150 140, 190 140 Q 210 110, 250 140 Q 290 140, 290 180 Z" fill="#FFFFFF" opacity="0.9"/>
<!-- Cloud 2 -->
<path d="M 600 280 Q 600 250, 630 250 Q 650 230, 670 250 Q 700 250, 700 280 Z" fill="#FFFFFF" opacity="0.8"/>
<!-- Cloud 3 -->
<path d="M 350 120 Q 350 100, 370 100 Q 380 90, 390 100 Q 410 100, 410 120 Z" fill="#FFFFFF" opacity="0.7"/>
</g>
<g id="hills">
<path d="M 0 520 Q 250 420, 550 520 Z" fill="#D1FAE5" />
<path d="M 400 520 Q 650 450, 800 520 Z" fill="#A7F3D0" />
</g>
<g id="road">
<rect x="0" y="520" width="800" height="80" fill="#94A3B8" />
<line x1="0" y1="520" x2="800" y2="520" stroke="#475569" stroke-width="6" />
<line x1="0" y1="560" x2="800" y2="560" stroke="#CBD5E1" stroke-width="6" stroke-dasharray="40,40" />
</g>
<g id="wind" stroke="#93C5FD" stroke-width="3" stroke-linecap="round" opacity="0.6">
<line x1="100" y1="250" x2="160" y2="250" />
<line x1="50" y1="270" x2="120" y2="270" />
<line x1="120" y1="100" x2="180" y2="100" />
<line x1="600" y1="180" x2="650" y2="180" />
<line x1="720" y1="350" x2="780" y2="350" />
</g>
<!-- 2. Far Side Character Elements -->
<g id="back-scarf">
<path d="M 365 85 C 300 70, 250 90, 180 75 C 220 95, 280 100, 365 100 Z" fill="#10B981" />
<path d="M 365 85 C 290 50, 220 70, 160 40 C 210 70, 280 80, 365 100 Z" fill="#059669" />
</g>
<g id="back-wing">
<!-- Wing Base -->
<path d="M 260 100 C 220 40, 160 20, 120 20 C 150 50, 180 90, 230 120 Z" fill="#E5E7EB" stroke="#D1D5DB" stroke-width="3"/>
<!-- Black Flight Feathers -->
<path d="M 165 35 C 145 25, 130 20, 120 20 C 135 35, 145 45, 155 55 Z" fill="#374151" />
</g>
<g id="back-leg-crank">
<!-- Crank Arm -->
<line x1="350" y1="450" x2="330" y2="410" stroke="#94A3B8" stroke-width="8" stroke-linecap="round"/>
<!-- Pedal Base -->
<rect x="315" y="400" width="30" height="12" rx="4" fill="#334155" />
<!-- Leg -->
<path d="M 270 240 L 330 405" stroke="#FB923C" stroke-width="14" stroke-linecap="round" fill="none" />
<!-- Webbed Foot -->
<path d="M 320 400 Q 350 390, 360 410 Q 330 420, 310 410 Z" fill="#F97316" />
</g>
<!-- 3. Bicycle Elements -->
<g id="wheels">
<use href="#wheel" x="200" y="450" />
<use href="#wheel" x="550" y="450" />
</g>
<g id="fenders">
<!-- Rear Fender -->
<path d="M 120 450 A 80 80 0 0 1 260 397" fill="none" stroke="#FBBF24" stroke-width="10" stroke-linecap="round"/>
<!-- Front Fender -->
<path d="M 470 450 A 80 80 0 0 1 610 397" fill="none" stroke="#FBBF24" stroke-width="10" stroke-linecap="round"/>
</g>
<g id="bike-frame">
<!-- Main Frame Body -->
<path d="M 200 450 L 350 450 L 491 310 L 470 260
M 350 450 L 290 270 L 470 260
M 200 450 L 290 270
M 470 260 L 550 450"
stroke="#EF4444" stroke-width="16" fill="none"
stroke-linecap="round" stroke-linejoin="round"
filter="url(#shadow)"/>
<!-- Tubular Highlight -->
<path d="M 200 450 L 350 450 L 491 310 L 470 260
M 350 450 L 290 270 L 470 260
M 200 450 L 290 270
M 470 260 L 550 450"
stroke="#FCA5A5" stroke-width="4" fill="none"
stroke-linecap="round" stroke-linejoin="round"
transform="translate(-2, -2)"/>
</g>
<g id="drivetrain-base">
<!-- Chainring -->
<circle cx="350" cy="450" r="28" fill="none" stroke="#475569" stroke-width="6" stroke-dasharray="4,4" />
<circle cx="350" cy="450" r="24" fill="#64748B" />
<circle cx="350" cy="450" r="10" fill="#0F172A" />
<!-- Chain -->
<path d="M 200 438 L 350 422 A 28 28 0 0 1 350 478 L 200 462 A 12 12 0 0 1 200 438 Z" fill="none" stroke="#334155" stroke-width="4" stroke-dasharray="4,2"/>
</g>
<g id="basket">
<!-- Fish -->
<path d="M 505 210 C 505 180, 530 170, 540 190 C 530 195, 525 200, 520 210 Z" fill="#9CA3AF" />
<path d="M 540 190 L 555 180 L 550 195 Z" fill="#9CA3AF" />
<circle cx="515" cy="190" r="2" fill="#111" />
<!-- Wicker Basket -->
<path d="M 480 210 L 530 210 L 520 260 L 490 260 Z" fill="#D97706" />
<path d="M 480 210 L 530 210 L 520 260 L 490 260 Z" fill="none" stroke="#B45309" stroke-width="4" stroke-linejoin="round"/>
<!-- Weave Lines -->
<line x1="490" y1="210" x2="495" y2="260" stroke="#B45309" stroke-width="2"/>
<line x1="500" y1="210" x2="505" y2="260" stroke="#B45309" stroke-width="2"/>
<line x1="510" y1="210" x2="515" y2="260" stroke="#B45309" stroke-width="2"/>
<line x1="520" y1="210" x2="520" y2="260" stroke="#B45309" stroke-width="2"/>
<line x1="485" y1="225" x2="525" y2="225" stroke="#B45309" stroke-width="2"/>
<line x1="488" y1="245" x2="522" y2="245" stroke="#B45309" stroke-width="2"/>
</g>
<g id="saddle-bars">
<!-- Seatpost -->
<line x1="290" y1="270" x2="275" y2="230" stroke="#94A3B8" stroke-width="10" stroke-linecap="round"/>
<!-- Saddle -->
<path d="M 250 230 C 270 220, 290 225, 305 235 C 310 240, 300 245, 275 245 C 245 245, 230 240, 250 230 Z" fill="#1F2937" />
<!-- Stem -->
<line x1="470" y1="260" x2="455" y2="220" stroke="#94A3B8" stroke-width="10" stroke-linecap="round"/>
<!-- Handlebar Bar -->
<path d="M 455 220 Q 490 200, 470 190" fill="none" stroke="#94A3B8" stroke-width="8" stroke-linecap="round"/>
<!-- Cute Bell -->
<path d="M 452 205 A 8 8 0 0 1 468 205 Z" fill="#FCD34D" transform="rotate(-20 460 205)" />
<circle cx="457" cy="198" r="2" fill="#F59E0B" />
<!-- Grip -->
<line x1="475" y1="185" x2="465" y2="195" stroke="#111" stroke-width="14" stroke-linecap="round"/>
</g>
<!-- 4. Main Character Body -->
<g id="pelican-body">
<!-- Plump Body & Neck Path -->
<path d="M 170 200
C 150 150, 230 110, 310 80
C 350 65, 360 20, 380 20
C 400 20, 420 30, 420 50
C 420 70, 380 90, 370 130
C 350 210, 330 260, 280 260
C 230 260, 190 260, 170 250
L 130 240 L 160 225 L 140 210 L 170 200 Z"
fill="#F8FAFC" stroke="#CBD5E1" stroke-width="3" stroke-linejoin="round"/>
</g>
<g id="pelican-head">
<!-- Lower Mandible (Pouch) overlapping front of neck -->
<path d="M 410 60 C 430 65, 520 75, 610 95 C 570 190, 450 180, 375 110 C 385 90, 395 70, 410 60 Z"
fill="#F97316" stroke="#EA580C" stroke-width="2" stroke-linejoin="round"/>
<!-- Upper Mandible (Beak) -->
<path d="M 410 45 C 500 40, 580 70, 620 90 C 630 95, 620 100, 610 95 C 520 75, 430 65, 410 60 Z"
fill="#FBBF24" stroke="#F59E0B" stroke-width="2" stroke-linejoin="round"/>
<!-- Eye Details -->
<circle cx="400" cy="35" r="9" fill="#FEF08A" />
<circle cx="402" cy="35" r="4" fill="#111" />
<circle cx="404" cy="34" r="1.5" fill="#FFF" />
<path d="M 395 25 Q 405 20, 410 28" fill="none" stroke="#64748B" stroke-width="2" stroke-linecap="round" />
</g>
<!-- 5. Near Side Character Elements -->
<g id="front-scarf">
<!-- Neck Wrap -->
<path d="M 360 70 C 390 60, 400 90, 370 100 C 345 90, 345 80, 360 70 Z" fill="#34D399" />
</g>
<g id="cap">
<!-- Retro Cycling Cap Dome -->
<path d="M 370 20 C 370 -5, 415 -5, 420 20 Z" fill="#3B82F6" />
<!-- Cap Stripe -->
<path d="M 390 0 C 395 -5, 405 -5, 405 20 L 390 20 Z" fill="#F8F9FA" />
<!-- Flipped Brim -->
<path d="M 420 20 C 435 10, 445 10, 450 25 C 435 20, 425 25, 420 25 Z" fill="#EF4444" />
</g>
<g id="front-wing">
<!-- Wing Base stretching to handlebars -->
<path d="M 280 140 C 350 150, 420 170, 470 190 C 450 210, 420 210, 400 200 C 330 180, 270 190, 260 160 Z"
fill="#F3F4F6" stroke="#D1D5DB" stroke-width="3" stroke-linejoin="round"/>
<!-- Black Flight Feathers on Wing Tip -->
<path d="M 420 175 C 440 182, 460 187, 470 190 C 450 210, 430 208, 410 198 Z" fill="#374151" />
</g>
<g id="front-leg-crank">
<!-- Crank Arm -->
<line x1="350" y1="450" x2="370" y2="490" stroke="#94A3B8" stroke-width="8" stroke-linecap="round"/>
<!-- Pedal Base -->
<rect x="355" y="485" width="30" height="12" rx="4" fill="#334155" />
<!-- Front Leg -->
<path d="M 290 240 L 350 350 L 370 485" stroke="#FB923C" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<!-- Webbed Foot resting over pedal -->
<path d="M 360 480 Q 400 470, 420 490 Q 400 510, 350 500 Z" fill="#F97316" />
</g>
</svg>