修复脚与脚踏同步问题的鹈鹕踩踏动画HTML代码

The user wants me to fix the synchronization issue with the pelican's feet and the pedals. The problem is that the feet need to move in sync with the pedal rotation. Let me analyze the current setup:

1. The crank/pedal group rotates around (360, 430) with a 1.2s cycle
2. The pelican body bounces with a 0.6s cycle
3. The feet are part of the pelican group but they should be connected to the pedals

The issue is that the feet are static within the pelican bouncing group, but the pedals are rotating. The feet should follow the pedal positions. Let me think about this...

The right foot should connect to the pedal that's going down, and the left foot should connect to the pedal that's going up. Since the crank rotates continuously, the feet need to rotate with the crank.

One approach: put the feet in the same rotating group as the crank, but offset so they maintain visual connection. But the legs connect from the body to the pedals - so the legs need to stretch and contract as the pedals rotate.

Actually, a simpler approach for a cartoon style: I can have the leg endpoints follow a circular path that matches the pedal rotation. Let me restructure this:

Option 1: Animate the leg endpoints to follow circular paths matching the pedal positions.

Option 2: Put the entire leg+foot in the crank rotation group, but the leg origin needs to stay at the body.

This is tricky. The cleanest approach for SVG animation would be to:

1. Keep the body bouncing
2. Have the legs' lower portions (from knee down) rotate with the crank
3. Use the same rotation center (360, 430) for the legs' lower portions

Let me redesign the legs. I'll split each leg into an upper part (attached to body, bouncing) and a lower part (attached to crank, rotating).

Actually, a better approach: I can make the foot positions follow the pedal positions by animating them to rotate around the crank center. The upper legs stay with the body.

Let me restructure:

- Upper legs: part of the pelican bouncing group (from hip to roughly knee area)
- Lower legs + feet: in a rotating group around (360, 430)

The lower right leg/foot would be positioned at roughly (350, 455) which is where the right pedal is when it's at the bottom of the rotation. The lower left leg/foot would be at roughly (370, 405) which is where the left pedal is at the top.

When the crank rotates, both lower legs/feet rotate with it.

But wait - the legs connect from the body. If the lower legs rotate with the crank, there will be a disconnect between the upper and lower leg parts. We need the knee to be at a point that bridges them.

Actually, for a simpler cartoon approach, let me just make the feet and lower legs part of the crank rotation group. The upper legs can be hidden or very short. In a side view of cycling, the legs look like they're going around with the pedals.

Let me redesign:

1. Upper leg stubs attached to body (short segments from hip)
2. Lower legs + feet in the crank rotation group

Or even better: put the entire visible leg (from knee down) and foot in the crank rotation group. The knee would be at some radius from the crank center.

Let me think about positions:
- Crank center: (360, 430)
- Right pedal (bottom): approximately (350, 455) - radius ~25
- Left pedal (top): approximately (370, 405) - radius ~25

For the right leg: knee at maybe (340, 440), ankle at (348, 450), foot at pedal position
For the left leg: knee at maybe (375, 415), ankle at (372, 408), foot at pedal position

I think the cleanest approach is:

1. Create a rotating group for the crank + pedals + lower legs + feet
2. The upper legs are short stubs from the body
3. The lower legs start from a point near the upper leg stubs and go to the pedals

Actually wait - let me reconsider. The lower legs should appear to connect from the hip area. If I put them in the rotating group, they'll rotate around the crank center, which means the knee position will move in a circle. The hip is at roughly (285, 340). The crank center is at (360, 430).

For the right leg at bottom position: the knee would be somewhere between the hip (285, 340) and the pedal (350, 455). Let's say knee at (310, 390) and ankle at (345, 445).

For the left leg at top position: knee at (320, 375) and ankle at (368, 408).

When the crank rotates, both legs rotate. The knee positions trace circles around the crank center (360, 430). But the hip is fixed at the body...

This is getting complex. For a clean cartoon animation, I think the simplest approach that still looks good is:

1. Put the entire legs (or at least from mid-thigh down) in the same rotation group as the crank
2. Use short upper-leg stubs from the body to give the illusion of connection
3. The rotating leg parts have their "knee" at an appropriate radius

Let me try a different approach: put each leg in its own rotation animation synchronized with the crank.

Actually, the simplest and most effective approach:

- Create ONE rotation group for crank + both lower legs + both feet
- The lower legs are drawn from a point offset from the crank center to the pedal positions
- This way everything rotates together perfectly

