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

Let me build a single self-contained index.html with an inline SVG of a pelican riding a bicycle. I'll write it carefully, then use browser tools to verify.

Let me design the SVG.

ViewBox: 0 0 800 600.

Bicycle: two wheels centered at ground. Rear wheel center (260, 430), front wheel center (560, 430), radius 90. Frame connecting. Handlebar near front top. Saddle near rear top. Pedals at crank center (400, 430)? Typically bottom bracket between wheels, around (400, 450). Let's put crank at (400, 440) with pedals.

Pelican sits on saddle at (~330, 330). Body oval. Long bill pointing forward (to the right). Feet near pedals.

Let me draw:

- Background: sky gradient, ground.
- Wheels: circles with rim, tire, spokes.
- Frame: rear hub (260,430), bottom bracket (400,445), seat tube up to saddle (350,320), head tube at (540,320), front hub (560,430), top tube connecting (350,320)-(545,325), down tube (400,445)-(545,330), chain stay (260,430)-(400,445), seat stay (260,430)-(350,320), fork (540,330)-(560,430).
- Chain: a loop around crank and rear hub.
- Handlebars at top of head tube (~540,315) with curve.
- Saddle at (345, 315).
- Pedals: crank arms from bottom bracket to pedal positions.

Pelican:
- Body ellipse centered around (400, 260), rotated slightly.
- Neck going up to head around (500, 170).
- Head circle/oval.
- Bill: long triangle from head forward-right, with pouch below.
- Eye.
- Wings: one wing reaching to handlebar (to right).
- Feet: legs going down to pedals.

Let me place pedals at (400-40, 445+35) and (400+40, 445-35)? Crank arms rotate. Let's set pedal positions: left pedal (370, 480), right pedal (430, 410). Feet near there.

Actually pelican sits on saddle, body at ~(360,270). Legs from body down to pedals around (390, 460). Let's make feet at pedals.

Let me just carefully craft coordinates.

Let me choose bottom bracket BB = (405, 450).
Crank arm length 45. Pedals: pedal down-left at (375, 490) and up-right at (435, 410). Hmm the right foot on upper pedal, left foot on lower.

Saddle at (340, 320). Pelican body center (390, 265), rx 75, ry 60, rotated -10°.

Neck from body front-top (440, 220) up to head (515, 150). Head ellipse at (525, 145) r 30.

Bill: from (545, 145) extending right to (690, 165), upper mandible; pouch below from bill tip back to (555, 175) bulging down to (620, 210). Long bill.

Wing: from shoulder (430, 240) to hand near handlebar (535, 300). Actually handlebars at (555, 300)? Let me set head tube top at (545, 320). Handlebar grips around (560, 300).

Hmm, front wheel at (575, 430) radius 85. Fork goes from head tube top (545, 320) to hub (575, 430). Head tube is around (530,320)-(550,340). Handlebar at (545, 310) with grip extending right/up.

Pelican wing reaches to handlebar at ~(555, 305).

Feet: from body bottom (~390, 310), legs down to pedals.

Let me build with layered groups.

I'll write the SVG carefully. Let me define gradients and shadows.

Let me just produce the code.

I'll make the drawing fairly detailed. Let me write coordinates in a coherent layout.

Ground line y=530. Wheel radius 85, so wheel centers y = 530-85 = 445. Rear wheel center (250, 445), front wheel center (580, 445).

Bottom bracket BB = (400, 460) roughly between, slightly lower. Actually BB in real bikes is below wheel hub line? No, BB is near/below hub height. Let's put (400, 470).

Frame points:
- Rear hub R (250, 445)
- Front hub F (580, 445)
- BB (400, 470)
- Seat top S (330, 320)
- Head top H (555, 320) — head tube from (545,325) to (565,360)

