鹈鹕骑自行车

The user wants a pelican riding a bicycle in SVG animation, single HTML file. Let me create an appealing animated SVG with a pelican on a bike, rolling wheels, moving legs, and background elements like clouds and ground. I'll design it as follows: - Background: sky, sun, drifting clouds, ground line - Bicycle: two wheels (spokes rotating), frame, handlebars, pedals - Pelican: body, neck, big beak and pouch, flapping wings, legs pedaling The pedaling animation: I'll attach legs to the rotating crank/pedals. Simple approach: animate the legs with rotation around the crank center, and place the feet on the pedals that rotate via animateTransform. Let me set up coordinates. viewBox 0 0 800 500. Bike: front wheel center (560, 380), rear wheel center (280, 380), radius 60. Crank center (420, 380). Frame: rear hub to seat post (350, 280), from crank to seat, from crank to head tube (500, 290), head tube to front hub. Pelican sits on seat (350, 280). Body above the seat, neck going up, head with big beak facing forward. Pedal crank: a rotating group centered at (420,380), with two pedals at radius 30. Legs: thighs from the pelican's hip (near the body ~ (380, 300)) to the knee, and to the foot on the pedal. Making the legs follow the pedals is complex. Simpler: animate the legs as simple shapes that rotate/pivot to roughly follow along. A common trick: use two legs and animate them with rotate around the hip, making the feet appear to be on the pedals. Not perfect but visually acceptable. Alternative: use SMIL's to make the feet follow a circular path matching the pedals, and have the legs follow via morphing? Too complex. I'll do an approximate rotation animation: rotate the leg group around the hip pivot with values that roughly sync with the pedals. Actually a decent trick: draw each leg as two segments; animate the entire leg group around the hip pivot with the same angular velocity as the crank but adjusted. Foot position: pedals go around (420,380) with radius ~32. Hip is (390, 310). When the foot is at the front-bottom of the pedal... honestly, a simple rotation of the leg shape looks pretty good as a cartoon. Let me do it this way: leg group (hip 395,315). Leg drawn as a path from hip to foot near the pedal position at some angle. AnimateTransform rotate around (395,315), values from -25 to 25 over half the crank period, with two legs at 180° out of phase. The feet are small orange feet. Wheel spokes: animateTransform rotate 360 around wheel center, duration ~1s. Ground: moving dashed line to convey motion. Scrolling clouds. Body bobbing up and down: small translateY animation. Let me write the code. Wheel: group with tire circle (stroke 8, fill none), 6 spokes (lines), hub circle. Rotate the group. Frame color: red. Pelican: white body ellipse at (360, 285), slightly rotated. Neck: curve up from body to head (430, 180). Head circle. Beak: big orange triangle-like path with the pouch. Wings: shape on the back, rotate slightly to flap. Eye dot. Legs: yellow-orange. Hip under the body (390, 315). Frame geometry: - Rear hub (280, 380) - Front hub (560, 380) - Crank (420, 385) - Seat tube: from (420,385) up to (360, 290)? The seat tube should go up-and-back to the saddle. Saddle at (355, 285). - Top tube: from seat (360, 300) to head (505, 300). - Down tube: from head (505, 300) to crank (420, 385). - Seat stay: rear hub (280,380) to seat (360, 300). - Chain stay: rear hub to crank (420, 385). - Fork: head (505, 300) to front hub (560, 380). - Handlebar: up from head (505,300) to (520, 265), then bar curves to (540, 270). - Saddle: small dark ellipse at (352, 278). Pelican sits on the saddle at (352, 278): the bottom of the body around (360, 270). Body ellipse center (365, 250), rx 55, ry 35, rotated -10. Neck: curve path from (400, 235) to head (455, 160). Head circle at (458, 155) with r 20. Beak: path from head going forward: upper beak from (465, 145) to (545, 160), pouch curving down back to (468, 175). The eye at (462, 148). Wings: path on top of the body, rotated at the shoulder (370, 235), flap values 0; -20; 0 dur 0.5s? Actually the pelican's wings are folded, so just a subtle flap. Hands: neck... wait, hands need to reach the handlebar at (520, 265). In pelicans, the wings are the arms. I could draw one wing reaching from the body (400, 245) to the handlebar (515, 262). That makes it look like the pelican is gripping the handlebar with a wing. Cute. The other wing flaps on the back. Body bob: animateTransform translate 0,0; 0,4; 0,0 dur 0.5s. Crank: group rotate 360 dur 1s around (420,385). Pedal: rect at (420, 385+34)=(420, 419) and (420, 351). Small crank circle r 16. Leg animation: front leg group: hip (395, 300). Foot at (420, 419) (when pedal is at the bottom)? Hip-to-foot distance = sqrt(25² + 119²) ≈ 122. Leg path: hip (395,300) → knee (430, 360) → foot (418, 415). Rotate ±? Crank pedal angle 0° = bottom. The other pedal is at the top (420, 351). When the foot is at the top, distance from hip (395,300) to (420,351): sqrt(25²+51²)=57 — the leg would be quite bent. A rotating rigid leg can't cover both; use a rotate with values and scale? Let me use two keyframed rotations to approximate: leg values: 0° (foot at bottom) → 180° of crank... if the leg just rotates by the crank's angle, the foot at the top ends up at the wrong distance. Simplest and most convincing approach: animate the leg path 'd' between two states: the foot-bottom state and the foot-top state, with the knee moving accordingly, dur 0.5s (half of the crank 1s), repeatCount indefinite, alternating direction with the second leg offset by 0.25s? Use on leg 1, and values="B;A;B" on leg 2. That way the foot matches the pedal top/bottom, and the knees bend. Good enough. Leg A (foot at bottom, pedal at (420,419)): hip (393, 298), knee (432, 355), foot (420, 415). Path: M393,298 Q432,340 424,378 L420,415 — let me keep it simple: M393,298 L432,355 L420,415, thick stroke, rounded join, plus a foot rect at the end. Leg B (foot at top, pedal at (420,351)): hip (393,298), knee (430,325), foot (418,348). Path M393,298 L430,325 L418,348. Foot: a small orange polygon that gets drawn with the leg path? I could use a separate foot and animate its position too... Simpler: include the foot in the path? Draw the foot as a separate element and animate its transform translate between (420,415) and (418,348) with the same timing. Or bake the foot into the path as a short stroke at the end. I'll make the foot a short line segment in the path: after the ankle, L(435,417), so it looks like a foot. Let's do this: Foot bottom: M393,298 L434,352 L421,414 L440,414 (foot is a horizontal line in the forward direction? The pedal points forward). Hmm, foot forward: L(438,417). Foot top: M393,298 L432,322 L417,348 L434,349. Stroke: #F5A623, stroke-width 12, linecap round, fill none. Crank rotation and legs: at t=0 pedal A is at the bottom → leg A has the foot at the bottom. Leg A animates d values A;B;A over 1s, crank rotates 360 in 1s. When the crank is 180°, pedal A is at the top → leg A's foot is at the top. Consistent. Pedal on crank: as the crank rotates, the pedal stays horizontal? Real pedals stay roughly horizontal. For simplicity, rotate the pedal with the crank (pedal = a small line segment perpendicular to the crank arm, rotating along with it). That's fine. Chain: ellipse/line from crank to the rear hub's sprocket: two lines forming a loop between circle r16 at (420,385) and r10 at (280,380). Animate dashoffset to suggest motion. Path M420,369 L280,370 ... Simpler: a path forming an outline and animate stroke-dasharray, offset from 0 to -20 over 0.2s. Background: sun with slowly rotating rays, clouds drifting via translate animation, ground with scrolling stripes: group of dashes, animate x from 0 to -100, dur 0.5s, repeat, width covering 2x. Slight bounce on the whole bike? Skip, keep it simple; maybe a subtle bob on the pelican. Also a forward motion feel: scroll the ground, clouds move left. The title text is "鹈鹕骑自行车" as an option. Let me write the HTML. Spokes: 6 lines through the center at 0,30,60...deg, use a with a repeated with rotate transforms, and an animateTransform rotate 360 around the center dur 1s on the group. Let me generate the code. Wheel template: spokes: lines from (0,-58) to (0,58) rotated by 0,30,60,90,120,150 Spoke stroke #999 width 3. Crank group: bottom pedal dur 0.8s to sync with the wheels; leg animation should be dur 0.8s to match. Legs values A;B;A dur 0.8s. Timing: crank 0→360: pedal bottom at t=0, top at t=0.4s. Leg A: A at 0, B at 0.4 (B;A? values="A;B;A" with keyTimes default 0,0.5,1) → B at 0.4s. Good. Leg B values "B;A;B". Clouds: two cloud groups at different y, animateTransform translate from 0 to -900? Simpler: each cloud animates translate from 900 to -200 over different durations, repeatCount indefinite. Use on the cloud group defined near x=0. Ground: a rect at y=440..500 green? Ground line at y=438 (wheel radius 58 + tire ~4.5 → wheel bottom ~380+62=442). Set ground top at 442. Wheel center y=380, tire outer radius 58+4.5=62.5 → bottom 442.5. Good, ground at 442. Ground stripes: group of small dark lines along y=442, or a scrolling dashed line: animate stroke-dashoffset from 0 to -70 over 0.35s? Actually to make it look like it's moving to the left, the dashoffset increases... animate stroke-dashoffset from 0 to 70? Negative offset advances dashes in the path direction. To scroll left, offset increases? Anyway — animate 0→70 with dur 0.5s, and also add scrolling bushes/grass tufts: a group of a few tufts spanning 800 width, duplicated offset by 800, animate translate from 0 to -800 dur 1.2s. Let me do a scrolling grass tuft pattern: define a group of tufts spaced 160px, 8 of them (1280 wide), animate translate from 0→-160 dur 0.4s repeat. Sun: circle in the top-right with rays, slow rotate. Pelican's flapping wing: subtle. Hands/wing to the handlebar: a path from the body (410,240) with Q to (505,262), an orange stroke width 12, a foot-like circle at the handlebar end. Drawn in front of the frame? The handlebar area is (510, 262). Frame drawing: - Rear frame: path M280,380 L356,292 L505,300? Let me define the points: S = seat top (358, 290) H = head (508, 300) C = crank (420, 385) R = (280,380), F = (560,380) Lines: R→S (seat stay), S→C (seat tube), C→H (down tube), S→H (top tube), R→C (chain stay), H→F (fork), also extend the head tube slightly upward: H (508,300) to (520,268), stem/bar. Stroke #E74C3C width 7, rounded. Saddle: rotated ellipse? Simple: path M340,286 Q358,276 378,286 stroke width 8 #222? Use a rect: x=338,y=282,w=40,h=8,rx=4 fill #222. Seat post: line from S (358,290) to (356,296)? The seat tube already goes to (358,290), the saddle sits on top of it. Saddle rect y 280-288. OK. Pelican body: ellipse cx=372 cy=245 rx=52 ry=34 fill white, rotated? transform rotate(-12 372 245). A shadow ellipse below. Tail feathers: small triangles behind: path M322,262 L300,275 L318,250? Add 2 small white tips of tail pointing down-left. Neck: path M400,230 C420,215 440,200 452,175 stroke white width 16? The neck as a thick stroke: M398,235 Q435,205 452,172, stroke #fff width 15, linecap round. Head circle at (455,162) r19 fill #fff. Beak: top: path M468,152 L552,166 L468,168 Z fill #F5A623. Pouch: M468,168 Q510,205 468,182? Let me do this: pouch path M470,166 Q520,215 470,186 Z fill #F08C1A (a larger curve below the beak). Actually a classic pelican: the beak droops down. Path for the whole beak: M466,150 C510,150 555,162 558,168 C555,180 520,205 495,192 C482,185 472,178 466,172 Z fill orange. Simpler: two shapes: Upper beak: M466,150 Q520,152 560,168 Q520,170 468,170 Z Pouch: M468,170 Q500,210 556,170 Q510,185 468,170 Z hmm. Let me just do this: messy. Plan: - Upper beak: M466,148 L562,167 L466,173 Z fill #F7A827 - Pouch: M466,173 L562,167 Q540,205 492,196 Q474,188 466,173 Z fill #E88A1E Eye: circle (458,152) r4 #333, white highlight. Wing (flapping, back of body): path M370,238 Q330,225 305,250 Q335,262 370,250 Z fill #E8E8E8, animateTransform rotate around (370,245): values 0;-14;0 dur 0.6s. Front wing/arm to the handlebar: path M405,245 Q460,255 505,264 stroke #F2F2F2 width 13 round; hand: circle (507,264) r7 #F2F2F2. This is the wing. OK. Subtle body bob: wrap the pelican in a g, animateTransform translate 0,0;0,3;0,0 dur 0.8s. Order: draw the far leg (leg B, behind the body, lighter color?) behind the bike? The legs are in front of the crank/frame. Draw both legs after the frame, maybe one in front. Keep both the same color. Draw order: sky, sun, clouds, ground, chain, frame, wheels (wheels behind the frame? frame over the wheels), crank, legs, saddle, pelican. The title text is optional: at the top "🦩 鹈鹕骑自行车". Let me write the final HTML with an inline svg, width 100%. Chain: circle r11 at (280,380) as the rear sprocket, chain lines: M420,371 L280,369 M420,399 L280,391, stroke #555 width 3, dashed 8 6, animate dashoffset. Let me finalize the numbers and write it out. ```html 鹈鹕骑自行车 ``` 把这段代码保存为 `.html` 文件用浏览器打开即可看到动画效果：鹈鹕坐在红色自行车上蹬着踏板，车轮和辐条旋转，链条带动、后腿与曲柄同步、翅膀扇动、身体轻微起伏，同时草地和云朵向后滚动，营造出向前骑行的感觉。

鹈鹕骑自行车svg动画，单个html