For the right leg lower portion (from knee to foot):
- When at 0° rotation (pedal at bottom), the leg goes from approximately (340, 440) to (350, 455)
- The knee point (340, 440) is at some radius from crank center (360, 430): dx=-20, dy=10, dist≈22

For the left leg lower portion:
- When at 0° rotation (pedal at top), the leg goes from approximately (382, 418) to (370, 405)
- The knee point (382, 418) is at radius from crank center: dx=22, dy=-12, dist≈25

Both will rotate together. The upper legs will be drawn separately as short segments from the hip connecting visually to the knee area.

This won't be perfect (the knee won't perfectly align during rotation), but for a cartoon it should be acceptable since the upper legs are short.

Let me restructure:

In the rotating crank group:
- Crank arms
- Pedals
- Chainring
- Lower right leg + right foot
- Lower left leg + left foot

In the pelican bouncing group:
- Body, head, wings, etc.
- Upper leg stubs (short segments from hip going toward knee area)

The upper leg stubs should be positioned such that at the keyframe positions, they visually connect to the lower legs. Since everything is in motion, slight misalignment will be masked by the bouncing.

Let me code this up properly now.

For the right leg lower portion (in crank rotation group, at angle 0):
The pedal is at approximately (350, 455) relative to crank center. The knee area should be around (330, 435) - that's about 30px radius from crank center.

Right lower leg path: from knee (330, 435) through ankle area to foot at (350, 455)
- knee relative to crank center: (-30, 5)
- pedal relative to crank center: (-10, 25)

Left lower leg path: from knee (385, 420) through ankle to foot at (370, 405)
- knee relative to crank center: (25, -10)
- pedal relative to crank center: (10, -25)

These will rotate together.

For the upper legs (in pelican group):
Right upper leg: from hip (~285, 342) toward knee (~330, 435) - just a short stub
Left upper leg: from hip (~275, 345) toward knee (~385, 420) - just a short stub

OK let me just write the full SVG now. I'll be more careful about the leg connections.

Actually, let me simplify by putting everything (both upper and lower legs) in the rotation group but with the understanding that the upper connection point will rotate too. For a cartoon, this might look fine since the hip area will appear to move slightly with the pedaling motion.

No wait, that would make the body rotate with the crank which looks wrong.

Let me try yet another approach. I'll animate the foot positions individually using animateMotion or just animate the d attribute of the leg paths to follow circular paths.

Actually, the cleanest approach for pure SVG without JavaScript:

1. Crank + pedals + chainring rotate as a group
2. Each leg has the foot placed at the pedal position
3. Each leg's path is animated using the `d` attribute to stretch between the hip and the pedal position

But animating `d` attributes for complex paths is tricky because the number of points must stay the same.

Let me try a different approach: Use `<animate>` on x/y coordinates of the foot and knee points for each leg. The foot follows a circle (same as pedal), and the knee follows an ellipse in between.

For the right foot: traces a circle around (360, 430) with radius ~26 (similar to pedal radius)
For the right knee: traces a smaller offset circle

This could work with nested `<animate>` elements.

Actually, the simplest reliable approach:

Put each complete leg (hip to foot) into its own `<g>` and use `animateTransform` to rotate them around the crank center, BUT offset their phase so the hip end stays roughly positioned.

No, that won't work because rotate moves everything.

OK, I think the BEST approach for an SVG cartoon is:

1. Have the crank + pedals rotate as a group (already done)
2. Draw the lower legs starting FROM the knee area TO the pedal - make these part of the crank rotation group
3. Draw short upper leg stubs from the hip going toward where the knee will be
4. The connection between upper and lower leg will have a slight gap during rotation but it'll be small enough to not matter much at cartoon scale

Let me implement this properly. The key is positioning the lower leg segments correctly within the crank rotation group.

In the crank rotation group (center at 360, 430):
- Right pedal at (350, 455) → offset from center: (-10, 25)
- Left pedal at (370, 405) → offset from center: (10, -25)

Right lower leg: from knee area to right pedal
- Knee in rotation group: approximately at (-30, 10) → (330, 440)
- This represents the knee-to-ankle-to-foot connection

Left lower leg: from knee area to left pedal
- Knee in rotation group: approximately at (28, -8) → (388, 422)