Frame tubes (thick strokes):
- Seat tube: S(335,330) to BB(400,470)
- Down tube: BB(400,470) to (560,355)
- Top tube: S(340,325) to (555,340)
- Chain stay: BB(400,470) to R(250,445)
- Seat stay: S(340,330) to R(250,445)
- Fork: (555,350) to F(580,445)
- Head tube: (540,320)-(565,355)

Handlebar stem from (550,335) up to (548,300), then bar curves to the right: path from (548,300) curve to (585,295) then grip. Let's make handlebar: M548,305 L548,290 Q548,278 562,278 L590,278 with grips.

Saddle at S: ellipse at (330, 315), width 70, height 16, tilt.

Pelican:
- Body ellipse center (385, 250), rx 78, ry 62, rotate -8.
- Tail feathers behind at (305, 250).
- Neck: thick path from (430, 215) curving up to (495, 155).
- Head: ellipse center (515, 150), rx 32, ry 30.
- Bill upper: polygon from (540,140) to (700,158) to (545,162). Actually long bill. Tip at (700, 165).
- Pouch: from (545,162) curve down to (650, 205) back to (545, 168). A closed shape.
- Eye at (510, 140).

Wing: shape from shoulder (420,230) sweeping to (545, 300) near handlebar, with feather details.

Legs: orange, from body bottom (395, 300) to foot at pedal. Two legs: one to lower pedal (375, 490), one to upper pedal (435, 412). Let's have near leg to lower pedal.

Foot at (375, 490): webbed foot shape.

Hmm the body bottom at y~310, leg length to pedal y~490 is 180, fine.

Let me consider pose: feet near pedals, wing on handlebar. Good.

Now painting order: background, wheels (behind frame?), frame, then pelican behind some frame parts? Pelican sits on saddle, legs in front/around. Let's draw: background, wheels, frame + handlebar + saddle, pelican body/neck/head/bill, then legs and wing on top, pedals/crank on top of feet maybe.

Actually crank and pedals in front of feet is fine.

Let me write it.

I'll add a subtle animation maybe (not required) but keep minimal. I'll add optional gentle bob? Not required; skip to avoid complexity. Maybe a slight rotation of wheels and legs? Not required. Keep static but polished.

Accessibility: <title> and <desc> with role="img" aria-labelledby.

Responsive: SVG width 100%, height auto, viewBox. Container max-width.

Let me write the file.

I'll compute some path curves.

Wheels: tire circle r=85 stroke width 10 dark. Rim r=74 stroke 4. Hub r=8. Spokes lines from hub to rim at angles.

Let me generate spokes in JS? No, just write static. Could generate via JS but simpler static. Actually I can generate the SVG partly with JS, but requirement says inline SVG shapes/paths embedded. Keeping static is safest. I'll write ~12 spokes per wheel manually-ish. That's tedious but fine. Alternatively use a group and rotate copies via <use>. Use <g id="spokes"> with lines, and <use> with transform rotate. Or just a few spokes.

I'll define spokes as paths: lines at 0,30,60,...150 degrees times two (through center). Actually a line through center covers two spokes. 6 lines at 0,30,60,90,120,150 degrees.

For wheel center, I can use a group translated to hub, then lines from (-74,0) to (74,0) etc. with rotations. Use <g transform="rotate(30)"> in a group translated.

Let me do: <g transform="translate(250,445)"> then circles and spokes. For spokes lines use <line x1="-74" y1="0" x2="74" y2="0"/> with group rotations. 

Let me write.

For the pelican bill pouch, colors: bill orange/yellow, pouch lighter orange.

Body: white/cream with grey shading. Wing grey tips.

Let me write the HTML now.

I'll add a nice sky gradient background, sun, clouds, ground.

Let me draft the SVG body:

```
<svg viewBox="0 0 800 620" ...>
```

Ground at y=530, wheels bottom at 530. Sun top-left.

Actually with wheels center 445 r85 bottom =530. Good. Leave some margin top for head/bill at y~120. Bill tip x~700 plus margin. viewBox width 800 ok. Sun at (110,110).

