Pelican on a bicycle · deepseek-v4.1-flash

Let me build the SVG pelican on a bicycle. I'll write a nice self-contained index.html with a scene, maybe some animation (pedaling) as a bonus. Let me focus on clear geometry.

Let me plan the SVG coordinate system, viewBox 0 0 800 600.

Bicycle:
- Rear wheel center (250, 450), front wheel center (550, 450), radius 80.
- Frame: bottom bracket at (400, 450)? Actually pedals at bottom bracket. Let's put bottom bracket at (390, 450). Hmm wheels center y=450, radius 80 so ground at 530.

Let me design a standard bike:
- Rear wheel center R=(230,440), r=80
- Front wheel center F=(570,440), r=80
- Bottom bracket BB=(370,450)
- Seat post top / saddle at (330,300)
- Handlebar at (540,300)

Frame tubes:
- Rear triangle: R -> BB, R -> seat (330,310), seat -> BB
- Main: BB -> seat, seat -> head tube top (545,300), BB -> head tube top (down tube)
- Head tube: (545,300) to (560,350)? front fork to F.
- Fork: head tube bottom (555,345) -> F.

Wheels with spokes.

Pedals: crank from BB, pedal at end.

Pelican: sitting on saddle, body center around (330,250)? Feet reaching pedals near BB (370,450). That's a stretch. Let's make pelican body centered ~ (340, 230), feet reach down to pedals at around (370-400, 430). Long legs.

Actually a pelican riding a bike: body above the frame, wings forward to handlebars. Let me place:
- Body ellipse center (340, 210), rx 70, ry 55.
- Neck up to head at (430, 110).
- Bill long pointing forward/right: from head (470,105) extending to (650, 130) with pouch.
- Wing reaching from body (390,200) to handlebar (540,300). 
- Feet: legs from lower body (330,260) down to pedals.

Let me just write it and render, then adjust based on screenshot.

Let me make it more cartoonish and clear. I'll build carefully.

Let me define:
Ground line y=530.

Bicycle:
- rearWheel cx=230 cy=440 r=78
- frontWheel cx=570 cy=440 r=78
- BB = (360, 445)
- seatTop = (315, 300)
- headTop = (545, 295)
- headBottom = (558, 350)
- fork from headBottom to frontWheel center.

Frame:
- chainstay: BB to rearWheel
- seatstay: seatTop to rearWheel
- seat tube: BB to seatTop
- top tube: seatTop to headTop
- down tube: BB to headTop
- head tube: headTop to headBottom
- fork: headBottom to frontWheel center

Saddle at seatTop: a shape around (300, 290).

Handlebar: at headTop, a curved bar. Drop bars maybe. Simple: from headTop (545,295) go up to (545,270) then curve to (580,275) and (515,280). Let's make a simple bar with grips.

Pelican:
Body ellipse center (330, 210) rx=75 ry=58, rotated slightly.
Tail behind at (255, 200).
Neck: path from body top (350,165) curving up to head base (420,110).
Head: circle/ellipse center (435,105) r=30.
Bill: upper mandible from (460,95) to (640,120), pouch below from (460,110) to (630,130) curving down.

Wing: from shoulder (370,190) to handlebar (540,285). Path shape.

Legs: from body bottom (330,260) to pedal. Pedals: crank at BB, pedal positions. One pedal forward-up, other back-down. Foot near pedals.

Let me set crank length 40. Pedal A at BB + (35, -25) = (395,420). Pedal B at BB + (-35,25) = (325,470). Feet: left foot at pedal A, right at pedal B.

Legs: thigh from body (335,255) to knee (370,340), then shin to foot (395,420). Other leg similar to (325,470).

Wing reaches handlebar. Good.