In the pelican group (not rotating):
- Right upper leg stub: from hip (285, 342) toward where right knee will be
- Left upper leg stub: from hip (275, 345) toward where left knee will be

During rotation, the knees rotate around (360, 430), so they'll be at different positions. The upper leg stubs in the pelican group can have a small animated rotation to slightly track the knee position, or just stay mostly static with slight sway.

For simplicity, I'll have the upper legs slightly animated (rotate at hip) to track the general knee area.

Alright, let me just write the code now. I think I've overthought this. The user just wants the feet to connect to the pedals properly.

Here's my plan:
1. Remove legs from the pelican bouncing group
2. In the crank rotation group, add lower legs + feet that connect to the pedals
3. Add upper leg stubs in the pelican group that sway slightly to track the knee movement
4. The upper and lower legs meet at approximately the knee position

Let me write the code.

For the rotating group content:
- Crank arm right: (360,430) to (350,455)
- Crank arm left: (360,430) to (370,405)
- Right pedal: rect at (335, 452)
- Left pedal: rect at (361, 399)

Right lower leg (drawn in rotation group):
- From knee-point (~328, 438) to ankle (~342, 448) to foot on pedal
- Actual path: M328,438 L342,448 L345,452 (simplified)

Left lower leg:
- From knee-point (~390, 420) to ankle (~375, 410) to foot on pedal
- Actual path: M390,420 L375,410 L372,406

Right foot webbing (on pedal):
- Centered around (345, 454)

Left foot webbing (on pedal):
- Centered around (370, 406)

These will all rotate together with the crank!

For the upper legs (in pelican group):
- Right: short segment from hip (285, 342) to approximately (305, 370)
- Left: short segment from hip (275, 345) to approximately (295, 365)

And I'll add slight animation to the upper legs to track the knee.

Actually, I realize for the upper legs I can use a subtle rotation animation. Let me keep it simple and just make the upper legs short enough that the gap with the lower legs is minimal.

Let me write the complete SVG now. I'll keep the overall structure but fix the leg mechanism.

Here's the key change:
- The crank rotation group will include: crank arms, pedals, chainring, lower legs, and feet
- The pelican group will include: body, head, wings, upper legs (short stubs)
- Both groups animate: crank rotates continuously, pelican bounces

This should give a convincing pedaling animation.

One more thing - the upper legs in the pelican group could have a subtle cyclic rotation at the hip to follow the knee position. I'll add a small rotation animation.

Let me now write the complete code. I need to be very precise with coordinates.

Pelican hip position (from body): approximately (285, 340) right side, (275, 345) left side.

Crank center: (360, 430)

Right pedal at bottom of rotation: offset approximately (-10, 25) from crank → (350, 455)
Left pedal at top of rotation: offset approximately (10, -25) from crank → (370, 405)

Right knee (in rotation group): approximately at (-32, 10) from crank → (328, 440)
Left knee (in rotation group): approximately at (30, -12) from crank → (390, 418)

Upper right leg: from hip (285, 342) → toward right knee area (~315, 380)
Upper left leg: from hip (275, 345) → toward left knee area (~310, 370)

Hmm, the knees rotate, so the upper legs need to track them. For simplicity, I'll animate the upper legs' endpoints with a cyclic motion.

Actually, let me simplify even further. I'll animate the upper leg's rotation to track the knee. Since the crank rotates at 1.2s period, the upper leg should sway at the same period.

Let me use `animateTransform` on each upper leg to rotate back and forth at the hip joint.

Right upper leg rotation: the knee moves in a circle around crank center. The angle from hip to knee varies. Let me approximate with a simple oscillation.

OK I'm going to just write the code now. I'll handle the details as I go.

One more thing - the user also mentions the SVG should be in HTML. Let me wrap it properly.

Let me finalize the structure and write the complete SVG.

Actually, one approach that works really well: put the entire leg (from hip to foot) into the crank rotation group. The hip end of the leg will rotate around the crank center, which means it won't stay attached to the body. BUT - if I make the upper body/hip area also part of the rotation, then... no, that's worse.

Alternative: I'll put the leg segments in a group that translates to track the crank, creating a "scissoring" motion. But SVG animateTransform can't easily do this without complex path animations.

Final decision: I'll use the two-part leg approach (upper in pelican group, lower in crank group) with the understanding that there's a slight gap at the knee during rotation. For a cartoon pelican, this is acceptable. The upper legs will have a subtle sway animation.