Let me write everything.

Pelican bill: I want it clearly long with pouch. Head center (515,150). Bill base attaches around (535,150). Upper mandible a long tapering shape to (695,172). Pouch hangs below from base to tip.

Upper bill path: M535,142 Q600,150 695,168 Q600,158 535,158 Z — gives thin. Hmm.

Better: upper bill: M533,141 C590,148 650,162 698,172 C650,168 590,160 533,159 Z. A sliver. Let me instead make upper mandible thicker: top edge from (533,138) to tip (700,170); bottom edge back from tip to (533,160). Path: M533,138 Q615,150 700,170 Q615,163 533,160 Z. Reasonably thick tapering.

Pouch: attaches under bill base and bill bottom, bulges downward. Path: M533,160 Q560,215 640,205 Q690,198 700,170 Q615,163 533,160 Z. Hmm pouch should hang below bill. Let's make: M535,158 C555,215 620,220 665,200 C685,190 695,180 700,170 Q615,163 535,158 Z. 

Head ellipse at (515,148) rx 34 ry 32, so bill base at x=535 (right edge) is fine.

Eye: circle (508,138) r7 dark, with white highlight.

Neck: from body to head. Use a thick path or polygon. Body ellipse center (385,250) rx 80 ry 62 rotated -8 -> top around y=190. Neck connects (430,200) to (505,160). I'll draw a shape: M420,205 C450,150 480,150 505,165 L515,190 C490,185 460,195 445,225 Z.

Wing: near side (front) wing reaching handlebar. Shoulder at (410,230). Shape: M400,225 C450,235 500,260 548,300 C540,312 520,315 500,305 C470,285 430,265 400,255 Z. Then feather lines.

Handlebar grip around (560,300). Let me set handlebar geometry: head tube top (540,320). Stem goes up from (540,320) to (545,295). Bar: M545,295 Q545,283 560,283 L600,283. Grip at end (600,283). Hmm wing reaching to (548,300) then to bar. Let me have wing hand/wingtip at (575,288) grabbing the bar. So wing shape extends to (575,292).

Let me make wing: M395,222 C450,230 510,255 578,290 C572,305 555,312 535,305 C495,288 445,262 402,252 Z. Good, tip near bar.

Legs: body bottom around (390,308). Two legs.
- Near leg (right side, darker?): from (400,300) to pedal at (375,492). Thick stroke orange, width 14, maybe with joint. Path M398,296 Q380,380 375,488.
- Far leg: from (370,300) to pedal (438,412): M368,296 Q400,360 438,410. Draw before body? Far leg behind body, near leg in front.

Feet: webbed. At (375,490): a foot shape pointing forward-right. Path: M360,486 L395,486 Q400,486 400,492 Q400,500 388,500 L362,500 Q355,500 355,493 Z. Something. And the pedal.

