Walking Duck in the Park

The user wants an SVG animation of a walking duck with a park background. Let me create a pretty, detailed SVG with animations. Let me design: - Sky with gradient, clouds - Sun - Distant hills/trees - Grass with flowers - A path - A duck that walks across with leg animations, wing bob, head bob I'll make the duck walk along a path using a transform animation (translateX). Legs swing with rotation animations. Let me build carefully. SVG structure: ```svg ``` Duck design: Mallard-ish or cute yellow duck? A pretty mallard with green head... but a "walking duck" cartoon — maybe a cute yellow duckling is more charming. Let's do a classic cute duck: white/cream body, orange beak and feet, orange bill. Actually a mallard male is prettier: iridescent green head, white neck ring, chestnut breast, gray body, orange feet. Let's do a stylized mallard — very pretty. Hmm, but walking animation with legs is easier with visible orange legs. Mallard works. Actually let me make it cute cartoon style but pretty: soft cream/white body with warm shading, orange beak and feet, and a little blush. Let's do a mallard-ish? I'll go with a cute white/cream duck with orange beak — reads clearly against green park. Let me do: soft white-cream body, light yellow belly, orange beak/feet, black eye with highlight, small blush. Duck local coordinates: draw duck facing right at origin roughly at feet level. Let me set up duck coordinate system: origin at (0,0) = ground contact point, duck facing +x (right). Duck body: ellipse center (-5, -45), rx 40, ry 30 — body. Tail at left. Head at right/up. Actually let's define: - Body ellipse: cx=0, cy=-48, rx=42, ry=32 - Tail: a pointed shape at left rear (-42, -58) - Neck+head: head circle at (38, -95) r=20; neck connecting. - Beak: at (56, -92), pointing right, orange. - Eye: (44, -100) r=4. - Wing: ellipse on body, cx=-2, cy=-50, rx=28, ry=20, rotated slightly. - Legs: from body bottom (x=-8 and x=10, y=-22) down to feet at y=0. - Leg: line/rect from hip to foot, then foot webbed shape. Leg swing: rotate about hip point. For leg animation use — SVG transform-origin works in CSS with `transform-box: fill-box` or specifying absolute coordinates via `transform-origin: 10px -22px`? For SVG elements, CSS transform-origin default is `0 0`? Actually default transform-origin for SVG in CSS is `0 0`... Let me recall: In SVG, the `transform-origin` initial value is `0 0` for SVG elements per SVG2, and `transform-box` default is `view-box`. So `transform-origin: 0 0` refers to the origin of the SVG viewBox coordinate system. So if I set `transform-origin: Xpx Ypx` it will be in the SVG user coordinate system (view-box), which is absolute SVG coordinates, not local duck coords. That's tricky since duck moves. Better approach: use SVG's native `transform` attribute with SMIL `` which supports `type="rotate"` with center relative to the element's own user space (local coordinates). SMIL animateTransform rotate about a point in the element's local coordinate system — that works regardless of parent transforms. SMIL is supported in all major browsers except IE. Chrome, Firefox, Safari support SMIL animations. Good. So use SMIL for leg rotations. And use CSS or SMIL for walking translation. Actually for nested groups, each group's local coordinate system... SMIL rotate values are in the element's user space (the coordinate system established by its parent's transform... actually the element's user coordinate system includes its own transform attribute? For animateTransform, the values are interpreted in the user space in effect for the element — that includes the element's own transform being replaced. Hmm. Simpler: structure duck as: ``` ... parts, each in duck local coords ... leg shape in duck local coords ``` The leg group's transform attribute gets animated; the rotate values are in the coordinate system established by parent (duck local), so rotating about (hipX, hipY) in duck coords. That should be correct — SMIL animateTransform values are in the user space of the element which is the coordinate system in effect for the element before applying its own transform. I believe that's right: "the user coordinate system in place at the time when the animation begins" i.e., the parent's coordinate system. Actually spec says: "the values are in the user coordinate system in place at the time when the animation is first applied (i.e., the user coordinate system for the element referencing the animation)". The element's user coordinate system typically means after parent transforms but before the element's own transform... Hmm, for a transformable element, its transform establishes a new coordinate system for its children; the element itself lives in parent's system. So user coordinate system for the element = parent's system. Yes, rotating about hip point in duck-local coords works. But wait — the duck itself has an animated transform (translate). Does that affect? The leg's user space is duck-local which includes the translate; but the rotate center coordinates are expressed in that user space, which is duck-local (0,0 at duck origin). Fine, it follows. Hmm, but there's subtlety: when duck group transform is animated via SMIL translate, the leg's user coordinate system changes... but coordinates are relative to duck's local frame, so still fine. Alternative safer: use CSS animations with `transform-box: fill-box; transform-origin: ...` — messy. SMIL is fine. Walk: animate duck group translate from x=-100 to x=900 over e.g. 14s, repeat. Also add slight vertical bob. Actually, to keep duck centered and have background parallax, could animate background. But simpler: duck walks across the scene. Nice. Let's also make the duck walk along the path which is horizontal — fine. Let's add: head bobbing slightly (rotate head group), wing flap slight, tail wiggle. Eye blink: animate ry of eye or a lid rect. Let me write the code. Scene composition (viewBox 0 0 900 520): Sky: rect 0,0,900,300 with linearGradient (#aee3ff → #e8f8ff → #fff7d6). Sun: circle at (740,70) r=40 fill radial gradient yellow, with soft glow circle, plus rotating rays (slow rotate). Clouds: white puffy groups, animated translateX drifting with different speeds (use animateTransform translate values from -200 to 1000). Far hills: green polygons with haze (lighter green). Trees: several at various sizes on horizon. Mid grass: big green area. Path: a curved/diagonal sandy path — but duck walks horizontally. Make path horizontal band with rounded edges, maybe slightly diagonal would break the walk. Keep a horizontal path from x 0 to 900 at y ~ 400-445, with pebbles. Actually make the duck walk on the path at y=430 or so. Ground line for feet y = 430. Let's define: path top edge y=395, bottom y=450. Duck feet at y=430 (on the path). Foreground: grass blades and flowers at bottom in front of path (y 450-520), plus a foreground bush on left. Water/pond? Could add a pond on right with ripples and a lily pad — pretty. Might complicate. Keep maybe small pond behind path? Skip; add flowers, butterflies. Let's include: butterflies animated along paths, birds in sky (small "v" shapes drifting), flowers with swaying animation. Flowers sway: rotate about base with SMIL animateTransform. Grass sway: similar. Let's write it. Colors: - sky top #7ec8f7, mid #bfe8ff, bottom #fdf3d0 - sun #ffd93d / glow - hills far #a8d8a0, hills near #7fc47f - trees: foliage gradients #4caf50 → #2e7d32; dark #1b5e20 - grass: #7ec850 → #5aa83c - path: #e8d7a8 → #d9c48f, with darker edge - flowers: white/pink/red/purple - duck: body #fffaf0 with shading #f0e2c8, wing #f7ecd8, beak #ff9f1c, feet #ff8c1a, cheek blush #ffb3b3, eye #2b2b2b. Let me draw the duck more carefully. Duck facing right, ground at y=0 (feet). Legs: hips at (-12, -30) and (8, -28) roughly (under body). Body ellipse cy=-48 ry=32 → bottom at y=-16. So hips at y=-20. Leg: from hip (hx, hy) down: thigh then shin to foot at (hx, -2). Total length ~20-28. Let's make legs a bit longer for walking: hip at y=-26, foot at y=0 → 26px leg. Body bottom at -16, so hip inside body. Good. Leg path: `` in leg group coordinates where leg group is translated to hip? Simpler: define leg group at origin hip via translate then rotate. But animateTransform on same element — can't have two transform attributes animated and static on same element. Solution: nested groups: ``` foot ``` Good. Foot: webbed foot shape pointing right: `M0,0 L0,0` hmm. Foot at bottom of leg: a triangle-ish webbed foot: `M -6,0 L 14,0 L 10,4 L -4,4 Z` plus toes. Let's make foot: path `M0 0 q 2 6 0 8` hmm. Let me define foot in leg group: leg goes from (0,0) down to (0,24). Foot drawn at (0,24): shape pointing forward (right): `M-4,24 L12,20 L16,24 L12,27 L-5,27 Z` — a wedge. Better: webbed foot: ``` ``` Hmm let's simplify: foot = rounded triangle: `M0,22 C 8,20 16,22 16,25 C 16,28 8,28 0,28 Z` plus small toes lines. Also add a little heel spur. Fine. Leg color: #ff9d2e with stroke slightly darker. Leg animation (walking cycle): rotate values like `25,0,-25,0,25` over 0.6s? Walking cycle dur ~0.7s. Left leg: values "0:20:-10:0:20"? A full cycle: forward swing then back swing then return. For a 2-leg walk: front leg rotate from -30 to +30 while back does opposite (phase shifted by half period). Use: values="-25,0,-15,20,25,0,-25" hmm. Simple: values="-25,25,-25" with keyTimes "0;0.5;1" — that's a triangle wave: forward, back, forward. That reads fine as stepping. Actually with `keySplines` easing to smooth. Use calcMode="spline" keyTimes="0;0.5;1" keySplines="0.4 0 0.6 1;0.4 0 0.6 1". Leg front: values="-30,25,-30". Back leg: values="25,-30,25" (phase opposite). Add slight offset. Also legs should lift: rotate combined with a small translate up during swing — could add a second animateTransform on nested group: translate y values "0,-4,0". Let's nest: ``` ``` That works. Also need legs to be behind body for the far leg and in front for near leg. Far leg darker (shadowed) and drawn first, near leg drawn after body. Duck body parts order: 1. far leg (behind) 2. tail 3. body 4. wing 5. neck+head+beak+eye 6. near leg (in front) Hmm, near leg should be in front of body but body bottom... fine. Actually feet on ground; near leg in front of body looks OK. Body: ellipse plus tail. Tail: path `M-38,-62 L-58,-70 L-52,-52 L-38,-48 Z` — a pointed tail up-left. With feather lines. Body ellipse: cx=-5, cy=-50, rx=44, ry=33. Bottom at y=-17. Hips at (-10,-24) and (8,-22)? Let's put hips at (-8,-24) [back leg] and (12,-22) [front leg]. Hmm front leg near. Neck: from body front-top (x=25,y=-62) up to head. Draw neck as a path with thickness: `M18,-70 C 20,-92 30,-105 44,-108 L 52,-95 C 40,-88 34,-78 34,-62 Z` roughly. Head: circle cx=48, cy=-108, r=17. Beak: pointing right from head: `M62,-106 C 76,-108 82,-104 82,-101 C 82,-98 74,-96 62,-98 Z` upper mandible with a slight curve; plus lower line. Let's make beak: ``` ``` Nostril dot at (68,-107). Eye: circle at (54,-114) r=5 fill #2c2c3a, highlight circle r=1.8 at (56,-116) white. Blink: eyelid path? Use an animated ellipse ry: eye as ellipse rx=5 ry=5 animated ry from 5→0.5→5 — that squishes the eye which looks like a blink. Use `` plus highlight blink too. Highlight should hide too — make highlight a group with same... simpler: put eye white-free; make eye group and animate a mask? Let's just animate the whole eye ellipse ry and also the highlight ry. Highlight is inside eye; if eye squishes, highlight stays. Put highlight in a and animate its transform scale... Simplest: eye = ellipse (dark) + highlight circle; apply animateTransform scale on a group containing both, with transform-origin... use nested translate groups: translate to eye center, then scale animated (scale about center), then draw eye at 0,0 r=5, highlight at (2,-2). ``` -- hmm scale values need "sx sy" ``` scale values "1 1;1 0.15;1 1". With keyTimes and spline. But scale about origin (0,0) which is eye center after translate. Good. But the group has no transform attribute initially — SMIL animateTransform will add it. Since the parent provides translate, fine. Hmm: does animateTransform without a base transform work? Yes, it sets transform. Wing: ellipse cx=-6, cy=-52, rx=30, ry=21, rotate -10deg, fill lighter cream with stroke; plus feather lines. Wing slight flap: animate rotate about its front pivot (20,-60) between -4 and 6 degrees. Wing group: translate(20,-60) then rotate animated. Head bob: whole upper (neck+head+beak+eye) group animated translate y: 0,-2,0 synchronized with walk. Could nest inside a group with animateTransform translate values "0 0;0 -2;0 0". Body bob: whole duck translate y small: 0,-3,0 in addition to walk x. But the duck group already has animated translate for walk (x). Need both: outer group walk-x, inner group bob-y. Walk: `` on outer group with transform attribute? Give initial transform="-150 430"? animateTransform replaces it. Provide attributeName transform on a group that has no other transform... Actually if I put `transform="translate(-150,430)"` and animateTransform, SMIL overrides during animation from the start (it's active from begin). Fine. Wait: `values="-150 430;1050 430"` — translate values separated by space or comma, and list separator ";". OK. Then duck local coords: y=0 at ground. So duck group at translate(x, 430) where 430 is ground level. Then duck drawn with negative y above ground. Bob group inside: `` — need to sync with legs (0.7s cycle). Use same dur. Also slight forward lean: rotate -3deg static. Background parallax: since duck walks across, background static is fine. But add drifting clouds, swaying trees, butterflies flying. Also add shadow ellipse under duck, animated with bob (scale slightly). Let's add a shadow: ellipse cx=0 cy=2 rx=40 ry=8 fill rgba black opacity .18, animated scale with bob? Put shadow in a group with its own scale animation inverse. Simpler: static shadow with slight opacity animate. I'll add scale animation on shadow group: values "1 1;0.9 1;1 1". Now background details. Hills: ``` ``` Hmm, let's do two hill layers. Layer A (far, pale): path from y~300. Layer B (mid, medium green) y~330. Then tree line at y≈340-380. Grass ground: rect from y=340 to 520 with gradient green. Actually let's define: - Sky: 0..330 - Far hills: around 270-340 - Mid ground/trees: 330..400 area with trees - Lawn grass: 350..520 - Path: y 395..455 - Foreground grass/flowers: 455..520 Duck ground y=430 (on path). Duck height ~120 (from y=0 to y=-125). So duck occupies 305..430. Its head at ~305 overlaps trees — fine, duck is big/cute. Hmm the duck is quite large relative to 520 height (125 tall). That's fine, it's the subject. Maybe scale duck to 0.85 → 106 tall. Let's scale: outer group translate(x,430) scale(0.9). But then translate and scale on same group with SMIL: animateTransform values can't mix. Nest: outer translate (walk), inner scale(0.9)? then bob inner-inner. OK: - g#walk: animateTransform translate x,y - g: transform="scale(0.9)" — but then ground y stays 0 * 0.9 = 0. Fine. - g: animateTransform translate bob - g: transform="rotate(-2)" lean? but rotate about origin which is feet — leaning rotate about feet would shift feet. Use small rotate -2 about (0,0): feet stay at origin, body tilts back slightly. Actually duck walking... keep 0. - shadow - legs, body, etc. Now trees: draw a function-like repeated tree group. Trees: trunk (brown rounded rect) + foliage (3 overlapping circles) with gradient. Tree at (x, baseY, scale). Let's place trees at x=60,150,700,820, 300 (behind), 560. Keep center area clearer for the duck? Duck passes through, that's fine. Butterflies: small group with two wings flapping, animated along a path. Birds: "M0,0 q5,-5 10,0 q5,-5 10,0" stroke dark, drifting. Flowers: group with stem, leaves, petals (5 circles), center. Swaying via rotate about base. Let me write flowers at several x positions, different colors, on both sides of path. Grass blades: path `M0,0 C -2,-10 -4,-16 -8,-22` stroke green width 3, sway. Let's write the final SVG. I'll be careful with IDs unique. Also add vignette? Maybe a subtle top-left light. Add sun rays rotating slowly: group with 8 thin triangles rotating over 60s. Clouds: cloud shape: ``. Let me write it now. Full code: ```html Walking Duck in the Park ``` Note: CSS animations inside SVG also fine. I'll mostly use SMIL for reliability. Let me write defs: ```xml ... orange ``` Filters can be slow but fine. Careful: filter on sky? no. Let me just write everything out. Sun position (760, 78). Clouds: cloud1 at y=70 drifting x -180→980 over 60s; cloud2 y=120 over 90s reversed? Make all drift same direction (wind) at different speeds. Birds: group at y=110 with translate animation 950→-100 over 30s, containing 3 small birds offset. Let's write flowers: ```xml ``` Problem: can't have static translate and animateTransform rotate on same element. Solution: `...`. Rotate center at (0,0) which is base. Good. Flower drawing (base at 0,0, grows up negative y): - stem: `` - leaf: `` - petals: 5 ellipses around (0,-46) r 6 at angles. - center circle r 4 #ffd23f. I'll write petals as 5 ellipses with transform rotate(i*72) translate(0,-8) on each. Let's define a reusable flower via in defs and . Colors differ though — could use `fill="currentColor"`... inherits? Fill can be inherited if defined with fill="inherit"... Simpler: just write flowers inline with different colors, using a few copies. To save effort, I'll write ~7 flowers manually but compact. Alternatively define flower in defs with petals using `fill="var(--c)"`? SVG presentation via CSS custom properties works: `fill="var(--petal)"` in a style attribute? Actually presentation attributes don't support var(). But CSS `style="fill:var(--petal)"` does work. And with style="--petal:#ff6f91". That works in modern browsers. Hmm, risk. I'll just write them out; it's fine, 6-7 flowers. Butterflies: ```xml wings: left wing ellipse animateTransform rotate 0,-50,0 ; right wing ``` Two butterflies along different routes. Use values as multi-point translate lists. Wing flap: `` on each wing group nested in translate group. Butterfly body: small ellipse dark, antennae. OK. Also add pond? skip. Let me add a bench on the right side of the park for charm — a simple wooden bench at (700, 400) scale .9. And a lamppost? Maybe bench only. Bench drawing (base at 0,0): - legs: rects - seat: rect - back: rect with slats Colors: #b5713c wood, #7d4a22 shadow. Place bench behind duck on grass near path at y=392 (above path top). Bench sits on grass at y=392. Height ~40. Duck (110 tall) would tower over bench if duck passes in front... duck ground y=430 (path), bench ground 392. Perspective: bench is further away so smaller. Scale 0.75. Duck head at y≈305. Bench top at 392-40=352. Duck in front — fine, duck is foreground. Looks OK. Hmm, actually bench behind at y=392 while path top is 395 — bench on grass right behind path. Good. Also a trash can? Skip. Add a tree with swing? Overkill. Also a small pond behind path on left with lily pads and ripples? Adds beauty but risk of clutter. I'll add a few "bushes" instead. Let me now consider the grass foreground: bottom band y 455..520 darker green with blades and flowers. Path: draw as a shape with slightly wavy top and bottom edges: ``` ``` Ground level for duck at 430 (middle of path). But path top edge wavy between 392-404 and bottom 452-464. Duck feet at 430 — mid. Fine. Hmm duck walking "on" a path whose top edge is at ~398 — duck feet at 430 means duck stands in middle of path. Good. Add pebbles: small ellipses on path with low opacity. Add path edge: dashed lighter line down the middle? Maybe tire-like? Just add scattered pebbles. Now trees on the mid-ground: base y around 370 (grass behind path). Trees at x=90 (scale 1.1), x=250 (0.8), x=640(0.85), x=830(1.15), maybe x=430 (0.7) far. Wait — trees with base at 370 and duck head at 305: trees should be taller, e.g., 100-140 tall so tops at 230-270. Good. Tree drawing (base 0,0, up): ``` circles: (-18,-52) r26, (18,-56) r30, (0,-84) r34, (-30,-72) r22, (30,-74) r24 highlight circles lighter at top-left ``` Define tree as in defs and use with transform="translate(x,y) scale(s)". Scale on — but then no animation needed (trees static or sway). For sway: nest a rotate animate group inside each use? references defs group which contains the sway animation — all uses would animate identically (same timeline) — that's OK actually, but they'd sway in sync which is fine/natural (same wind). Nice: put sway inside the def. But: sway rotate center at base (0,0). Since defs group used with translate+scale, the internal rotate animation applies in the local coords — fine. Careful: SMIL inside a referenced by — animations do run in the shadow tree (SMIL animations are cloned into shadow trees; yes, clones run animations). Should work in Chrome/Firefox/Safari. Slight risk. Alternative: write trees inline (3-4 trees). I'll write trees inline to be safe? That's verbose. I'll use — it's well supported. Actually for animations inside use-shadow-trees there were historical bugs. Let me keep trees static (no sway) inside defs, and add sway only to separately-drawn foreground grass/flowers. Safer. Let's write the code now. I'll be systematic. Also add subtle overall light: an overlay rect with radial gradient white transparent at sun. Let me write. ```xml ```html Walking Duck — SVG Park Scene

SVG · SMIL Animation · No JavaScript

```