Let me also make sure the feet webs are properly positioned on the pedals.

Let me write it now.

Right, I need to be more precise. Let me map out all the coordinates.

**Crank rotation group** (rotates around 360, 430):

Right crank arm: from (360,430) to (350,455) → offset (-10, 25), length ~27
Left crank arm: from (360,430) to (370,405) → offset (10, -25), length ~27

Right pedal platform: centered at (350, 455), horizontal rect
Left pedal platform: centered at (370, 405), horizontal rect

Right lower leg:
- Knee joint at approximately (333, 442) relative to crank center → offset (-27, 12)
- Ankle at approximately (342, 450)
- Foot webbing at (350, 455) area

Left lower leg:
- Knee joint at approximately (387, 418) relative to crank center → offset (27, -12)
- Ankle at approximately (378, 410)
- Foot webbing at (370, 405) area

**Pelican group** (bounces):

Right upper leg:
- Hip at (285, 342)
- Goes to approximately (310, 380) - will sway to track knee
- Short segment, maybe 35-40px long

Left upper leg:
- Hip at (275, 345)
- Goes to approximately (300, 370)
- Short segment

During rotation, the knees will be at various positions. The gap between upper leg endpoint and knee will vary but should be small enough.

OK, I'll also make the lower legs look more substantial - use thicker strokes or filled shapes instead of just lines. And add some feather detail.

Let me now write the complete HTML with the fixed SVG.

I also want to make sure:
- The right foot connects to the right pedal
- The left foot connects to the left pedal
- Both feet rotate with the crank
- Upper legs sway in sync

Let me also reconsider whether to put the feet (webbed parts) on the pedals or slightly above them. In real cycling, the ball of the foot is on the pedal. For a bird/pelican, the webbed foot would be on the pedal.

I'll position the webbed feet directly on the pedal platforms.

Here's my final plan for the crank rotation group content:

```
Right side (offset from crank center 360,430):
- Crank arm: line from (0,0) to (-10, 25)
- Pedal: rect at (-18, 22) size 18x7
- Lower leg: path from (-27, 12) to (-10, 22) [knee to ankle]
- Foot web: path at pedal area around (-10, 25)

Left side:
- Crank arm: line from (0,0) to (10, -25)
- Pedal: rect at (1, -28) size 18x7
- Lower leg: path from (27, -12) to (10, -22)
- Foot web: path at pedal area around (10, -25)
```

These are all relative to crank center. When rotated, they'll all move together perfectly.

For the pelican upper legs, I'll use lines from hip points going toward where the knees would be at the midpoint of rotation.

Let me finalize and write the code. I'll aim to make it clean and well-organized.

One more thing about the right foot web: I want the web to sit ON the pedal. So:
- Pedal rect: (-18, 22) to (0, 29) → center around (-9, 25.5)
- Foot web: drawn overlapping the pedal, extending slightly beyond

For the foot web shapes, I'll use a similar webbed-foot path as before, just positioned on the pedal.

OK here we go. Let me write the complete HTML.

Actually, I realize I need to think about what happens visually. The right crank arm goes from center (360,430) down to (350,455). The pedal is a horizontal platform at (350,455). The right foot should rest on this pedal.

But the lower leg connects from the knee to the ankle to the foot. If the foot is at the pedal, the ankle would be slightly above it, and the knee above that.

For the right side:
- Pedal center: (350, 455) → offset (-10, 25) from crank center
- Ankle: (345, 450) → offset (-15, 20)
- Knee: (332, 440) → offset (-28, 10)

For the left side:
- Pedal center: (370, 405) → offset (10, -25)
- Ankle: (375, 410) → offset (15, -20)
- Knee: (388, 420) → offset (28, -10)

These are all within the rotation group. Good.

Now for the upper legs in the pelican group:
- Right hip: (285, 342)
- Right knee area at "neutral" position: the knee rotates, so at some point it'll be at (332, 440). But the hip is at (285, 342). The upper leg goes from hip toward where the knee will be.

The distance from hip (285, 342) to crank center (360, 430) is about sqrt((75)^2 + (88)^2) ≈ 116. The knee is at radius ~30 from crank center. So the knee is about 86-146px from the hip depending on rotation phase.

A short upper leg of maybe 40px from the hip would put its endpoint at around (310, 370) going in the general direction of the crank center. Then the lower leg (from the rotating group) would bridge the remaining ~60-80px gap.