Pedals: crank arms from BB (405,460). Let me compute. Actually BB should be inside frame; set BB=(400,468). Crank arm 54. Lower pedal at BB + (cos(200°)*54... let's just place: lower pedal at (365,510)?? But ground at 530, pedal would be near ground. Fine. Upper pedal at (435,426).

Crank arm 1: line from BB (400,468) to (365,508). Pedal rectangle at (365,508).
Crank arm 2: line from BB to (435,428). Pedal at (435,428).

Feet on pedals: near foot at (365,508)?? That's below the wheel bottom almost (530). Body bottom at 310, so leg length ~200. Slightly long but plausible for cartoon.

Hmm maybe raise BB to 450 and reduce crank to 48. Lower pedal (365,490), upper (435,410). Wheels center 445. Fine.

Let me set BB=(400,455). Crank 50. Lower pedal at (368,498), upper at (432,412).

Legs from body bottom (390,300) to foot (368,498) length ~200 same as body-to-pedal; okay.

Feet at pedal positions, pedals drawn on top? Pedal under foot. Draw pedal first, then foot slightly above. Actually foot rests on pedal; draw pedal, foot on top, then crank arm behind.

Let me simplify: draw crank+pedals, then feet over them.

Saddle: at S=(332,322). Saddle top. Pelican body bottom sits around (370,300). The saddle should be under the body. Saddle ellipse centered (335,320) rx 38 ry 10 rotated -8.

Body center (385,250) ry62 -> bottom at y=312 near x=385. Saddle at 320. Good contact.

Seat post from saddle (335,325) to seat tube top; seat tube from S(338,330) to BB(400,455).

Let me finalize frame coordinates:
- R hub (250,445)
- F hub (580,445)
- BB (400,455)
- Seat cluster S=(338,328)
- Head top HT=(540,325), head bottom HB=(560,362)
- Handlebar stem top (546,292)
- Fork: from (555,355) to F(580,445)

Tubes:
- seat tube: 338,328 -> 400,455 (width 12)
- down tube: 400,455 -> 552,352 (width 12)
- top tube: 342,330 -> 545,340 (width 11)
- chain stay: 400,455 -> 250,445 (width 9)
- seat stay: 340,332 -> 250,445 (width 8)
- head tube: 538,322 -> 560,362 (width 14)
- fork: 558,358 -> 580,445 (width 10)
- Handlebar: stem M546,325 L546,300, bar M546,300 Q546,286 562,286 L602,286.

Chain: path around BB and R hub: small circle at 250 r? chain runs from chainring (circle at BB r=22) to cog at R (r=10). Approx: two lines tangent. Just draw a path: M250,455? Let me draw a "chain" as path from rear cog up to chainring top, and back. rear cog center (250,445) r 12, chainring center (400,455) r 24.
Top tangent-ish: from (250,433) to (400,431). Bottom: from (250,457) to (400,479). Path: M250,433 L400,431 A24,24 0 0 1 400,479 L250,457 A12,12 0 0 1 250,433 Z. Good enough.

Chainring circle: circle (400,455) r 24 with dashed? Just stroke.

Now spokes generation. I'll write group with lines and rotations.

Let me write the code.

For responsiveness: `<svg viewBox="0 0 800 620" preserveAspectRatio="xMidYMid meet" width="100%" style="max-width:900px">`.

Let me write file now.

I'll also add a subtle shadow ellipse under wheels on ground.

Let me write.

Also maybe add gentle animation to wheels and legs — not required, skip. Actually a little animation makes it lively but risks complexity; I'll add CSS rotation to wheels using SVG <animateTransform>? Not required. I'll add a subtle idle bob to the whole subject maybe. Keep static to be safe and ensure everything is fine.

Let me write the HTML.

I'll write JS just for a small feature: maybe none needed. Add a little interactive toggle (spin) optional. Keep minimal but I'll add a "spin wheels" button? Not required. I'll include a small JS for a fun animation toggle to justify JS, but not necessary. Let me add optional animation with a button that toggles wheel spinning + pedaling. Could be nice but risk. I'll add simple CSS animation classes toggled by button, and use transform-origin via rotation. For SVG groups, CSS transform-box: fill-box; transform-origin: center. Might be fiddly. Let me skip animation entirely; requirement doesn't need it. But addendum says "Use HTML, CSS, and JavaScript as needed." Not mandatory.

I'll include a tiny JS for accessibility maybe not. Fine, I'll include a small JS that adds a subtle entrance animation or nothing. Let me just include a minimal script that sets current year or a decorative twinkle — no network. Actually I'll add star twinkle in background sky via JS? Unnecessary.

Let me include JS that animates the wheels rotating and pedals spinning only when user clicks a button — gives interactivity and demonstrates JS. I'll implement carefully:

- Group `#rearWheel` content (spokes only) rotate around center. Use SVG animateTransform triggered? Easier: use JS requestAnimationFrame to update transform attribute. That's robust.

I'll implement: elements with class rotatable, store cx, cy, and rotate angle increment. On button toggle, requestAnimationFrame loops and sets `transform="rotate(a cx cy)"`. For wheels (spokes), crank assembly, pedals, legs hard to move. Just wheels and crank.

But if wheels spin and crank spins, feet stay — slight mismatch but acceptable optional. Actually pedaling feet should move with pedals; if I rotate crank including pedals and feet, legs need to follow. Complex. Let me only spin wheels + crank, and keep feet? That looks odd but fine. Or spin only the wheels. I'll spin only wheels for the fun toggle. That's safe and clearly correct-ish (feet stay on pedals, wheels spin). Good.

Let me write JS:

```
const wheels=[{el, cx, cy, r}...]
```

Use groups for spokes: `<g class="spin" data-cx="250" data-cy="445">` spokes. On toggle, rAF increments angle, set transform rotate.

Also wheels have rims/tires static circles; only spokes need to spin to show rotation. Could also rotate a valve marker. I'll add a small dot on rim to show motion. Actually spoke rotation is visible.

Fine.

Now write.

Let me carefully produce path data.

I'll write the full file.

Let me write the index.html.

Now open in browser and inspect.

The image is displayed. Let me assess:

- Pelican recognizable: long bill with pouch yes, body, wing, feet. Head/neck fine.
- Bicycle: two wheels, frame, handlebars, saddle, pedals. Yes.
- Pose: feet near pedals? The legs seem to go down but the feet appear as orange shapes near the bottom pedal. The near leg goes down to lower pedal. Looks okay-ish. Wing reaches handlebar? The wing extends forward and its tip is near the handlebar grip — yes.

Issues:
1. The saddle is positioned at (336,322) but the pelican body center is at (386,252); the saddle looks like it's under the rear of the body. Fine.
2. The wing passes in front of the frame and looks like it's resting on the top tube; it reaches the handlebar. Good.
3. The near leg appears to merge with the seat tube/frame; the orange leg is quite thick and overlays down tube. Looks a bit odd but acceptable.
4. Feet: only one foot visible at bottom pedal; the far foot is behind. The near foot at lower pedal. Actually the pedal at bottom (stop) — the lower pedal rectangle at y=494, the foot is drawn over it. Looks like the foot is at the pedal. Good.
5. The bill points forward/right which is direction of travel? The front wheel is on the right. Good, pelican faces forward.

Concerns:
- The far leg: I drew a foot at (420,404)... near the upper pedal. In the image, I see the upper pedal area with something orange. Fine.
- The neck seems to emerge from body nicely.

Potential problem: The wing shape looks like a long gray plank crossing the frame — could be mistaken. But it has feather lines. It's fine as a wing.

- The pelican's body is floating a bit above the saddle? Body bottom ~y=315, saddle top ~y=312. They touch. In image, body sits on saddle. Good.

- Feet near pedals: The near foot looks like it's on the lower pedal. Good. But the leg goes straight down through the frame. That's plausible.

- The toe/foot shape at bottom looks a bit like a blob but okay.

One issue: the pelican's near wing covers the top tube and reaches handlebar, but the wing tip "grip" shape at (556,284)-(590,292) is near the handlebar. Good.

Unclipped framing: everything within viewBox. The sun, clouds fine. Bill tip at x=702, within 800. Good.

Overall it's recognizable. Let me zoom maybe not needed. Let me test the spin button and check console. Also verify DOM has inline SVG.

Minor improvements I could make:
- The lower leg is very thick and orange, dominating. Could thin slightly.
- The foot on the pedal: maybe reposition so it clearly sits on pedal. The lower pedal at (352,494,32,10). Foot drawn at y=484-504, over it. Good.

I think it's acceptable. Let me click spin and check console and screenshot.

Also check that the upper pedal/far foot is visible. Let me click spin.

The spin works (button toggled, no console errors). Wheels spokes spun slightly (hard to tell but transform applied). 

Now, reviewing the composition critically: the near wing covers the top tube and looks a bit like a gray plank, but with feather lines it reads as a wing. The wing is reaching the handlebar. 

One concern: the pelican's neck/head. Looks good — long bill with pouch clearly visible.

The far foot: I see near the upper pedal there's an orange shape. The near foot at bottom pedal. Feet near pedals ✓.

I notice the near leg (orange, thick) passes over the seat tube and down tube and overlaps the frame. It reads as a leg. Acceptable.

I think it satisfies requirements. But let me consider improving the wing so it looks more like a wing and less like a plank overlapping the frame. Currently the wing extends from body to handlebar and sits in front of the top tube, which visually connects bird to bike — that's actually good for "clear contact near handlebars."

I could make the wing a bit more feathered/curved. It's fine.

One thing: the pelvic body sits on saddle; the saddle is dark brown at (336,322) mostly hidden behind the leg and body. In image, saddle visible left of body. Good.

Everything within frame. No clipping.

Let me double-check the SVG has title/desc (yes) and role img. Good.

Check console: empty. Good.

I'm fairly satisfied. Maybe one small fix: the far leg foot is drawn before the body and appears near the upper pedal, but it may be hidden behind frame? It's drawn before the bicycle? No — pelican is after bicycle, so far leg is on top of the bike. Actually the far leg is drawn as first element of #pelican, so on top of the bike. It appears as orange line from body to upper pedal. Fine.

I'll finalize. Report.

Actually, let me verify unclipped framing explicitly — the SVG viewBox 0 0 800 620 and all content within. Bill tip x=702, sun circle at cx=120 cy=110 r=120 extends to x=0..240, y=-10 top slightly negative. Sun gradient circle r=120 at cy=110 → top y=-10, slightly outside viewBox, clipped by svg viewport at top. That's just the sun glow, not the subject, and the actual sun disk is fine. The stage overflow hidden. It's okay but the glow top clipped. Minor. Could move sun down to cy=120 r=110. Not important since subject not clipped. But to be safe, adjust sun to cy=125 r=115 so no clipping of background element. Also clouds at translate(300,70) scale 0.7 top ellipse ry22 → top y ≈ 70-15=55 fine.

Let me make that tiny adjustment. Also the sun disk at 110 r46 fine.

Actually the gradient glow clipping is barely noticeable. I'll adjust anyway quickly.

Let me also double-check that the wheel spin actually updates (the two screenshots are near identical because rotation of symmetric spokes every 30° looks same; angle 4° diff not visible). That's fine, spokes are symmetric. To show motion, a valve marker would help. Add a small dot on rim in spin group so rotation is visible. Good idea — add a colored dot at (0,-70) in each spinning group. Let me add.

I'll make these two small edits and reload.

Sun glow no longer clipped. Valve markers visible (red dots). Let me click spin and take a motion/screenshot to confirm rotation visible. Let me click and then screenshot after a moment.

The screenshot is at start of spin. The red valve markers are at top. Spinning works (transform applied in DOM). Console empty. Good.

Let me do a quick motion check to confirm rotation. Actually let me just take another screenshot after some time to see the marker moved. Use motion action maybe. Let's do a screenshot again after a moment.

The valve markers moved (front marker now lower-right), confirming spin. Console empty. 

Everything looks good. Let me finalize.

Summary of what I checked:
- Initial render
- Pelican: long bill + pouch, body, wing, feet, eye
- Bicycle: 2 wheels, frame, handlebars, saddle, pedals, chain
- Riding pose: feet on pedals, wing on handlebar
- Framing fully visible
- Inline SVG with title/desc
- Spin toggle works, no console errors

Unverified: different viewport sizes / responsive scaling beyond this 1200x800, cross-browser behavior, accessibility screen reader output.