Let me write code. I'll add a subtle sky gradient background, sun, ground. Maybe animate pedaling with CSS/JS? Optional. I could add animation rotating crank and wheels and moving legs — complex. Keep it simple but maybe animate wheel spokes and crank. Actually let's add a simple animation for polish but ensure static correctness. Maybe skip to save time. I'll add gentle bobbing? Let's just keep static, maybe a slow wheel rotation via CSS transform-origin. That's easy: group wheels rotate. But legs won't follow, minor. I'll keep static to be safe. Maybe add a subtle flag wave.

I'll add a title and desc, role="img", aria-labelledby.

Let me write the file.

For wings: create a wing shape path from shoulder to handlebar with feathers. Something like:
M 375 180 C 420 200, 480 240, 535 280 L 520 300 C 470 265, 410 235, 360 215 Z

Hand/feather tips at handlebar ~ (535,280).

Let me render and iterate.

Let me write index.html now.

Let me render and screenshot.

The screenshot shows a very nice pelican riding a bike! But there's a problem: the flag animation and wheel animation. The second frame shows the flag has detached? Actually the flag is attached to the rear wheel line at x=215. The wheels animate spin around "center" but transform-origin: center refers to the SVG element's own bounding box center? Actually for SVG elements, CSS transform-origin: center is relative to the element's bounding box by default in modern browsers (transform-box: view-box? default is view-box for SVG). Hmm. The wheel groups are spinning around wrong origin, causing them to move. In frame 2 the wheels appear displaced/rotated around a wrong center. Actually the wheel circle itself spinning looks same, but the spokes appear offset — and the whole wheel position moved? In frame 2 the rear wheel moved up-left and front wheel moved down-right. So the rotation origin is wrong.

Actually the flag detached too because the flag has transform-origin: 120px 150px but the flag path rotates around that point causing it to swing. In frame 2 the flag looks displaced to the right.

The problem: transform-origin with px on SVG elements uses the SVG user coordinate? With transform-box: view-box, transform-origin px values are in the SVG viewBox coordinate system? Actually the default transform-box is `view-box` for SVG elements. transform-origin: center then is center of the viewBox, not the wheel. That's why wheels rotate around viewBox center. I need transform-box: fill-box; transform-origin: center; for the wheel groups.

Also the wheel group includes spokes and they rotate, fine. Let me set transform-box: fill-box.

For flag, set transform-origin relative to fill-box: e.g., transform-origin: 0% 50% with transform-box: fill-box, so it waves from its left edge (mast).

Let me fix CSS.

Actually wait, the wheel group's bounding box: the circle r=82 centered, so fill-box center = wheel center. Good.

Flag path bounding box left edge at x=120, so transform-origin: left center.

Let me update.

Also, the pelican's feet: one foot at pedal (410,410) but the pedal appears drawn at around (413,409) — foot overlaps pedal nicely. The other foot at (330,474) near pedal. Good. The wing contacts handlebar. Good.

One issue: The pelican body slightly overlaps saddle, good. Overall looks great.

Let me fix the animation origins.

Also the front wheel in frame 2 rotated around viewBox center and moved. Fix.

Also consider removing animation entirely for safety? The task says animation not required. But it's a nice touch. I'll fix with fill-box.

Let me edit.

Now wheels stay in place and spokes rotate. Flag waves around its left edge. Looks great.

Now let me verify the DOM and accessibility, and check inline SVG only (no images). Let me inspect.

Everything checks out. The image shows a recognizable pelican with long bill and throat pouch, body, wings, webbed feet on pedals, wing on handlebar, bicycle with two wheels, frame, handlebars, saddle, pedals, all connected. No external resources. Accessible title/desc.

Let me check responsive sizing: viewBox 0 0 820 620, preserveAspectRatio, width 100%, height auto. Good. Complete subject visible (feet, wheels, bill within frame). The bill tip near sun but within viewBox (664 < 820). Good.

Done. Let me write final report. No need to do more browser passes; budget fine. I'll finalize.

Actually let me double-check the caption/whole thing has no JS. The task said JS as needed; not required. That's fine.

Final answer.