For better visual continuity, I'll make the upper legs about 45-55px long and have them sway with the pedal rhythm.

Right upper leg: from (285, 342) to approximately (315, 375)
- This is about 45px long at roughly 45° angle

Left upper leg: from (275, 345) to approximately (300, 368)
- About 35px long

I'll animate the rotation of these upper legs using animateTransform with the same 1.2s period as the crank.

OK let me finalize everything and write the complete code now. No more planning, time to execute.

Actually, one more thing. For the lower legs, I want them to look like bird legs - thin with knobby knees and webbed feet. I'll use:
- Stroke-based leg with appropriate thickness
- The webbed foot shape at the pedal

For the right lower leg (in rotation group, relative to 360,430):
- Knee joint: circle at (-28, 10) with r=3
- Leg line: from (-28, 10) to (-14, 20)
- Foot web: at (-10, 25)

I'll draw this as a polyline or path.

Alright, truly writing it now.

Let me also think about what the user mentioned: "svg 生成在html中" - they want the SVG inside an HTML wrapper. I'll wrap it in a full HTML document with some basic styling.

Now the complete code with proper leg synchronization:

Key structural changes from previous version:
1. Crank rotation group now includes lower legs and feet
2. Pelican group has upper legs (short stubs from hip)
3. Upper legs have subtle rotation animation synced with crank
4. Feet sit directly on pedals and rotate together
5. All periods are 1.2s for crank/pedal/leg rotation and 0.6s for body bounce

Let me also add a small animation to the upper legs. The upper legs will rotate slightly at the hip joint to track the knee movement. Since the crank makes a full rotation every 1.2s, the angle from hip to knee varies cyclically.

For the right upper leg, I'll animate its rotation from about -5° to +5° at the hip joint, synced with the crank period.

OK NOW writing the code for real.

One small issue: `animateTransform` on the upper legs. I need to set the transform-origin to the hip point. In SVG, `transform-origin` works, but it's not universally supported in all viewers. A safer approach is to use the `from` and `to` angles in `animateTransform` with `type="rotate"`, specifying the rotation center.

For right upper leg rotation at hip (285, 342):
```xml
<animateTransform attributeName="transform" type="rotate"
values="-8 285 342; 8 285 342; -8 285 342"
dur="1.2s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
```

This will make the upper leg sway back and forth, tracking the knee's circular motion.

Now, the phase of this sway should match the crank rotation. When the right pedal is at the bottom (crank angle 0), the right knee is at approximately (-28, 10) relative to crank center, which is roughly to the lower-left of the hip. The upper leg would be extended more downward. When the right pedal is at the top (crank angle 180°), the knee is at (28, -10), which is above and to the right.

Hmm, this is getting complex. Let me just pick reasonable values and it'll look OK for a cartoon.

For the right upper leg:
- At crank 0° (pedal down): knee is at ~(332, 440), which is below and right of hip (285, 342). The leg points more downward.
- At crank 180° (pedal up): knee is at ~(388, 420), which is far right of hip.

Actually, the knee position rotates around the crank center (360, 430). From the hip (285, 342), the knee appears to move in an arc. The upper leg should track this arc.

I'll animate the right upper leg with a rotation that goes from approximately -10° (knee down/forward) to +15° (knee up/back), centered around the hip.

Let me set values like: `-10 285 342; 15 285 342; -10 285 342` with the same 1.2s period.

And for the left upper leg: `-5 275 345; 12 275 345; -5 275 345`

These are approximations but should look decent.

Alright, truly truly writing the code now. I'll produce a clean, well-organized SVG inside an HTML wrapper.

Actually, for the HTML wrapper, I should make it responsive so the SVG scales nicely. I'll use viewBox and set width/height to 100%.

Here's my final structure:

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>骑自行车的鹈鹕 - 循环动画</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f0f0;
}
.container {
max-width: 800px;
width: 100%;
}
svg {
width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body>
<div class="container">
<svg ...>
...
</svg>
</div>
</body>
</html>
```

OK, writing the final SVG now with the complete leg synchronization fix.

Let me also make the ankle/foot connection look good. I'll draw:

Right leg (in crank rotation group):
- Circle at knee (-28, 10) - knobby knee
- Line from knee (-28, 10) to ankle (-14, 20)
- Webbed foot centered at (-10, 25) on the pedal

Left leg (in crank rotation group):
- Circle at knee (28, -10)
- Line from knee (28, -10) to ankle (14, -20)
- Webbed foot centered at (10, -25) on the pedal

The webbed foot shapes from the original were nice. I'll adapt them.

Let me also make sure the pedal rectangles are positioned correctly. The pedal should be a platform where the foot rests.

Right pedal: rect from approximately (-19, 22.5) to (1, 29.5) - width 20, height 7
Left pedal: rect from approximately (0, -28.5) to (20, -21.5) - width 20, height 7

Wait, the pedals in the original were positioned:
- Right: (335, 452) → offset from crank: (-25, 22)
- Left: (361, 399) → offset from crank: (1, -31)

Let me use these positions. The right pedal center is at approximately (-25, 22) and the left at (1, -31).

Hmm, but I said the pedal offsets were (-10, 25) and (10, -25). Let me be consistent. Using the original pedal positions from the static version:

Right pedal platform: rect at (330, 442) → offset (-30, 12) from crank center
Left pedal platform: rect at (376, 406) → offset (16, -24) from crank center

These are the original positions. Let me keep them.

But wait, in the original, the right pedal was at (330, 442) with width 16 and the left at (376, 406) with width 16. These are rotated by 10 degrees.

For the rotation group version, since I'm rotating the whole group, I need the pedals to be at fixed offsets from the crank center. The rotation will handle the angle. So I just need the pedal at a fixed radius from center.

Using the crank arm line: from (360,430) to (348,448) - this is offset (-12, 18) from center.

Actually, let me just use the crank arm endpoints from the original:
- Right crank arm: (360,430) to (348,448) → offset (-12, 18), length ≈ 21.6
- Left crank arm: (360,430) to (372,412) → offset (12, -18), length ≈ 21.6

Pedal at end of right crank: centered around (348, 448)
Pedal at end of left crank: centered around (372, 412)

OK in the rotation group (offsets from 360,430):
- Right pedal: centered at (-12, 18)
- Left pedal: centered at (12, -18)

Right foot on right pedal at (-12, 18):
- Ankle: (-16, 14)
- Knee: (-30, 5)
- Foot webbing centered at (-12, 18)

Left foot on left pedal at (12, -18):
- Ankle: (16, -14)
- Knee: (30, -5)
- Foot webbing centered at (12, -18)

Upper legs (in pelican group):
- Right: from hip (~285, 342) toward knee area → endpoint at approximately (305, 370)
- This is ~35px at roughly 55° angle from horizontal
- Left: from hip (~275, 345) toward knee area → endpoint at approximately (295, 362)
- This is ~26px at roughly 40° angle

The rotating knees at (-30, 5) offset from crank, so actual knee position at rotation angle 0:
- Right knee: (360-30, 430+5) = (330, 435)
- Left knee: (360+30, 430-5) = (390, 425)

Right hip to right knee distance at angle 0: from (285, 342) to (330, 435) ≈ sqrt(45² + 93²) ≈ 103px
Upper leg is ~35px, lower leg is ~sqrt(14²+13²) ≈ 19px from knee to ankle. Plus some for foot.

The gap between upper leg endpoint and knee: 103 - 35 = 68px. But the lower leg is only about 19px + foot. So there's a big gap!

I need to fix this. Let me extend the lower leg. The lower leg should cover from the knee to the ankle to the foot.

Right lower leg: knee at (-28, 8) to ankle at (-16, 14) to foot at (-12, 18)
- This is only about 15px visually

The upper leg needs to be longer. Let me make it about 75-85px.

Right upper leg: from hip (285, 342) going toward (318, 390) - about 60px
The knee is at (330, 435) when at angle 0. Upper leg endpoint at (318, 390) to knee at (330, 435) is about 47px gap. Lower leg should bridge this.

Hmm, let me adjust. Let me make the lower leg longer:

Right lower leg: knee at (-32, 0) to ankle at (-18, 14) to foot at (-12, 18)
- Knee to ankle: sqrt(14² + 14²) ≈ 20px
- More substantial

And for upper leg, extend to about 70px from hip: (285,342) to (318,400).
Gap from (318,400) to knee (328,430): about 32px.

This is better. The upper leg is 70px, the gap is 32px, and the lower leg bridges the gap + goes to the pedal.

Actually, wait. The lower leg IS in the rotation group. So when the crank rotates, the knee position moves. The upper leg endpoint is fixed (or slightly animated). During rotation, the knee will sometimes be closer and sometimes farther from the upper leg endpoint.

For the animation to look OK, the upper leg needs to be long enough that the gap is small at all rotation phases.

The knee traces a circle of radius ~32 around the crank center (360, 430). The upper leg endpoint is at approximately (318, 400). The distance from the upper leg endpoint to the crank center is sqrt((360-318)² + (430-400)²) = sqrt(42² + 30²) = sqrt(1764 + 900) = sqrt(2664) ≈ 51.6.

The knee is at radius 32 from crank center, so the distance from upper leg endpoint to knee ranges from |51.6 - 32| = 19.6 to 51.6 + 32 = 83.6.

So the gap between upper leg endpoint and knee varies from about 20px to 84px during rotation. If I make the upper leg 65px long and the knee is at the lower leg group, the visual connection will fluctuate. This is inherent to the two-part approach.

For the best visual result, I think I should:
1. Make upper legs long enough (maybe 55-65px)
2. Make lower legs visible (20-30px)
3. Accept that during some phases there's a gap
4. The upper leg sway animation helps mask this

OR: I can take a completely different approach. Instead of upper/lower leg split, I can animate the entire leg's `d` attribute.

For the right leg: the path goes from hip (285, 342) to knee to ankle to foot on pedal. The foot position is at the pedal, which rotates. I can animate the knee position between two extremes.

This is possible with SVG `<animate>` on the `d` attribute, but it requires the path structure to remain the same (same number of points, just different coordinates).

Right leg path: M285,342 L{kneeX},{kneeY} L{ankleX},{ankleY} L{footX},{footY}

The foot (footX, footY) = pedal position = (348, 448) at angle 0, and rotates.
The knee and ankle positions also need to rotate.

Since I can't easily animate all these points to follow a rotation, let me go back to the two-part approach and just make it work well enough.

Let me make the upper legs longer - 75px from hip, going toward the crank area. And I'll make the lower legs start from a point that's closer to the upper leg endpoint.

Right upper leg: (285, 342) → (325, 393) [75px, angle ~52°]
Left upper leg: (275, 345) → (310, 385) [55px, angle ~49°]

Right lower leg in rotation group: knee at (-28, -2) → ankle at (-18, 12) → foot at (-12, 18)
At angle 0: knee = (332, 428), ankle = (342, 442), foot at pedal (348, 448)

Upper leg endpoint (325, 393) to knee (332, 428): gap of about 36px. Lower leg visible length is about 20px from knee to ankle. So total knee-to-ankle-to-foot is about 28px. The knee is 36px from upper leg endpoint. This gives some visual continuity.

During rotation, the gap varies. At worst (knee farthest from upper leg endpoint), the gap is about 84px. At best (knee closest), about 20px. The animation will show the leg "stretching" somewhat.

For a cartoon, this is OK, especially with the upper leg swaying.

You know what, I think I'm massively overthinking this. Let me just go with a practical implementation. The key fix is:
1. Lower legs + feet in crank rotation group
2. Upper legs in pelican group with sway
3. Accept minor visual gaps

Let me write the final code now. No more analysis.

Hmm, actually one more approach I want to consider: put the ENTIRE leg in the crank rotation group but offset. If I put the leg starting point near the hip but in the rotation group, the hip end will rotate too. BUT if I make the leg long enough that the hip end rotation is small relative to the hip position...

No, this won't work because the hip end would rotate in a circle around the crank.

OK FINAL approach. I'm going to use the two-part leg and it'll look fine for a cartoon. Let me write the code.

Let me also reconsider whether the pelican's right foot is on the right pedal and left foot on left pedal. Yes, in cycling:
- Right foot on right pedal (closer to viewer in side view)
- Left foot on left pedal (farther from viewer)

In our side view, both feet would be visible with the right foot slightly in front. For simplicity, I'll draw:
- Right leg: from body to right pedal (lower, more forward)
- Left leg: from body to left pedal (higher, more backward)

This is what I've been planning. Good.

Now, writing the code. For real this time.Now I understand the context better - this is a continuation of the pelican SVG work. The user wants me to fix the foot synchronization issue. Let me produce the corrected SVG with proper leg/foot connection to the pedals.

The key fix: the lower legs and feet need to be in the same rotation group as the crank/pedals so they rotate together. The upper legs stay in the pelican body group with a sway animation.

Let me write the complete HTML with the fixed SVG now.