Add four pelican runs: Fable 5 (Claude Code), Grok Build, Kimi K2.6, MiniMax M3

Kimi K2.6 (Kimi Code, local) and MiniMax M3 (MiniMax Code web, Thinking
mode) graduate from pending to ran — 14 combinations ran. Harness icon
rules added for Kimi/MiniMax; READMEs and OG count updated.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jesse ZhangandClaude Fable 5 committed 2026-06-10 18:24:32 +01:00
1 parent b008398b82
commit b7d3badc72
10 files changed
+1850 -8

No files matched your search

+5 -3
View File
@@ -17,19 +17,21 @@ One-shot LLM eval cases by NAGI STUDIO: same prompt, different model x harness x
| Model | Vendor | Harness | Effort | Runs |
|---|---|---|---|---|
| Claude Fable 5 | Anthropic | Claude Web App | Max | 02 |
| Claude Fable 5 | Anthropic | Claude Code | Max | 01 |
| Claude Fable 5 | Anthropic | Claude Code | Max | 02 |
| GPT-5.5 Pro | OpenAI | ChatGPT Web | Extended Pro | 02 |
| GPT-5.5 | OpenAI | Codex CLI (no skills) | xhigh | 02 |
| Gemini 3.1 Pro | Google | AntiGravity | High | 03 |
| Gemini 3.5 Flash | Google | AntiGravity | High | 03 |
| Grok Build | xAI | Grok Build TUI (local) | Max | 01 |
| Grok Build | xAI | Grok Build TUI (local) | Max | 02 |
| Composer 2.5 | Cursor | Cursor | Max | 01 |
| DeepSeek-V4-Pro | DeepSeek | Claude Code | Max | 02 |
| Doubao Seed 2.0 Pro | ByteDance | Doubao Web | Pro Mode | 01 |
| Doubao Seed 2.0 Mini | ByteDance | Doubao Web | Fast Mode | 01 |
| MiMo v2.5 Pro | Xiaomi | Claude Code | Max | 02 |
| Kimi K2.6 | Moonshot AI | Kimi Code (local) | Default | 01 |
| MiniMax M3 | MiniMax | MiniMax Code Web | Thinking | 01 |
Pending: Mistral Medium 3.5 · Kimi K2.6 · MiniMax M3 · GLM-5.1 · Qwen3.7-Max (PRs welcome)
Pending: Mistral Medium 3.5 · GLM-5.1 · Qwen3.7-Max (PRs welcome)
> This table is a hand-maintained snapshot; the site's registry section is generated live from `models/*.json` and is authoritative.
+5 -3
View File
@@ -17,19 +17,21 @@ NAGI STUDIO 的 LLM 测评案例集:同一段提示词,不同「模型 × Ha
| 模型 | 厂商 | Harness 环境 | 思考配额 | 产出 |
|---|---|---|---|---|
| Claude Fable 5 | Anthropic | Claude 网页版 | Max | 02 |
| Claude Fable 5 | Anthropic | Claude Code | Max | 01 |
| Claude Fable 5 | Anthropic | Claude Code | Max | 02 |
| GPT-5.5 Pro | OpenAI | ChatGPT 网页版 | Extended Pro | 02 |
| GPT-5.5 | OpenAI | Codex CLI(无 skill) | xhigh | 02 |
| Gemini 3.1 Pro | Google | AntiGravity | High | 03 |
| Gemini 3.5 Flash | Google | AntiGravity | High | 03 |
| Grok Build | xAI | Grok Build TUI(本地) | Max | 01 |
| Grok Build | xAI | Grok Build TUI(本地) | Max | 02 |
| Composer 2.5 | Cursor | Cursor | Max | 01 |
| DeepSeek-V4-Pro | DeepSeek | Claude Code | Max | 02 |
| Doubao Seed 2.0 Pro | ByteDance | 豆包网页版 | 超能模式 | 01 |
| Doubao Seed 2.0 Mini | ByteDance | 豆包网页版 | 快速模式 | 01 |
| MiMo v2.5 Pro | Xiaomi | Claude Code | Max | 02 |
| Kimi K2.6 | Moonshot AI | Kimi Code(本地) | Default | 01 |
| MiniMax M3 | MiniMax | MiniMax Code 网页版 | Thinking | 01 |
待测:Mistral Medium 3.5 · Kimi K2.6 · MiniMax M3 · GLM-5.1 · Qwen3.7-Max(欢迎 PR 补充)
待测:Mistral Medium 3.5 · GLM-5.1 · Qwen3.7-Max(欢迎 PR 补充)
> 此表为人工维护的快照;站点上的「模型阵容」表由 `models/*.json` 实时生成,以站点为准。
+7
View File
@@ -11,6 +11,13 @@
"en": "Generated in one shot by Claude Fable 5 (Max effort) inside Claude Code; this page is the unmodified original output. Same model as the Claude Web App entry but a different harness — compare the two tabs to see how the environment shapes the result."
},
"contributor": "Nagi-ovo"
},
"pelican-cycling": {
"note": {
"zh": "在 Claude Code 中以 Claude Fable 5(Max 思考配额)一次生成。",
"en": "Generated in one shot by Claude Fable 5 (Max effort) inside Claude Code."
},
"contributor": "Nagi-ovo"
}
}
}
+7
View File
@@ -11,6 +11,13 @@
"en": "Built locally with the Grok Build TUI; fixed build (3 lines changed). Bug 1: line 82 const WORLD_SEED = 0xAETHER — T/H/R are not hex digits, so the whole script threw a SyntaxError at parse time; before the fix the screen was pure black with only HTML text. Bug 2: the atlas is drawn in the top canvas rows with top-left-origin UVs but no flipY=false, so every face sampled the undrawn black region; before the fix nearby terrain rendered solid black. Bug 3: the forward vector already points where the camera looks, but W subtracted and S added — W walked backward (A/D were fine). One line each; everything else is Grok as-is."
},
"contributor": "Nagi-ovo"
},
"pelican-cycling": {
"note": {
"zh": "在本地通过 Grok Build(TUI)一次生成。",
"en": "Generated in one shot locally via the Grok Build TUI."
},
"contributor": "Nagi-ovo"
}
}
}
+12 -1
View File
@@ -1,5 +1,16 @@
{
"label": "Kimi K2.6",
"vendor": "Moonshot AI",
"order": 100
"order": 100,
"harness": "Kimi Code",
"effort": "Default",
"runs": {
"pelican-cycling": {
"note": {
"zh": "在本地以 Kimi Code(harness)运行 Kimi K2.6 一次生成。",
"en": "Generated in one shot by Kimi K2.6 running locally in Kimi Code."
},
"contributor": "Nagi-ovo"
}
}
}
+12 -1
View File
@@ -1,5 +1,16 @@
{
"label": "MiniMax M3",
"vendor": "MiniMax",
"order": 110
"order": 110,
"harness": "MiniMax Code Web",
"effort": "Thinking",
"runs": {
"pelican-cycling": {
"note": {
"zh": "在 MiniMax Code 网页版以 MiniMax M3(开启思考模式 Thinking)一次生成。",
"en": "Generated in one shot by MiniMax M3 (Thinking mode on) in the MiniMax Code web app."
},
"contributor": "Nagi-ovo"
}
}
}
@@ -0,0 +1,370 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800" role="img" aria-labelledby="t">
<title id="t">海边骑行的鹈鹕 · A pelican riding a bicycle by the sea</title>
<defs>
<linearGradient id="skyG" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="420">
<stop offset="0" stop-color="#2b7bc0"/>
<stop offset=".45" stop-color="#7db9e2"/>
<stop offset=".75" stop-color="#cfe7ef"/>
<stop offset="1" stop-color="#ffe7c2"/>
</linearGradient>
<radialGradient id="sunG" gradientUnits="userSpaceOnUse" cx="980" cy="128" r="150">
<stop offset="0" stop-color="#fff9e0" stop-opacity=".95"/>
<stop offset=".35" stop-color="#ffeab0" stop-opacity=".55"/>
<stop offset="1" stop-color="#ffd98a" stop-opacity="0"/>
</radialGradient>
<linearGradient id="seaG" gradientUnits="userSpaceOnUse" x1="0" y1="418" x2="0" y2="612">
<stop offset="0" stop-color="#0d5c86"/>
<stop offset=".38" stop-color="#15799d"/>
<stop offset=".7" stop-color="#2ba3ad"/>
<stop offset="1" stop-color="#79dbc9"/>
</linearGradient>
<linearGradient id="wetG" gradientUnits="userSpaceOnUse" x1="0" y1="596" x2="0" y2="800">
<stop offset="0" stop-color="#ecd8b2"/>
<stop offset=".45" stop-color="#d9b88c"/>
<stop offset="1" stop-color="#c69d70"/>
</linearGradient>
<linearGradient id="frameG" gradientUnits="userSpaceOnUse" x1="420" y1="440" x2="770" y2="620">
<stop offset="0" stop-color="#f25549"/>
<stop offset=".55" stop-color="#d63a2e"/>
<stop offset="1" stop-color="#aa241c"/>
</linearGradient>
<linearGradient id="seatG" gradientUnits="userSpaceOnUse" x1="474" y1="414" x2="550" y2="434">
<stop offset="0" stop-color="#8a5a34"/>
<stop offset="1" stop-color="#553318"/>
</linearGradient>
<linearGradient id="pelB" gradientUnits="userSpaceOnUse" x1="450" y1="430" x2="660" y2="220">
<stop offset="0" stop-color="#cfc4b5"/>
<stop offset=".45" stop-color="#efe9dd"/>
<stop offset="1" stop-color="#fffdf4"/>
</linearGradient>
<linearGradient id="pouchG" gradientUnits="userSpaceOnUse" x1="720" y1="225" x2="790" y2="320">
<stop offset="0" stop-color="#ffc987"/>
<stop offset=".55" stop-color="#f99b44"/>
<stop offset="1" stop-color="#ef7a26"/>
</linearGradient>
<linearGradient id="billG" gradientUnits="userSpaceOnUse" x1="710" y1="190" x2="850" y2="260">
<stop offset="0" stop-color="#f6cf9c"/>
<stop offset="1" stop-color="#db8e4e"/>
</linearGradient>
<linearGradient id="scarfG" gradientUnits="userSpaceOnUse" x1="500" y1="280" x2="600" y2="312">
<stop offset="0" stop-color="#f25549"/>
<stop offset="1" stop-color="#a02020"/>
</linearGradient>
<linearGradient id="reflFade" gradientUnits="userSpaceOnUse" x1="0" y1="678" x2="0" y2="802">
<stop offset="0" stop-color="#fff" stop-opacity=".55"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<radialGradient id="vig" cx=".5" cy=".45" r=".75">
<stop offset="0" stop-color="#0a1622" stop-opacity="0"/>
<stop offset=".78" stop-color="#0a1622" stop-opacity="0"/>
<stop offset="1" stop-color="#0a1622" stop-opacity=".22"/>
</radialGradient>
<mask id="reflMask">
<rect x="250" y="678" width="760" height="130" fill="url(#reflFade)"/>
</mask>
<filter id="blur1"><feGaussianBlur stdDeviation="1"/></filter>
<filter id="blur2"><feGaussianBlur stdDeviation="2"/></filter>
<filter id="blur4"><feGaussianBlur stdDeviation="4"/></filter>
<filter id="blur6"><feGaussianBlur stdDeviation="6"/></filter>
<filter id="ripple" x="-15%" y="-15%" width="130%" height="130%">
<feTurbulence type="fractalNoise" baseFrequency="0.011 0.13" numOctaves="1" seed="7" result="n"/>
<feDisplacementMap in="SourceGraphic" in2="n" scale="12" xChannelSelector="R" yChannelSelector="G"/>
<feGaussianBlur stdDeviation="1.4"/>
</filter>
<filter id="grain">
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" seed="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0.09 0.09 0 -0.02"/>
</filter>
<g id="wheel">
<circle r="97" fill="none" stroke="#23262b" stroke-width="13"/>
<circle r="97" fill="none" stroke="#3a3e45" stroke-width="2.5" stroke-dasharray="6 9" opacity=".55"/>
<circle r="90" fill="none" stroke="#121417" stroke-width="1.6" opacity=".5"/>
<circle r="84" fill="none" stroke="#ccd4da" stroke-width="5"/>
<circle r="80" fill="none" stroke="#8d959c" stroke-width="1.2" opacity=".7"/>
<g stroke="#b9c2c9" stroke-width="2" opacity=".9">
<line x1="0" y1="-81" x2="0" y2="81"/>
<line x1="0" y1="-81" x2="0" y2="81" transform="rotate(25.7)"/>
<line x1="0" y1="-81" x2="0" y2="81" transform="rotate(51.4)"/>
<line x1="0" y1="-81" x2="0" y2="81" transform="rotate(77.1)"/>
<line x1="0" y1="-81" x2="0" y2="81" transform="rotate(102.9)"/>
<line x1="0" y1="-81" x2="0" y2="81" transform="rotate(128.6)"/>
<line x1="0" y1="-81" x2="0" y2="81" transform="rotate(154.3)"/>
<line x1="0" y1="-84" x2="0" y2="-75" stroke="#6a7077" stroke-width="3.5"/>
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="0.85s" repeatCount="indefinite"/>
</g>
<circle r="11" fill="#9aa2a9" stroke="#5d646b" stroke-width="2"/>
<circle r="4.5" fill="#3a3f44"/>
</g>
<g id="gull" fill="none" stroke="#46566a" stroke-width="3.5" stroke-linecap="round">
<path d="M-16,0 Q-8,-9 0,-1 Q8,-9 16,0"/>
</g>
</defs>
<!-- sky -->
<rect x="0" y="0" width="1200" height="424" fill="url(#skyG)"/>
<circle cx="980" cy="128" r="150" fill="url(#sunG)"/>
<ellipse cx="980" cy="128" rx="95" ry="9" fill="#fff6d2" opacity=".45" filter="url(#blur4)"/>
<circle cx="980" cy="128" r="33" fill="#fffdf0"/>
<g filter="url(#blur4)" opacity=".95">
<g>
<ellipse cx="210" cy="108" rx="58" ry="26" fill="#fff"/>
<ellipse cx="262" cy="116" rx="44" ry="20" fill="#fff"/>
<ellipse cx="156" cy="118" rx="40" ry="18" fill="#fff"/>
<ellipse cx="210" cy="128" rx="78" ry="12" fill="#dde8f0"/>
<animateTransform attributeName="transform" type="translate" values="0 0; 26 0; 0 0" dur="56s" repeatCount="indefinite"/>
</g>
<g>
<ellipse cx="668" cy="84" rx="46" ry="20" fill="#fff"/>
<ellipse cx="710" cy="92" rx="34" ry="15" fill="#fff"/>
<ellipse cx="630" cy="92" rx="30" ry="13" fill="#fff"/>
<ellipse cx="668" cy="99" rx="60" ry="9" fill="#dde8f0"/>
<animateTransform attributeName="transform" type="translate" values="0 0; -20 0; 0 0" dur="64s" repeatCount="indefinite"/>
</g>
</g>
<ellipse cx="480" cy="388" rx="60" ry="8" fill="#fff" opacity=".32" filter="url(#blur2)"/>
<ellipse cx="545" cy="398" rx="40" ry="6" fill="#fff" opacity=".22" filter="url(#blur2)"/>
<g>
<use href="#gull" transform="translate(262 160)" opacity=".85"/>
<use href="#gull" transform="translate(330 128) scale(.7) rotate(-6)" opacity=".7"/>
<use href="#gull" transform="translate(208 196) scale(.55) rotate(5)" opacity=".6"/>
<animateTransform attributeName="transform" type="translate" values="0 0; 0 -5; 0 0" dur="4.6s" repeatCount="indefinite"/>
</g>
<path d="M0,420 L0,396 C50,388 110,386 170,394 C200,398 220,406 232,420 Z" fill="#93aec4" opacity=".5" filter="url(#blur2)"/>
<rect x="0" y="419" width="1200" height="2" fill="#f6efd8" opacity=".45"/>
<!-- sea -->
<path d="M0,420 L1200,420 L1200,598 C1040,606 880,612 640,606 C420,612 200,610 0,618 Z" fill="url(#seaG)"/>
<path d="M0,520 C180,510 350,526 560,518 C780,510 990,524 1200,514 L1200,560 C990,568 780,556 560,562 C350,570 180,556 0,564 Z" fill="#3db4b2" opacity=".45"/>
<path d="M0,564 C160,556 330,570 540,562 C760,554 980,568 1200,558 L1200,596 C1040,604 880,608 640,602 C420,608 200,606 0,614 Z" fill="#6fd2c4" opacity=".55"/>
<path d="M0,492 C200,484 420,498 640,490 C860,482 1040,496 1200,488" fill="none" stroke="#e9fbf6" stroke-width="2" opacity=".35"/>
<path d="M0,536 C220,528 440,542 660,534 C880,526 1060,540 1200,532" fill="none" stroke="#e9fbf6" stroke-width="2" opacity=".28"/>
<path d="M0,578 C240,570 460,584 680,576 C900,568 1080,582 1200,574" fill="none" stroke="#f2fdf9" stroke-width="2" opacity=".25"/>
<g stroke="#fff6d0" stroke-linecap="round">
<line x1="944" y1="436" x2="1006" y2="436" stroke-width="3" opacity=".85"/>
<line x1="930" y1="448" x2="1022" y2="448" stroke-width="3.5" opacity=".7"/>
<line x1="952" y1="460" x2="1000" y2="460" stroke-width="2.5" opacity=".8"/>
<line x1="926" y1="474" x2="1030" y2="474" stroke-width="3.5" opacity=".6"/>
<line x1="946" y1="488" x2="1008" y2="488" stroke-width="3" opacity=".7"/>
<line x1="936" y1="503" x2="1018" y2="503" stroke-width="3.5" opacity=".55"/>
<line x1="956" y1="517" x2="998" y2="517" stroke-width="2.5" opacity=".65"/>
<line x1="930" y1="532" x2="1024" y2="532" stroke-width="3.5" opacity=".5"/>
<line x1="948" y1="548" x2="1010" y2="548" stroke-width="3" opacity=".55"/>
<line x1="938" y1="564" x2="1020" y2="564" stroke-width="3.5" opacity=".45"/>
<line x1="956" y1="580" x2="1002" y2="580" stroke-width="2.5" opacity=".5"/>
<line x1="944" y1="594" x2="1014" y2="594" stroke-width="3" opacity=".4"/>
<animate attributeName="opacity" values=".75;1;.75" dur="3.6s" repeatCount="indefinite"/>
</g>
<g opacity=".9">
<path d="M1076,444 Q1090,452 1106,444 L1102,438 L1080,438 Z" fill="#3e4a55"/>
<line x1="1091" y1="438" x2="1091" y2="404" stroke="#2e3840" stroke-width="1.5"/>
<path d="M1091,406 L1091,436 L1072,436 Z" fill="#f8f3e6"/>
<path d="M1094,410 L1094,436 L1110,438 Z" fill="#eee6d4"/>
<line x1="1078" y1="456" x2="1104" y2="456" stroke="#3e4a55" stroke-width="3" opacity=".2" filter="url(#blur1)"/>
</g>
<!-- beach -->
<path d="M0,614 C220,608 440,610 660,602 C880,596 1050,600 1200,594 L1200,800 L0,800 Z" fill="url(#wetG)"/>
<ellipse cx="600" cy="660" rx="560" ry="36" fill="#fff" opacity=".13" filter="url(#blur6)"/>
<g stroke="#fff" stroke-linecap="round" filter="url(#blur2)">
<line x1="180" y1="700" x2="500" y2="700" stroke-width="3" opacity=".12"/>
<line x1="560" y1="724" x2="940" y2="724" stroke-width="3" opacity=".1"/>
<line x1="300" y1="760" x2="580" y2="760" stroke-width="3" opacity=".08"/>
</g>
<path d="M0,613 Q50,605 100,611 Q150,616 200,609 Q250,601 300,608 Q350,614 400,607 Q450,599 500,605 Q550,612 600,603 Q650,596 700,601 Q750,608 800,599 Q850,592 900,598 Q950,605 1000,597 Q1050,590 1100,596 Q1150,602 1200,594" fill="none" stroke="#ffffff" stroke-width="6.5" opacity=".85" filter="url(#blur1)"/>
<path d="M0,601 Q50,593 100,599 Q150,604 200,597 Q250,589 300,596 Q350,602 400,595 Q450,587 500,593 Q550,600 600,591 Q650,584 700,589 Q750,596 800,587 Q850,580 900,586 Q950,593 1000,585 Q1050,578 1100,584 Q1150,590 1200,582" fill="none" stroke="#ffffff" stroke-width="3" opacity=".4" stroke-dasharray="18 12" filter="url(#blur1)"/>
<path d="M0,587 Q60,581 120,585 Q180,589 240,583 Q300,577 360,582 Q420,587 480,581 Q540,575 600,579 Q660,584 720,578 Q780,572 840,577 Q900,582 960,576 Q1020,570 1080,575 Q1140,580 1200,574" fill="none" stroke="#ffffff" stroke-width="2.5" opacity=".25" stroke-dasharray="8 14"/>
<path d="M40,622 C120,616 210,624 300,620 C380,617 430,626 470,634 C430,648 340,656 250,652 C160,648 80,640 40,630 Z" fill="#ffffff" opacity=".18" filter="url(#blur2)"/>
<path d="M0,800 L0,758 C180,742 400,768 640,780 C880,792 1060,786 1200,772 L1200,800 Z" fill="#f0d6a4"/>
<path d="M0,758 C180,742 400,768 640,780 C880,792 1060,786 1200,772" fill="none" stroke="#f9e7bd" stroke-width="2" opacity=".6"/>
<g stroke="#fff3cf" stroke-linecap="round" filter="url(#blur1)">
<line x1="950" y1="616" x2="1008" y2="616" stroke-width="3" opacity=".25"/>
<line x1="940" y1="634" x2="1016" y2="634" stroke-width="3" opacity=".16"/>
<line x1="958" y1="652" x2="1000" y2="652" stroke-width="3" opacity=".1"/>
</g>
<g>
<path d="M1000,720 L1007,735 L1022,737 L1010,747 L1014,762 L1000,753 L986,762 L990,747 L978,737 L993,735 Z" fill="#e8845a" stroke="#c4663e" stroke-width="1.5" stroke-linejoin="round" transform="rotate(-15 1000 742)"/>
<circle cx="1000" cy="742" r="1.6" fill="#c4663e"/>
<circle cx="1006" cy="733" r="1.2" fill="#c4663e"/>
<circle cx="994" cy="733" r="1.2" fill="#c4663e"/>
<path d="M156,768 Q170,734 184,768 Q170,778 156,768 Z" fill="#f2e3c8" stroke="#c9ab7e" stroke-width="1.2"/>
<path d="M170,774 L162,748 M170,774 L170,742 M170,774 L178,748" stroke="#c9ab7e" stroke-width="1" opacity=".8" fill="none"/>
<ellipse cx="240" cy="712" rx="5" ry="3" fill="#b59a78" opacity=".8"/>
<ellipse cx="268" cy="716" rx="3" ry="2" fill="#a98e6c" opacity=".8"/>
<ellipse cx="1105" cy="756" rx="6" ry="4" fill="#b59a78" opacity=".8"/>
<ellipse cx="1130" cy="762" rx="4" ry="2.5" fill="#a98e6c" opacity=".8"/>
<ellipse cx="420" cy="752" rx="4" ry="2.5" fill="#b59a78" opacity=".7"/>
</g>
<rect x="0" y="600" width="1200" height="200" fill="#5b4424" filter="url(#grain)" opacity=".5"/>
<path d="M-20,708 C140,702 300,692 424,681" fill="none" stroke="#a8835a" stroke-width="8" opacity=".45"/>
<path d="M-20,708 C140,702 300,692 424,681" fill="none" stroke="#c4a47b" stroke-width="2.5" opacity=".7" stroke-dasharray="10 6"/>
<g stroke="#fff" stroke-linecap="round">
<line x1="252" y1="318" x2="348" y2="318" stroke-width="4" opacity=".15"/>
<line x1="232" y1="352" x2="306" y2="352" stroke-width="3" opacity=".12"/>
<line x1="270" y1="290" x2="330" y2="290" stroke-width="3" opacity=".1"/>
</g>
<ellipse cx="577" cy="683" rx="250" ry="13" fill="#4a3520" opacity=".28" filter="url(#blur6)"/>
<ellipse cx="410" cy="682" rx="55" ry="8" fill="#3c2c1a" opacity=".3" filter="url(#blur4)"/>
<ellipse cx="748" cy="682" rx="55" ry="8" fill="#3c2c1a" opacity=".3" filter="url(#blur4)"/>
<g id="subject">
<!-- far side: pedal, leg, crank -->
<rect x="511" y="511" width="34" height="10" rx="3" fill="#1a1d21"/>
<ellipse cx="522" cy="428" rx="14" ry="22" fill="#d8cec0" transform="rotate(8 522 428)"/>
<path d="M521,452 Q513,478 524,502" fill="none" stroke="#c97a2e" stroke-width="10" stroke-linecap="round"/>
<path d="M506,512 L527,498 L551,510 Q528,518 506,512 Z" fill="#cd7e30" stroke="#95571c" stroke-width=".8"/>
<path d="M524,502 L540,509 M520,505 L532,511" stroke="#95571c" stroke-width="1" opacity=".7"/>
<line x1="565" y1="582" x2="528" y2="516" stroke="#1d2125" stroke-width="8" stroke-linecap="round"/>
<!-- wheels -->
<use href="#wheel" transform="translate(425 578)"/>
<use href="#wheel" transform="translate(762 578)"/>
<circle cx="425" cy="578" r="15" fill="none" stroke="#6a7177" stroke-width="6"/>
<circle cx="425" cy="578" r="18" fill="none" stroke="#545a60" stroke-width="2" stroke-dasharray="3 3"/>
<!-- fenders -->
<path d="M320.7,550.1 A108 108 0 0 1 529.3,550.1" fill="none" stroke="#f6efe0" stroke-width="11"/>
<path d="M668.5,524 A108 108 0 0 1 863.5,541.1" fill="none" stroke="#f6efe0" stroke-width="11"/>
<!-- chain -->
<line x1="567" y1="553" x2="427" y2="564" stroke="#383d41" stroke-width="4" stroke-dasharray="5 3" opacity=".9"/>
<path d="M427,592 C470,603 520,609 566,611" fill="none" stroke="#383d41" stroke-width="4" stroke-dasharray="5 3" opacity=".9"/>
<!-- frame -->
<line x1="565" y1="582" x2="425" y2="578" stroke="url(#frameG)" stroke-width="9" stroke-linecap="round"/>
<line x1="518" y1="455" x2="427" y2="576" stroke="url(#frameG)" stroke-width="8" stroke-linecap="round"/>
<line x1="565" y1="582" x2="518" y2="452" stroke="url(#frameG)" stroke-width="10" stroke-linecap="round"/>
<path d="M736,486 C678,524 618,560 567,582" fill="none" stroke="url(#frameG)" stroke-width="12" stroke-linecap="round"/>
<path d="M519,454 C596,434 668,432 724,448" fill="none" stroke="url(#frameG)" stroke-width="10" stroke-linecap="round"/>
<line x1="722" y1="442" x2="739" y2="489" stroke="#b32a20" stroke-width="12" stroke-linecap="round"/>
<path d="M739,489 C748,520 756,548 762,578" fill="none" stroke="url(#frameG)" stroke-width="9" stroke-linecap="round"/>
<path d="M521,450 C596,430 668,428 722,444" fill="none" stroke="#ffd9c9" stroke-width="2.5" opacity=".35"/>
<path d="M733,488 C676,525 620,560 570,581" fill="none" stroke="#ffd9c9" stroke-width="2.5" opacity=".3"/>
<circle cx="739" cy="489" r="5" fill="#8a8f94"/>
<!-- saddle, stem, bars -->
<line x1="518" y1="452" x2="512" y2="430" stroke="#c9ced3" stroke-width="7"/>
<circle cx="488" cy="436" r="4" fill="none" stroke="#b9bec3" stroke-width="2.5"/>
<circle cx="506" cy="438" r="4" fill="none" stroke="#b9bec3" stroke-width="2.5"/>
<path d="M474,428 C478,418 496,414 516,416 C536,414 548,418 550,424 C540,432 520,434 504,433 C490,433 478,432 474,428 Z" fill="url(#seatG)" stroke="#4a2d17" stroke-width="1"/>
<line x1="724" y1="444" x2="714" y2="409" stroke="#2e3338" stroke-width="8" stroke-linecap="round"/>
<path d="M714,409 C736,390 724,382 700,390 C690,394 686,398 684,402" fill="none" stroke="#d7dce0" stroke-width="7" stroke-linecap="round"/>
<path d="M696,392 C688,396 685,399 684,403" fill="none" stroke="#6b4226" stroke-width="9" stroke-linecap="round"/>
<circle cx="719" cy="396" r="5" fill="#e2c45a" stroke="#9a7c28" stroke-width="1"/>
<circle cx="719" cy="396" r="1.2" fill="#9a7c28"/>
<!-- basket + fish -->
<line x1="738" y1="478" x2="772" y2="472" stroke="#565b60" stroke-width="4"/>
<path d="M800,420 C802,408 810,398 820,402 C814,408 812,414 812,420 Z" fill="#7fa8c4" stroke="#54748c" stroke-width="1"/>
<ellipse cx="760" cy="414" rx="10" ry="7" fill="#8fb4cc" stroke="#54748c" stroke-width="1"/>
<circle cx="757" cy="412" r="1.5" fill="#2c3e4c"/>
<path d="M748,420 L824,420 L814,474 L758,474 Z" fill="#c89a5e" stroke="#8f6234" stroke-width="2" stroke-linejoin="round"/>
<path d="M751,433 L821,433 M753,446 L818,446 M755,459 L816,459" stroke="#8f6234" stroke-width="1.6" opacity=".7"/>
<path d="M758,421 L764,473 M770,421 L774,473 M782,420 L784,474 M794,420 L794,473 M806,420 L804,473 M818,420 L812,472" stroke="#8f6234" stroke-width="1.3" opacity=".5"/>
<line x1="744" y1="420" x2="828" y2="420" stroke="#9a6b38" stroke-width="8" stroke-linecap="round"/>
<line x1="746" y1="417" x2="826" y2="417" stroke="#d9b074" stroke-width="2" opacity=".8"/>
<!-- chainring -->
<circle cx="565" cy="582" r="33" fill="none" stroke="#565c62" stroke-width="2" stroke-dasharray="4 3.5"/>
<circle cx="565" cy="582" r="30" fill="none" stroke="#4c5258" stroke-width="8"/>
<circle cx="565" cy="582" r="17" fill="none" stroke="#4c5258" stroke-width="3"/>
<line x1="565" y1="565" x2="565" y2="599" stroke="#4c5258" stroke-width="3"/>
<line x1="548" y1="582" x2="582" y2="582" stroke="#4c5258" stroke-width="3"/>
<circle cx="565" cy="582" r="6" fill="#33383d"/>
<!-- pelican -->
<path d="M592,316 C636,330 666,356 682,382 C688,392 692,398 696,402 C688,402 678,396 668,384 C648,362 616,338 592,322 Z" fill="#cfc5b6"/>
<path d="M676,380 C690,388 698,394 702,400 C694,403 686,398 680,392 C676,388 674,384 676,380 Z" fill="#1f1d1b"/>
<path d="M442,330 C412,316 382,310 352,314 C380,324 408,332 440,342 Z" fill="#efe8db"/>
<path d="M444,346 C410,338 378,338 350,346 C380,354 412,356 442,358 Z" fill="#e4dccc"/>
<path d="M444,360 C412,360 384,366 362,376 C390,380 418,374 444,370 Z" fill="#d8cfbe"/>
<path d="M446,310 C486,282 548,278 592,300 C606,308 614,322 616,338 C618,362 606,388 584,402 C556,418 508,420 478,408 C450,396 436,372 436,348 C436,332 440,320 446,310 Z" fill="url(#pelB)" stroke="#c9bdae" stroke-width="1" stroke-opacity=".25"/>
<ellipse cx="588" cy="352" rx="26" ry="40" fill="#f4dfae" opacity=".5" filter="url(#blur4)" transform="rotate(-18 588 352)"/>
<path d="M468,412 Q510,426 552,414" fill="none" stroke="#6b5a44" stroke-width="6" opacity=".25" filter="url(#blur4)"/>
<path d="M470,402 Q520,416 572,402" fill="none" stroke="#b9ab9a" stroke-width="8" opacity=".3" filter="url(#blur4)"/>
<g fill="none" stroke="#d6cbbb" stroke-width="1.8" opacity=".65">
<path d="M468,396 Q480,404 494,398 Q508,406 522,399 Q536,406 550,398"/>
<path d="M478,382 Q490,390 504,384 Q518,392 532,385 Q546,392 560,384"/>
<path d="M490,368 Q502,376 516,370 Q530,378 544,371"/>
</g>
<g fill="none" stroke="#e8e0d2" stroke-width="1.6" opacity=".7">
<path d="M474,316 Q500,306 528,304 M462,330 Q488,320 516,318"/>
</g>
<ellipse cx="560" cy="396" rx="30" ry="24" fill="#f7f2e7" transform="rotate(-15 560 396)"/>
<path d="M540,404 Q554,410 568,404 M536,392 Q550,398 564,392" fill="none" stroke="#d6cbbb" stroke-width="1.6" opacity=".6"/>
<g>
<path d="M590,300 C558,286 524,280 494,286 C506,296 522,302 540,306 C528,312 512,314 498,312 C516,322 548,324 572,316 C582,312 588,306 590,300 Z" fill="url(#scarfG)"/>
<path d="M588,306 C570,314 550,318 532,320 C550,324 568,320 582,314 Z" fill="#b32a28"/>
<animateTransform attributeName="transform" type="rotate" values="-2.5 590 302; 2 590 302; -2.5 590 302" dur="1.6s" repeatCount="indefinite"/>
</g>
<path d="M556,298 C600,256 628,232 658,198 C664,190 670,186 676,184 L690,224 C664,256 634,286 608,308 C596,318 582,320 572,316 C564,310 556,304 556,298 Z" fill="url(#pelB)"/>
<path d="M560,296 C602,256 628,232 656,200" fill="none" stroke="#d8cec0" stroke-width="2" opacity=".55"/>
<path d="M688,222 C662,254 634,284 608,306" fill="none" stroke="#ffe2a8" stroke-width="2.5" opacity=".7"/>
<path d="M610,316 C616,336 614,362 600,386" fill="none" stroke="#ffe2a8" stroke-width="2.5" opacity=".6"/>
<!-- bill + pouch -->
<path d="M706,186 C758,202 810,228 851,251 C857,255 857,262 851,266 C806,244 758,228 710,214 C707,206 705,196 706,186 Z" fill="url(#billG)"/>
<path d="M712,196 C762,210 812,233 848,254" fill="none" stroke="#b87844" stroke-width="1.6" opacity=".6"/>
<path d="M710,189 C760,204 810,229 848,251" fill="none" stroke="#ffe3b0" stroke-width="2" opacity=".7"/>
<line x1="722" y1="196" x2="740" y2="202" stroke="#9a6238" stroke-width="1.5" opacity=".6"/>
<path d="M846,254 C853,256 855,262 849,266 C845,263 844,258 846,254 Z" fill="#c4452e"/>
<path d="M714,214 C690,248 656,278 618,300 C640,314 690,320 744,316 C794,312 832,289 850,262 C802,242 758,226 714,214 Z" fill="url(#pouchG)"/>
<path d="M706,238 C694,258 686,276 688,292 M718,242 C708,262 702,280 706,296" fill="none" stroke="#d96a28" stroke-width="2" opacity=".3"/>
<path d="M710,218 C688,248 656,278 622,300" fill="none" stroke="#d4853a" stroke-width="2" opacity=".45"/>
<path d="M712,213 C760,227 806,243 848,261" fill="none" stroke="#b97a44" stroke-width="2.5" opacity=".8"/>
<path d="M622,302 C652,314 696,319 744,316 C794,312 830,290 846,266" fill="none" stroke="#ffd9a0" stroke-width="2" opacity=".75"/>
<!-- head -->
<circle cx="694" cy="200" r="28" fill="url(#pelB)"/>
<path d="M678,183 C666,172 654,166 644,165 C654,173 662,181 669,190 Z" fill="#f6efe3"/>
<path d="M674,192 C663,185 653,183 645,185 C654,190 662,196 668,202 Z" fill="#e9e0d0"/>
<path d="M668,180 Q694,166 716,184" fill="none" stroke="#fff3cc" stroke-width="2" opacity=".6"/>
<ellipse cx="701" cy="193" rx="9" ry="7" fill="#f2c98e" opacity=".8" transform="rotate(-12 701 193)"/>
<circle cx="703" cy="192" r="4" fill="#2a2018"/>
<circle cx="704.6" cy="190.6" r="1.3" fill="#fff" opacity=".95"/>
<path d="M697,187 Q703,184.5 709,188.5" fill="none" stroke="#b89058" stroke-width="1.4"/>
<path d="M578,292 L602,294 L594,316 Z" fill="#c93632" stroke="#8e1d1a" stroke-width="1"/>
<!-- wing -->
<path d="M556,308 C600,302 636,318 660,344" fill="none" stroke="#b5a896" stroke-width="5" opacity=".35" filter="url(#blur2)"/>
<path d="M552,304 C604,296 646,316 670,348 C680,362 686,378 692,394 C686,398 678,396 672,388 C660,372 642,354 618,340 C596,328 570,318 552,304 Z" fill="#faf5ea" stroke="#d8cdbd" stroke-width=".8"/>
<path d="M576,322 Q588,330 602,325 Q616,333 630,328 M596,338 Q610,346 624,341 Q638,349 652,344" fill="none" stroke="#d9d0c2" stroke-width="1.6" opacity=".65"/>
<path d="M636,348 C656,366 672,384 682,400 C684,408 681,413 675,413 C666,403 654,388 642,371 C637,362 634,354 636,348 Z" fill="#36322d"/>
<path d="M648,344 C672,360 690,378 700,394 C704,402 703,410 697,413 C687,404 675,390 663,374 C655,364 649,354 648,344 Z" fill="#26231f"/>
<path d="M662,342 C684,354 700,368 710,382 C714,390 713,397 708,401 C698,391 686,377 672,362 C667,355 663,348 662,342 Z" fill="#1c1a17"/>
<path d="M650,350 C668,366 684,382 696,398 M664,348 C682,362 696,376 706,390" fill="none" stroke="#cfc8bb" stroke-width="1" opacity=".35"/>
<!-- near leg -->
<path d="M566,426 Q592,520 598,622" fill="none" stroke="#ef9b40" stroke-width="11" stroke-linecap="round"/>
<path d="M570,430 Q596,522 601,618" fill="none" stroke="#c87c2c" stroke-width="2.5" opacity=".45"/>
<path d="M598,626 C590,634 584,640 582,646 L640,644 C622,634 608,628 598,626 Z" fill="#f6a649" stroke="#b86f24" stroke-width="1"/>
<path d="M596,632 L622,643 M594,636 L610,644" stroke="#b86f24" stroke-width="1.2" opacity=".7"/>
<path d="M640,644 q5,1 7,4" fill="none" stroke="#6b4216" stroke-width="1.5"/>
<!-- near crank over leg -->
<line x1="565" y1="582" x2="602" y2="648" stroke="#2e3338" stroke-width="9" stroke-linecap="round"/>
<rect x="583" y="643" width="38" height="10" rx="3" fill="#16191c"/>
<circle cx="602" cy="648" r="3" fill="#4a5056"/>
</g>
<!-- reflection on wet sand -->
<g opacity=".5" mask="url(#reflMask)" filter="url(#ripple)">
<use href="#subject" transform="translate(0 1227.6) scale(1 -0.8)"/>
</g>
<!-- kicked-up sand + drifting feather -->
<g fill="#d9b787">
<circle cx="388" cy="668" r="5" opacity=".7"/>
<circle cx="372" cy="664" r="4" opacity=".7"/>
<circle cx="358" cy="650" r="3" opacity=".6"/>
<circle cx="404" cy="672" r="3.5" opacity=".6"/>
<circle cx="346" cy="636" r="2.5" opacity=".45" filter="url(#blur1)"/>
<circle cx="337" cy="622" r="2" opacity=".3" filter="url(#blur1)"/>
</g>
<g>
<path d="M336,452 C326,444 322,432 326,422 C330,430 336,440 342,448 C340,452 338,452 336,452 Z" fill="#f6f1e6"/>
<path d="M338,450 C332,442 328,434 327,426" stroke="#d8d0c0" stroke-width="1" fill="none"/>
<animateTransform attributeName="transform" type="translate" values="0 0; -18 30; 0 0" keyTimes="0; .5; 1" dur="6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0; .85; 0" keyTimes="0; .5; 1" dur="6s" repeatCount="indefinite"/>
</g>
<!-- foreground palm fronds, defocused -->
<g transform="translate(-12 -14)" filter="url(#blur1)" opacity=".97">
<path d="M6,2 C96,4 192,18 286,58 C196,26 100,8 2,12 Z" fill="#1e5639"/>
<path d="M2,6 C84,16 170,40 252,96 C172,56 84,26 -2,20 Z" fill="#17402d"/>
<path d="M0,12 C70,26 150,58 224,128 C150,84 66,46 -4,30 Z" fill="#226044"/>
<path d="M-2,18 C56,44 116,92 158,164 C108,108 52,58 -10,34 Z" fill="#163d2a"/>
<path d="M-6,26 C30,62 64,118 80,190 C48,128 16,72 -16,42 Z" fill="#1d5034"/>
<path d="M8,0 C70,-6 150,-2 220,18 C150,2 76,-2 6,8 Z" fill="#2a7050"/>
<path d="M0,10 C80,22 160,52 224,124 M2,8 C84,18 170,42 250,94" fill="none" stroke="#0e2c1e" stroke-width="2" opacity=".5"/>
</g>
<rect x="0" y="0" width="1200" height="800" fill="url(#vig)"/>
</svg>

After

Width:  |  Height:  |  Size: 27 KiB

+568
View File
@@ -0,0 +1,568 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="650" viewBox="0 0 1100 650" aria-labelledby="title desc">
<title>Seaside Pelican on a Bicycle</title>
<desc>A realistic and vivid pelican riding a bicycle along a sunny beach with turquoise waves, golden sand, and blue sky.</desc>
<defs>
<!-- Sky gradient -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3A8BD9"/>
<stop offset="45%" stop-color="#5FB4E8"/>
<stop offset="78%" stop-color="#8ECFF2"/>
<stop offset="100%" stop-color="#B8E0F2"/>
</linearGradient>
<!-- Distant sea haze -->
<linearGradient id="seaHaze" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0077B6"/>
<stop offset="100%" stop-color="#00A3D9"/>
</linearGradient>
<!-- Mid water -->
<linearGradient id="waterMid" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0096C7"/>
<stop offset="55%" stop-color="#00B4D8"/>
<stop offset="100%" stop-color="#48CAE4"/>
</linearGradient>
<!-- Near water / surf -->
<linearGradient id="waterNear" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5ED3F5"/>
<stop offset="40%" stop-color="#90E0EF"/>
<stop offset="100%" stop-color="#CAF0F8"/>
</linearGradient>
<!-- Sand base -->
<linearGradient id="sandGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#F2E3C6"/>
<stop offset="35%" stop-color="#E8D5A3"/>
<stop offset="100%" stop-color="#D9C48A"/>
</linearGradient>
<!-- Wet sand near water -->
<linearGradient id="wetSand" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#C8B68A"/>
<stop offset="100%" stop-color="#B5A57A"/>
</linearGradient>
<!-- Pelican body gradient -->
<linearGradient id="pelicanBody" x1="0" y1="0" x2="0.3" y2="1">
<stop offset="0%" stop-color="#F9F9F7"/>
<stop offset="35%" stop-color="#F1F0EC"/>
<stop offset="75%" stop-color="#E3E1D9"/>
<stop offset="100%" stop-color="#D6D4CA"/>
</linearGradient>
<!-- Wing feather gradient -->
<linearGradient id="wingGrad" x1="0.2" y1="0.1" x2="0.85" y2="0.9">
<stop offset="0%" stop-color="#F4F3EF"/>
<stop offset="30%" stop-color="#E8E6DF"/>
<stop offset="65%" stop-color="#D4D1C6"/>
<stop offset="100%" stop-color="#C2BEB0"/>
</linearGradient>
<!-- Beak gradient -->
<linearGradient id="beakGrad" x1="0" y1="0" x2="1" y2="0.4">
<stop offset="0%" stop-color="#F5A05A"/>
<stop offset="45%" stop-color="#E88B3A"/>
<stop offset="100%" stop-color="#D9752A"/>
</linearGradient>
<!-- Pouch gradient (rich yellow-orange) -->
<linearGradient id="pouchGrad" x1="0.1" y1="0" x2="0.6" y2="1">
<stop offset="0%" stop-color="#FFDB5C"/>
<stop offset="25%" stop-color="#FFC53D"/>
<stop offset="60%" stop-color="#F8A83A"/>
<stop offset="100%" stop-color="#E78F2E"/>
</linearGradient>
<!-- Bike frame metallic -->
<linearGradient id="frameGrad" x1="0" y1="0" x2="0.4" y2="1">
<stop offset="0%" stop-color="#3A3F44"/>
<stop offset="20%" stop-color="#555B61"/>
<stop offset="55%" stop-color="#2C3035"/>
<stop offset="100%" stop-color="#1F2327"/>
</linearGradient>
<!-- Chrome accents -->
<linearGradient id="chromeGrad" x1="0" y1="0" x2="0.2" y2="1">
<stop offset="0%" stop-color="#E8ECF0"/>
<stop offset="25%" stop-color="#C6CDD4"/>
<stop offset="55%" stop-color="#9AA5B0"/>
<stop offset="100%" stop-color="#6F7985"/>
</linearGradient>
<!-- Tire -->
<linearGradient id="tireGrad" x1="0.3" y1="0.2" x2="0.8" y2="0.85">
<stop offset="0%" stop-color="#2A2A2A"/>
<stop offset="40%" stop-color="#1A1A1A"/>
<stop offset="100%" stop-color="#111111"/>
</linearGradient>
<!-- Shadow filter for grounding -->
<filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur"/>
<feOffset in="blur" dx="0" dy="7" result="offset"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.32"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Subtle feather texture filter -->
<filter id="featherSoft" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.9" result="b"/>
<feComposite in="b" in2="SourceGraphic" operator="out" result="edge"/>
<feMerge>
<feMergeNode in="b"/>
<feMergeNode in="edge"/>
</feMerge>
</filter>
<!-- Wave highlight -->
<linearGradient id="waveHighlight" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.0"/>
<stop offset="25%" stop-color="#ffffff" stop-opacity="0.55"/>
<stop offset="55%" stop-color="#ffffff" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.0"/>
</linearGradient>
</defs>
<style>
.wheel-spin {
transform-box: fill-box;
transform-origin: center;
animation: spin 1.05s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.wave {
animation: waveMove 2.8s ease-in-out infinite alternate;
}
.wave2 { animation-duration: 3.6s; animation-delay: -1.1s; }
.wave3 { animation-duration: 4.4s; animation-delay: -2.3s; }
@keyframes waveMove {
from { transform: translateX(-14px); }
to { transform: translateX(14px); }
}
.foam {
animation: foamDrift 3.1s ease-in-out infinite alternate;
}
.pedal-crank {
animation: spin 1.05s linear infinite;
transform-box: fill-box;
transform-origin: 492px 472px;
}
.pelican-bob {
animation: pelicanBob 1.05s ease-in-out infinite;
transform-box: fill-box;
transform-origin: 470px 395px;
}
@keyframes pelicanBob {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-3.2px) rotate(0.7deg); }
}
</style>
<!-- ========== SKY ========== -->
<rect width="1100" height="650" fill="url(#skyGrad)"/>
<!-- Sun -->
<circle cx="870" cy="138" r="42" fill="#FFE066" opacity="0.95"/>
<circle cx="870" cy="138" r="55" fill="#FFE066" opacity="0.18"/>
<!-- Sparse high clouds -->
<g opacity="0.75">
<!-- Left cloud -->
<ellipse cx="165" cy="92" rx="48" ry="19" fill="#F8FBFF"/>
<ellipse cx="205" cy="84" rx="32" ry="15" fill="#F8FBFF"/>
<ellipse cx="138" cy="99" rx="23" ry="11" fill="#F8FBFF"/>
<!-- Right cloud -->
<ellipse cx="610" cy="71" rx="55" ry="16" fill="#F8FBFF"/>
<ellipse cx="660" cy="63" rx="29" ry="14" fill="#F8FBFF"/>
<ellipse cx="575" cy="79" rx="27" ry="12" fill="#F8FBFF"/>
</g>
<!-- ========== DISTANT SEA / HORIZON ========== -->
<rect x="0" y="248" width="1100" height="92" fill="url(#seaHaze)"/>
<!-- Very distant horizon haze line -->
<path d="M0 252 Q 280 248 520 255 Q 780 247 1100 254" fill="none" stroke="#005F8F" stroke-width="2.5" opacity="0.35"/>
<!-- ========== MID OCEAN + WAVES ========== -->
<g>
<!-- Base mid water -->
<path d="M0 270 Q 190 262 340 275 Q 510 265 680 277 Q 850 266 1100 274 L1100 355 L0 355 Z" fill="url(#waterMid)"/>
<!-- Wave bands -->
<g class="wave">
<path d="M0 282 Q 85 275 170 285 Q 255 277 345 286 Q 430 279 520 287 Q 605 278 700 286 Q 790 280 880 288 Q 965 279 1100 285" fill="none" stroke="#0077B6" stroke-width="3.5" opacity="0.5"/>
<path d="M0 296 Q 95 289 185 298 Q 275 291 370 299 Q 470 290 565 300 Q 660 292 755 299 Q 850 291 950 300 Q 1030 293 1100 298" fill="none" stroke="#0096C7" stroke-width="2.5" opacity="0.45"/>
</g>
<g class="wave wave2">
<path d="M-30 312 Q 60 305 145 314 Q 235 307 325 315 Q 415 306 510 316 Q 600 308 695 316 Q 790 307 880 315 Q 980 308 1100 314" fill="none" stroke="#00A8D9" stroke-width="4" opacity="0.4"/>
</g>
</g>
<!-- ========== NEAR SURF + FOAM ========== -->
<path d="M0 328 Q 140 320 260 333 Q 390 322 510 334 Q 635 325 760 335 Q 880 327 1010 336 Q 1080 329 1100 333 L1100 385 L0 385 Z" fill="url(#waterNear)"/>
<!-- Rolling surf crest lines -->
<g class="wave wave3" opacity="0.65">
<path d="M0 335 Q 120 327 235 338 Q 355 329 470 339 Q 590 330 705 340 Q 825 331 945 339 Q 1045 332 1100 337" fill="none" stroke="#B3E9F7" stroke-width="5" stroke-linecap="round"/>
</g>
<!-- Foam patches -->
<g class="foam" fill="#F6FBFD" opacity="0.85">
<ellipse cx="185" cy="345" rx="47" ry="8"/>
<ellipse cx="410" cy="351" rx="38" ry="7"/>
<ellipse cx="635" cy="343" rx="51" ry="9"/>
<ellipse cx="860" cy="349" rx="33" ry="6.5"/>
<ellipse cx="1015" cy="345" rx="29" ry="5.5"/>
</g>
<g fill="#F6FBFD" opacity="0.6">
<ellipse cx="270" cy="356" rx="22" ry="4"/>
<ellipse cx="530" cy="360" rx="27" ry="4.5"/>
<ellipse cx="770" cy="355" rx="19" ry="3.5"/>
</g>
<!-- ========== SAND ========== -->
<!-- Main dry sand -->
<path d="M0 370 Q 180 362 310 378 Q 480 365 620 380 Q 780 368 920 379 Q 1050 370 1100 375 L1100 650 L0 650 Z" fill="url(#sandGrad)"/>
<!-- Wet sand / waterline transition -->
<path d="M0 370 Q 180 362 310 378 Q 480 365 620 380 Q 780 368 920 379 Q 1050 370 1100 375 L1100 410 L0 410 Z" fill="url(#wetSand)" opacity="0.85"/>
<!-- Subtle sand texture / ripples -->
<g fill="none" stroke="#C9B67E" stroke-width="1.1" opacity="0.22">
<path d="M40 410 Q 110 405 195 415 Q 280 407 370 417"/>
<path d="M130 445 Q 210 438 295 448 Q 380 440 470 450"/>
<path d="M60 495 Q 155 487 250 498 Q 355 489 445 500"/>
<path d="M220 550 Q 310 542 405 553 Q 510 543 600 555"/>
<path d="M380 605 Q 470 597 565 607 Q 670 598 770 610"/>
</g>
<!-- Tire tracks + kicked sand behind rear wheel for motion -->
<g fill="none" stroke="#C1AC75" stroke-width="2.5" opacity="0.28" stroke-linecap="round">
<path d="M55 472 Q 150 468 235 475 Q 315 470 390 476"/>
<path d="M68 482 Q 158 478 248 485 Q 325 480 400 486"/>
</g>
<!-- Sand spray / rooster tail from rear tire -->
<g fill="#E8D5A3" opacity="0.55">
<ellipse cx="350" cy="485" rx="11" ry="3.5" transform="rotate(-12 350 485)"/>
<ellipse cx="332" cy="490" rx="7" ry="2.5" transform="rotate(-25 332 490)"/>
<ellipse cx="362" cy="493" rx="5" ry="1.8" transform="rotate(8 362 493)"/>
</g>
<!-- Small beach details: shell and pebble -->
<g>
<!-- Shell -->
<path d="M165 512 Q 175 502 189 511 Q 182 520 170 518 Z" fill="#E8D9B8" stroke="#C9B67E" stroke-width="1"/>
<path d="M172 509 Q 177 505 182 509" fill="none" stroke="#C9B67E" stroke-width="0.8"/>
<!-- Pebble -->
<ellipse cx="285" cy="538" rx="7" ry="4.5" fill="#A89E88" transform="rotate(-18 285 538)"/>
</g>
<!-- Beach grass tufts (right side) -->
<g fill="#8BA46F" opacity="0.65">
<path d="M935 380 Q 928 352 922 380 M940 381 Q 935 358 932 381 M948 380 Q 944 361 942 380"/>
<path d="M980 378 Q 974 348 968 379 M990 379 Q 984 355 980 379 M1005 378 Q 999 360 996 379"/>
<path d="M1028 381 Q 1022 350 1016 380 M1045 379 Q 1039 357 1035 380"/>
</g>
<!-- ========== BICYCLE ========== -->
<g id="bicycle" filter="url(#softShadow)">
<!-- Rear wheel -->
<g id="rear-wheel">
<!-- Tire -->
<circle cx="395" cy="475" r="58" fill="url(#tireGrad)" stroke="#0D0D0D" stroke-width="9"/>
<!-- Rim -->
<circle cx="395" cy="475" r="46" fill="none" stroke="#D8DDE3" stroke-width="5"/>
<circle cx="395" cy="475" r="38" fill="none" stroke="#A8B1BB" stroke-width="2.5"/>
<!-- Spokes -->
<g class="wheel-spin">
<g stroke="#C8D0D8" stroke-width="2.2" stroke-linecap="round">
<line x1="395" y1="475" x2="395" y2="420"/>
<line x1="395" y1="475" x2="395" y2="530"/>
<line x1="395" y1="475" x2="340" y2="475"/>
<line x1="395" y1="475" x2="450" y2="475"/>
<line x1="395" y1="475" x2="352" y2="432"/>
<line x1="395" y1="475" x2="438" y2="518"/>
<line x1="395" y1="475" x2="352" y2="518"/>
<line x1="395" y1="475" x2="438" y2="432"/>
<line x1="395" y1="475" x2="367" y2="443"/>
<line x1="395" y1="475" x2="423" y2="507"/>
<line x1="395" y1="475" x2="367" y2="507"/>
<line x1="395" y1="475" x2="423" y2="443"/>
</g>
</g>
<!-- Hub -->
<circle cx="395" cy="475" r="8" fill="#3A3F44"/>
<circle cx="395" cy="475" r="4.5" fill="#E8ECF0"/>
</g>
<!-- Front wheel -->
<g id="front-wheel">
<circle cx="662" cy="478" r="58" fill="url(#tireGrad)" stroke="#0D0D0D" stroke-width="9"/>
<circle cx="662" cy="478" r="46" fill="none" stroke="#D8DDE3" stroke-width="5"/>
<circle cx="662" cy="478" r="38" fill="none" stroke="#A8B1BB" stroke-width="2.5"/>
<g class="wheel-spin" style="animation-delay: -0.35s">
<g stroke="#C8D0D8" stroke-width="2.2" stroke-linecap="round">
<line x1="662" y1="478" x2="662" y2="423"/>
<line x1="662" y1="478" x2="662" y2="533"/>
<line x1="662" y1="478" x2="607" y2="478"/>
<line x1="662" y1="478" x2="717" y2="478"/>
<line x1="662" y1="478" x2="619" y2="435"/>
<line x1="662" y1="478" x2="705" y2="521"/>
<line x1="662" y1="478" x2="619" y2="521"/>
<line x1="662" y1="478" x2="705" y2="435"/>
<line x1="662" y1="478" x2="634" y2="446"/>
<line x1="662" y1="478" x2="690" y2="510"/>
<line x1="662" y1="478" x2="634" y2="510"/>
<line x1="662" y1="478" x2="690" y2="446"/>
</g>
</g>
<circle cx="662" cy="478" r="8" fill="#3A3F44"/>
<circle cx="662" cy="478" r="4.5" fill="#E8ECF0"/>
</g>
<!-- Frame -->
<!-- Chain stay + seat stay (rear triangle) -->
<path d="M410 440 Q 455 458 520 458" fill="none" stroke="url(#frameGrad)" stroke-width="11" stroke-linecap="round"/>
<path d="M410 440 Q 470 435 520 458" fill="none" stroke="url(#frameGrad)" stroke-width="10" stroke-linecap="round"/>
<!-- Down tube -->
<path d="M465 385 Q 498 432 520 458" fill="none" stroke="url(#frameGrad)" stroke-width="11" stroke-linecap="round"/>
<!-- Top tube -->
<path d="M465 385 Q 545 385 610 392" fill="none" stroke="url(#frameGrad)" stroke-width="11" stroke-linecap="round"/>
<!-- Seat tube -->
<path d="M520 458 Q 535 410 540 390" fill="none" stroke="url(#frameGrad)" stroke-width="10.5" stroke-linecap="round"/>
<!-- Head tube -->
<path d="M610 392 Q 625 410 635 428" fill="none" stroke="url(#frameGrad)" stroke-width="9" stroke-linecap="round"/>
<!-- Fork -->
<path d="M635 428 Q 648 455 662 478" fill="none" stroke="url(#frameGrad)" stroke-width="9" stroke-linecap="round"/>
<path d="M640 425 Q 653 455 665 473" fill="none" stroke="url(#frameGrad)" stroke-width="5" stroke-linecap="round"/>
<!-- Chainring + crank -->
<g class="pedal-crank">
<circle cx="492" cy="472" r="21" fill="none" stroke="#2C3035" stroke-width="4"/>
<circle cx="492" cy="472" r="12" fill="#2C3035"/>
<!-- Crank arms -->
<rect x="488" y="452" width="8" height="20" rx="1.5" fill="#2C3035" transform="rotate(-28 492 472)"/>
<rect x="488" y="472" width="8" height="20" rx="1.5" fill="#2C3035" transform="rotate(152 492 472)"/>
</g>
<!-- Pedals -->
<g class="pedal-crank" style="animation-delay:-0.48s">
<!-- Rear pedal -->
<g transform="rotate(-28 492 472) translate(0 -28)">
<rect x="475" y="445" width="34" height="7" rx="1.5" fill="#3A3F44"/>
<rect x="478" y="448" width="28" height="1.5" fill="#6F7985"/>
</g>
<!-- Front pedal -->
<g transform="rotate(152 492 472) translate(0 -28)">
<rect x="475" y="445" width="34" height="7" rx="1.5" fill="#3A3F44"/>
<rect x="478" y="448" width="28" height="1.5" fill="#6F7985"/>
</g>
</g>
<!-- Seat -->
<g>
<!-- Seat post -->
<rect x="527" y="385" width="7" height="28" rx="1" fill="#2C3035"/>
<!-- Seat base -->
<path d="M505 378 Q 535 372 575 380 Q 570 388 535 387 Z" fill="#2C3035"/>
<!-- Seat top cushion -->
<path d="M508 377 Q 535 372 570 379 Q 565 383 535 383 Z" fill="#1F2327"/>
</g>
<!-- Handlebars + stem -->
<g>
<!-- Stem -->
<path d="M610 392 Q 618 375 628 366" fill="none" stroke="url(#frameGrad)" stroke-width="7" stroke-linecap="round"/>
<!-- Handlebar stem clamp -->
<circle cx="628" cy="366" r="5" fill="#2C3035"/>
<!-- Handlebar -->
<path d="M595 360 Q 628 354 670 362" fill="none" stroke="url(#chromeGrad)" stroke-width="7" stroke-linecap="round"/>
<!-- Grips -->
<path d="M595 360 Q 585 358 578 363" fill="none" stroke="#3A2A1F" stroke-width="6" stroke-linecap="round"/>
<path d="M670 362 Q 680 360 687 366" fill="none" stroke="#3A2A1F" stroke-width="6" stroke-linecap="round"/>
<!-- Brake levers -->
<path d="M602 358 Q 595 372 600 380" fill="none" stroke="#444A50" stroke-width="3.5" stroke-linecap="round"/>
<path d="M662 365 Q 670 377 668 383" fill="none" stroke="#444A50" stroke-width="3.5" stroke-linecap="round"/>
</g>
<!-- Front fender / mudguard hint (beach cruiser vibe) -->
<path d="M635 428 Q 655 462 672 475" fill="none" stroke="#2C3035" stroke-width="5" stroke-linecap="round" opacity="0.6"/>
<!-- Basket on front (wicker feel) -->
<g>
<rect x="680" y="398" width="52" height="42" rx="3" fill="#C8A77A" stroke="#9C7F56" stroke-width="2"/>
<!-- Basket weave lines -->
<g stroke="#9C7F56" stroke-width="1" opacity="0.6">
<path d="M684 408 H 728"/>
<path d="M684 418 H 728"/>
<path d="M684 428 H 728"/>
<path d="M684 438 H 728"/>
<path d="M688 402 V 436"/>
<path d="M698 402 V 436"/>
<path d="M708 402 V 436"/>
<path d="M718 402 V 436"/>
<path d="M728 402 V 436"/>
</g>
<!-- Basket rim -->
<rect x="679" y="395" width="54" height="7" rx="2" fill="#B38F5E" stroke="#9C7F56" stroke-width="1"/>
</g>
<!-- Small fish in basket (fun detail) -->
<g>
<ellipse cx="705" cy="420" rx="13" ry="5.5" fill="#7EB8C9" transform="rotate(-12 705 420)"/>
<path d="M692 418 Q 688 415 690 422" fill="none" stroke="#5A8C9A" stroke-width="1.5"/>
<circle cx="714" cy="419" r="1.8" fill="#2C4A55"/>
</g>
</g>
<!-- ========== PELICAN ========== -->
<g id="pelican" class="pelican-bob" filter="url(#softShadow)">
<!-- Shadow on sand under bird (cast by body) -->
<ellipse cx="535" cy="485" rx="68" ry="11" fill="#000" opacity="0.13"/>
<!-- Tail feathers (layered) -->
<g fill="#EDEAE0">
<ellipse cx="388" cy="402" rx="28" ry="19" transform="rotate(-38 388 402)"/>
<ellipse cx="378" cy="410" rx="22" ry="14" transform="rotate(-28 378 410)"/>
<ellipse cx="395" cy="415" rx="19" ry="11" transform="rotate(-52 395 415)"/>
</g>
<!-- Main body (large, rounded) -->
<ellipse cx="470" cy="395" rx="78" ry="55" fill="url(#pelicanBody)" stroke="#D1CEC3" stroke-width="2"/>
<!-- Body feather layering / shading -->
<ellipse cx="452" cy="378" rx="48" ry="32" fill="#F4F3EE" opacity="0.55"/>
<ellipse cx="495" cy="412" rx="42" ry="25" fill="#DCD8CC" opacity="0.4"/>
<!-- Rear wing (folded, resting) -->
<g>
<path d="M415 370 Q 390 395 398 430 Q 430 445 455 425 Q 445 395 415 370" fill="url(#wingGrad)" stroke="#C2BEB0" stroke-width="1.5"/>
<!-- Wing feather lines -->
<g stroke="#BFB9A9" stroke-width="1.1" opacity="0.5">
<path d="M418 385 Q 402 400 410 420"/>
<path d="M425 378 Q 408 395 415 418"/>
<path d="M432 375 Q 418 393 423 415"/>
</g>
</g>
<!-- Neck (thick, S-curved for realism) -->
<path d="M530 355 Q 555 332 568 308 Q 575 285 555 268" fill="none" stroke="#E3E1D9" stroke-width="33" stroke-linecap="round"/>
<path d="M530 355 Q 555 332 568 308 Q 575 285 555 268" fill="none" stroke="#F1F0EC" stroke-width="18" stroke-linecap="round"/>
<!-- Neck feather texture -->
<path d="M535 345 Q 555 327 565 305" fill="none" stroke="#D6D4CA" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
<!-- Head -->
<ellipse cx="548" cy="258" rx="27" ry="22" fill="#F4F3EF" stroke="#D6D4CA" stroke-width="1.5"/>
<!-- Crown / head feathers -->
<path d="M530 248 Q 542 236 562 245" fill="none" stroke="#E8E6DF" stroke-width="5" stroke-linecap="round"/>
<!-- Beak upper mandible -->
<path d="M562 252 Q 612 243 645 260 Q 655 267 648 275 Q 605 265 565 262 Z" fill="url(#beakGrad)" stroke="#C96B22" stroke-width="1.5"/>
<!-- Beak ridge line -->
<path d="M562 252 Q 605 248 640 258" fill="none" stroke="#C96B22" stroke-width="1.2" opacity="0.7"/>
<!-- Lower mandible + iconic throat pouch -->
<path d="M562 262 Q 605 275 642 272 Q 652 280 640 290 Q 595 295 565 275 Z" fill="url(#pouchGrad)" stroke="#C96B22" stroke-width="1.5"/>
<!-- Pouch volume shading -->
<path d="M575 270 Q 605 285 630 280" fill="none" stroke="#E78F2E" stroke-width="8" stroke-linecap="round" opacity="0.35"/>
<!-- Pouch characteristic wrinkles / folds -->
<path d="M578 277 Q 598 282 620 279" fill="none" stroke="#C96B22" stroke-width="1" opacity="0.35"/>
<path d="M580 283 Q 600 286 618 283" fill="none" stroke="#C96B22" stroke-width="0.9" opacity="0.3"/>
<!-- Beak tip (nail / hook) -->
<path d="M643 260 Q 658 265 652 278" fill="none" stroke="#B85E1C" stroke-width="5" stroke-linecap="round"/>
<!-- Eye (vivid, alert expression) -->
<ellipse cx="560" cy="252" rx="9.5" ry="10" fill="#F8F8F5"/>
<!-- Iris (pale yellow) -->
<ellipse cx="562" cy="252" rx="6" ry="6.5" fill="#E8D45C"/>
<!-- Pupil -->
<ellipse cx="564.5" cy="252.5" rx="3" ry="3.5" fill="#1F1F1F"/>
<!-- Eye highlight (lively) -->
<ellipse cx="558.5" cy="249" rx="2.2" ry="1.6" fill="#FFFFFF" opacity="0.9"/>
<!-- Eyelid line for character -->
<path d="M552 249 Q 560 246 570 249" fill="none" stroke="#C2BEB0" stroke-width="1.2"/>
<!-- Front wing / "arm" gripping handlebar (dynamic) -->
<g>
<!-- Primary wing shape (extended forward) -->
<path d="M505 355 Q 545 340 590 352 Q 615 365 598 382 Q 555 375 515 365 Z" fill="url(#wingGrad)" stroke="#C2BEB0" stroke-width="1.5"/>
<!-- Layered primary feathers -->
<g stroke="#B8B3A2" stroke-width="1.4" opacity="0.6">
<path d="M515 362 Q 545 355 575 362"/>
<path d="M520 368 Q 552 362 582 368"/>
<path d="M528 374 Q 558 369 588 374"/>
</g>
<!-- Wing "wrist" / carpal area near grip -->
<ellipse cx="588" cy="365" rx="11" ry="7" fill="#D6D4CA" transform="rotate(-28 588 365)"/>
</g>
<!-- Pelican "hand" / primary feathers wrapped on grip -->
<g>
<path d="M575 358 Q 592 352 610 360" fill="none" stroke="#C2BEB0" stroke-width="7" stroke-linecap="round"/>
<path d="M578 362 Q 595 357 612 364" fill="none" stroke="#B8B3A2" stroke-width="3.5" stroke-linecap="round"/>
</g>
<!-- Legs (long, realistic, orange) -->
<!-- Left leg (rear on pedal) -->
<g>
<path d="M440 435 Q 455 455 475 468" fill="none" stroke="#E67E22" stroke-width="9" stroke-linecap="round"/>
<path d="M440 435 Q 455 455 475 468" fill="none" stroke="#F39C4A" stroke-width="4" stroke-linecap="round"/>
<!-- Knee joint hint -->
<circle cx="455" cy="455" r="4" fill="#D96D1A"/>
<!-- Webbed foot on rear pedal -->
<g transform="rotate(-22 475 468)">
<ellipse cx="476" cy="470" rx="12" ry="5" fill="#E67E22"/>
<path d="M465 468 L 488 468" fill="none" stroke="#D96D1A" stroke-width="1.8"/>
<path d="M468 472 L 485 472" fill="none" stroke="#D96D1A" stroke-width="1.4"/>
</g>
</g>
<!-- Right leg (forward on pedal) -->
<g>
<path d="M455 428 Q 472 448 495 462" fill="none" stroke="#E67E22" stroke-width="9" stroke-linecap="round"/>
<path d="M455 428 Q 472 448 495 462" fill="none" stroke="#F39C4A" stroke-width="4" stroke-linecap="round"/>
<circle cx="472" cy="448" r="4" fill="#D96D1A"/>
<!-- Webbed foot on front pedal -->
<g transform="rotate(18 495 462)">
<ellipse cx="497" cy="464" rx="12" ry="5" fill="#E67E22"/>
<path d="M486 462 L 509 462" fill="none" stroke="#D96D1A" stroke-width="1.8"/>
<path d="M489 466 L 506 466" fill="none" stroke="#D96D1A" stroke-width="1.4"/>
</g>
</g>
</g>
<!-- ========== FINAL ATMOSPHERIC TOUCHES ========== -->
<!-- Distant sailboat (tiny, for depth) -->
<g opacity="0.55">
<path d="M835 255 L 842 255 L 842 267 L 835 267 Z" fill="#E8F0F5"/>
<path d="M842 255 L 853 258 L 842 261 Z" fill="#F8FBFF"/>
<path d="M835 267 L 835 275" fill="none" stroke="#8AA3B5" stroke-width="1.2"/>
</g>
<!-- Light wind streaks / motion (near pelican head for speed feel) -->
<g stroke="#FFFFFF" stroke-width="1.3" stroke-linecap="round" opacity="0.12">
<line x1="510" y1="240" x2="555" y2="238"/>
<line x1="495" y1="245" x2="545" y2="243"/>
<line x1="515" y1="270" x2="565" y2="268"/>
</g>
<!-- Subtle sparkle on pouch and wet sand edge -->
<circle cx="612" cy="280" r="3" fill="#FFF7D6" opacity="0.5"/>
<circle cx="595" cy="288" r="1.8" fill="#FFF7D6" opacity="0.35"/>
<!-- A couple more distant wave glints -->
<g fill="#FFFFFF" opacity="0.18">
<ellipse cx="280" cy="270" rx="14" ry="2"/>
<ellipse cx="730" cy="265" rx="11" ry="1.6"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 25 KiB

+404
View File
@@ -0,0 +1,404 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 700" width="100%" height="100%">
<defs>
<!-- 天空渐变 -->
<linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#87CEEB"/>
<stop offset="50%" stop-color="#B0E0E6"/>
<stop offset="100%" stop-color="#F0F8FF"/>
</linearGradient>
<!-- 海洋渐变 -->
<linearGradient id="seaGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1E90FF"/>
<stop offset="40%" stop-color="#0066CC"/>
<stop offset="100%" stop-color="#003D7A"/>
</linearGradient>
<!-- 沙滩渐变 -->
<linearGradient id="sandGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#F4E4BC"/>
<stop offset="100%" stop-color="#DEB887"/>
</linearGradient>
<!-- 太阳渐变 -->
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFFACD"/>
<stop offset="40%" stop-color="#FFD700"/>
<stop offset="100%" stop-color="#FFA500" stop-opacity="0.8"/>
</radialGradient>
<!-- 鹈鹕羽毛渐变 -->
<linearGradient id="featherGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF"/>
<stop offset="50%" stop-color="#F0F0F0"/>
<stop offset="100%" stop-color="#D3D3D3"/>
</linearGradient>
<!-- 翅膀渐变 -->
<linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF"/>
<stop offset="60%" stop-color="#F5F5F5"/>
<stop offset="100%" stop-color="#708090"/>
</linearGradient>
<!-- 嘴巴渐变 -->
<linearGradient id="beakGrad" x1="0%" y1="0%" x2="100%" y2="50%">
<stop offset="0%" stop-color="#FFB347"/>
<stop offset="50%" stop-color="#FF8C00"/>
<stop offset="100%" stop-color="#FF6347"/>
</linearGradient>
<!-- 金属渐变 -->
<linearGradient id="metalGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#C0C0C0"/>
<stop offset="50%" stop-color="#808080"/>
<stop offset="100%" stop-color="#404040"/>
</linearGradient>
<!-- 太阳光晕 -->
<radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFD700" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#FFD700" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- 天空背景 -->
<rect width="1000" height="400" fill="url(#skyGrad)"/>
<!-- 太阳 -->
<circle cx="850" cy="100" r="120" fill="url(#sunGlow)"/>
<circle cx="850" cy="100" r="60" fill="url(#sunGrad)"/>
<!-- 云朵 -->
<g fill="#FFFFFF" opacity="0.8">
<ellipse cx="200" cy="80" rx="50" ry="25"/>
<ellipse cx="240" cy="90" rx="40" ry="20"/>
<ellipse cx="160" cy="90" rx="40" ry="20"/>
<ellipse cx="220" cy="65" rx="35" ry="20"/>
<ellipse cx="600" cy="120" rx="60" ry="30"/>
<ellipse cx="650" cy="135" rx="45" ry="22"/>
<ellipse cx="550" cy="135" rx="45" ry="22"/>
<ellipse cx="620" cy="100" rx="40" ry="25"/>
<ellipse cx="100" cy="180" rx="40" ry="20"/>
<ellipse cx="130" cy="190" rx="30" ry="15"/>
<ellipse cx="70" cy="190" rx="30" ry="15"/>
</g>
<!-- 海洋 -->
<rect y="350" width="1000" height="200" fill="url(#seaGrad)"/>
<!-- 海浪 -->
<g stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" opacity="0.6" fill="none">
<path d="M50,360 Q80,350 110,360 T170,360 T230,360"/>
<path d="M300,355 Q330,345 360,355 T420,355 T480,355"/>
<path d="M550,365 Q580,355 610,365 T670,365 T730,365"/>
<path d="M800,358 Q830,348 860,358 T920,358 T980,358"/>
<path d="M100,380 Q130,370 160,380 T220,380 T280,380"/>
<path d="M400,385 Q430,375 460,385 T520,385 T580,385"/>
<path d="M700,378 Q730,368 760,378 T820,378 T880,378"/>
<path d="M20,405 Q50,395 80,405 T140,405 T200,405"/>
<path d="M250,400 Q280,390 310,400 T370,400 T430,400"/>
<path d="M500,408 Q530,398 560,408 T620,408 T680,408"/>
<path d="M750,402 Q780,392 810,402 T870,402 T930,402"/>
</g>
<!-- 浪花泡沫 -->
<g fill="#FFFFFF" opacity="0.4">
<ellipse cx="150" cy="365" rx="20" ry="5"/>
<ellipse cx="450" cy="362" rx="15" ry="4"/>
<ellipse cx="750" cy="368" rx="18" ry="5"/>
<ellipse cx="350" cy="390" rx="22" ry="5"/>
<ellipse cx="650" cy="385" rx="16" ry="4"/>
<ellipse cx="200" cy="410" rx="25" ry="6"/>
<ellipse cx="550" cy="415" rx="20" ry="5"/>
<ellipse cx="850" cy="408" rx="18" ry="5"/>
</g>
<!-- 沙滩 -->
<path d="M0,480 Q250,460 500,470 T1000,450 L1000,700 L0,700 Z" fill="url(#sandGrad)"/>
<!-- 沙滩纹理 -->
<g stroke="#D2B48C" stroke-width="1" opacity="0.5" fill="none">
<path d="M100,520 Q150,515 200,520"/>
<path d="M300,540 Q350,535 400,540"/>
<path d="M600,510 Q650,505 700,510"/>
<path d="M800,560 Q850,555 900,560"/>
<path d="M50,580 Q100,575 150,580"/>
<path d="M450,590 Q500,585 550,590"/>
<path d="M700,600 Q750,595 800,600"/>
<path d="M250,620 Q300,615 350,620"/>
<path d="M550,640 Q600,635 650,640"/>
</g>
<!-- 贝壳装饰 -->
<g fill="#FFE4E1" stroke="#FFB6C1" stroke-width="0.5">
<ellipse cx="120" cy="550" rx="8" ry="5" transform="rotate(20 120 550)"/>
<path d="M112,550 Q120,545 128,550 Q120,555 112,550" fill="#FFF0F5"/>
<ellipse cx="880" cy="580" rx="10" ry="6" transform="rotate(-15 880 580)"/>
<path d="M870,580 Q880,574 890,580 Q880,586 870,580" fill="#FFF0F5"/>
<ellipse cx="350" cy="620" rx="6" ry="4" transform="rotate(45 350 620)"/>
<path d="M344,620 Q350,616 356,620 Q350,624 344,620" fill="#FFF0F5"/>
</g>
<!-- 远处的海鸟 -->
<g fill="none" stroke="#333333" stroke-width="1.5" stroke-linecap="round" opacity="0.5">
<path d="M300,200 Q310,190 320,200 Q330,190 340,200"/>
<path d="M380,180 Q385,175 390,180 Q395,175 400,180"/>
<path d="M250,220 Q255,215 260,220 Q265,215 270,220"/>
<path d="M450,150 Q455,145 460,150 Q465,145 470,150"/>
</g>
<!-- 鹈鹕阴影 -->
<ellipse cx="500" cy="615" rx="120" ry="20" fill="#000000" opacity="0.15"/>
<!-- === 自行车 === -->
<g id="bicycle">
<!-- 后轮 -->
<circle cx="400" cy="550" r="55" fill="none" stroke="#333333" stroke-width="4"/>
<circle cx="400" cy="550" r="50" fill="none" stroke="#666666" stroke-width="2"/>
<!-- 轮辐 -->
<g stroke="#999999" stroke-width="1" opacity="0.6">
<line x1="400" y1="500" x2="400" y2="600"/>
<line x1="350" y1="550" x2="450" y2="550"/>
<line x1="365" y1="515" x2="435" y2="585"/>
<line x1="435" y1="515" x2="365" y2="585"/>
<line x1="360" y1="530" x2="440" y2="570"/>
<line x1="440" y1="530" x2="360" y2="570"/>
<line x1="370" y1="508" x2="430" y2="592"/>
<line x1="430" y1="508" x2="370" y2="592"/>
</g>
<circle cx="400" cy="550" r="5" fill="#333333"/>
<!-- 前轮 -->
<circle cx="600" cy="550" r="55" fill="none" stroke="#333333" stroke-width="4"/>
<circle cx="600" cy="550" r="50" fill="none" stroke="#666666" stroke-width="2"/>
<!-- 轮辐 -->
<g stroke="#999999" stroke-width="1" opacity="0.6">
<line x1="600" y1="500" x2="600" y2="600"/>
<line x1="550" y1="550" x2="650" y2="550"/>
<line x1="565" y1="515" x2="635" y2="585"/>
<line x1="635" y1="515" x2="565" y2="585"/>
<line x1="560" y1="530" x2="640" y2="570"/>
<line x1="640" y1="530" x2="560" y2="570"/>
<line x1="570" y1="508" x2="630" y2="592"/>
<line x1="630" y1="508" x2="570" y2="592"/>
</g>
<circle cx="600" cy="550" r="5" fill="#333333"/>
<!-- 车架 -->
<g stroke-linecap="round" stroke-linejoin="round">
<!-- 下管 -->
<line x1="400" y1="550" x2="540" y2="450" stroke="#8B0000" stroke-width="6"/>
<!-- 上管 -->
<line x1="460" y1="450" x2="540" y2="450" stroke="#8B0000" stroke-width="5"/>
<!-- 立管 -->
<line x1="540" y1="450" x2="520" y2="550" stroke="#8B0000" stroke-width="5"/>
<!-- 后叉 -->
<line x1="400" y1="550" x2="460" y2="450" stroke="#8B0000" stroke-width="4"/>
<line x1="400" y1="550" x2="460" y2="450" stroke="#8B0000" stroke-width="4" transform="translate(0, -2)"/>
<!-- 前叉 -->
<line x1="600" y1="550" x2="580" y2="420" stroke="#333333" stroke-width="5"/>
<!-- 座管 -->
<line x1="460" y1="450" x2="450" y2="380" stroke="#8B0000" stroke-width="5"/>
</g>
<!-- 链条和齿轮 -->
<circle cx="400" cy="550" r="15" fill="none" stroke="#666666" stroke-width="2"/>
<circle cx="520" cy="510" r="8" fill="none" stroke="#666666" stroke-width="2"/>
<line x1="400" y1="550" x2="520" y2="510" stroke="#666666" stroke-width="2"/>
<line x1="400" y1="550" x2="520" y2="510" stroke="#666666" stroke-width="2" transform="translate(0, 15)"/>
<!-- 车座 -->
<ellipse cx="445" cy="375" rx="30" ry="8" fill="#2F4F4F"/>
<line x1="450" y1="380" x2="450" y2="400" stroke="#333333" stroke-width="4"/>
<!-- 车把 -->
<path d="M570,420 Q590,400 610,410" fill="none" stroke="#333333" stroke-width="5" stroke-linecap="round"/>
<circle cx="610" cy="410" r="4" fill="#333333"/>
<!-- 车铃 -->
<circle cx="585" cy="405" r="6" fill="url(#metalGrad)"/>
<line x1="585" y1="405" x2="580" y2="395" stroke="#999999" stroke-width="2"/>
</g>
<!-- === 鹈鹕 === -->
<g id="pelican">
<!-- 左腿(踩踏板) -->
<g id="left-leg">
<!-- 大腿 -->
<path d="M460,430 Q470,480 480,510" fill="none" stroke="#FF8C00" stroke-width="12" stroke-linecap="round"/>
<!-- 小腿 -->
<path d="M480,510 Q485,540 500,555" fill="none" stroke="#FF8C00" stroke-width="10" stroke-linecap="round"/>
<!-- 脚掌 -->
<path d="M490,555 Q510,565 520,555" fill="none" stroke="#FF6347" stroke-width="8" stroke-linecap="round"/>
<!-- 蹼爪 -->
<ellipse cx="510" cy="558" rx="8" ry="4" fill="#FF6347"/>
</g>
<!-- 右腿(在后面) -->
<g id="right-leg" opacity="0.7">
<path d="M470,430 Q480,470 470,500" fill="none" stroke="#E67E00" stroke-width="10" stroke-linecap="round"/>
<path d="M470,500 Q465,530 450,550" fill="none" stroke="#E67E00" stroke-width="8" stroke-linecap="round"/>
<path d="M445,550 Q430,560 420,550" fill="none" stroke="#E25822" stroke-width="6" stroke-linecap="round"/>
<ellipse cx="430" cy="553" rx="6" ry="3" fill="#E25822"/>
</g>
<!-- 尾巴 -->
<path d="M380,380 Q340,400 330,420 Q350,425 370,415 Q390,410 400,395 Z" fill="#708090"/>
<path d="M375,385 Q340,395 335,410" fill="none" stroke="#5A6A7A" stroke-width="1"/>
<!-- 身体主体 -->
<ellipse cx="460" cy="380" rx="75" ry="55" fill="url(#featherGrad)" transform="rotate(-10 460 380)"/>
<!-- 身体阴影和高光 -->
<ellipse cx="450" cy="390" rx="50" ry="35" fill="#E8E8E8" opacity="0.5" transform="rotate(-10 450 390)"/>
<ellipse cx="470" cy="365" rx="40" ry="25" fill="#FFFFFF" opacity="0.7" transform="rotate(-10 470 365)"/>
<!-- 胸部羽毛纹理 -->
<g stroke="#CCCCCC" stroke-width="1" fill="none" opacity="0.5">
<path d="M430,380 Q440,385 450,380"/>
<path d="M435,390 Q445,395 455,390"/>
<path d="M440,400 Q450,405 460,400"/>
<path d="M425,370 Q435,375 445,370"/>
</g>
<!-- 翅膀 -->
<g id="wing">
<!-- 翅膀主体 -->
<path d="M420,360 Q380,380 360,410 Q380,430 420,415 Q450,400 460,380 Z" fill="url(#wingGrad)"/>
<!-- 翅膀尖端深色羽毛 -->
<path d="M360,410 Q370,420 385,415 Q375,405 365,400 Q355,405 360,410 Z" fill="#4A5560"/>
<path d="M370,415 Q380,425 395,420 Q385,410 375,405 Q365,410 370,415 Z" fill="#4A5560"/>
<!-- 翅膀羽毛纹理 -->
<g stroke="#999999" stroke-width="0.8" fill="none" opacity="0.6">
<path d="M400,380 Q390,390 380,400"/>
<path d="M410,385 Q400,395 390,405"/>
<path d="M420,390 Q410,400 400,410"/>
<path d="M430,395 Q420,405 410,415"/>
</g>
</g>
<!-- 颈部 -->
<path d="M510,350 Q530,320 540,280 Q545,260 535,250" fill="none" stroke="url(#featherGrad)" stroke-width="28" stroke-linecap="round"/>
<!-- 颈部阴影 -->
<path d="M515,350 Q530,320 538,280" fill="none" stroke="#E0E0E0" stroke-width="20" stroke-linecap="round" opacity="0.5"/>
<!-- 头部 -->
<ellipse cx="535" cy="245" rx="35" ry="28" fill="url(#featherGrad)" transform="rotate(-15 535 245)"/>
<!-- 头部高光 -->
<ellipse cx="530" cy="235" rx="20" ry="15" fill="#FFFFFF" opacity="0.6" transform="rotate(-15 530 235)"/>
<!-- 头顶羽冠 -->
<path d="M520,225 Q515,210 525,205 Q530,215 535,222" fill="#F0F0F0" stroke="#CCCCCC" stroke-width="1"/>
<path d="M535,220 Q540,205 550,210 Q545,220 540,225" fill="#F0F0F0" stroke="#CCCCCC" stroke-width="1"/>
<!-- 眼睛 -->
<g id="eye">
<!-- 眼白 -->
<circle cx="545" cy="240" r="10" fill="#FFFFFF"/>
<!-- 虹膜 -->
<circle cx="548" cy="240" r="7" fill="#4A6741"/>
<!-- 瞳孔 -->
<circle cx="549" cy="240" r="4" fill="#000000"/>
<!-- 眼神光 -->
<circle cx="551" cy="238" r="2" fill="#FFFFFF"/>
<!-- 眉毛(表情) -->
<path d="M535,228 Q545,222 555,228" fill="none" stroke="#666666" stroke-width="2" stroke-linecap="round"/>
</g>
<!-- 面颊粉色 -->
<ellipse cx="555" cy="255" rx="12" ry="8" fill="#FFB6C1" opacity="0.4"/>
<!-- 喙 -->
<g id="beak">
<!-- 上喙 -->
<path d="M565,235 Q620,225 650,240 Q630,255 570,255 Z" fill="url(#beakGrad)"/>
<!-- 下喙 -->
<path d="M570,255 Q630,260 640,275 Q600,285 565,270 Z" fill="#FF8C00"/>
<!-- 喙的纹理 -->
<path d="M580,240 Q610,235 630,242" fill="none" stroke="#E67E00" stroke-width="1" opacity="0.5"/>
<path d="M585,250 Q615,245 635,252" fill="none" stroke="#E67E00" stroke-width="1" opacity="0.5"/>
<!-- 喙尖 -->
<path d="M640,240 Q660,245 665,255 Q650,265 635,270" fill="#FF6347" opacity="0.6"/>
</g>
<!-- 喉囊 -->
<ellipse cx="545" cy="285" rx="20" ry="25" fill="#FFB6C1" opacity="0.3"/>
<path d="M535,270 Q545,300 555,275" fill="none" stroke="#FF69B4" stroke-width="1" opacity="0.3"/>
<!-- === 翅膀动画层(展开的翅膀) === -->
<g id="wing-spread">
<!-- 主羽 -->
<path d="M440,360 Q380,320 340,330 Q360,350 390,360 Q420,370 440,375 Z" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1"/>
<!-- 副羽 -->
<path d="M440,360 Q390,340 360,355 Q380,370 410,375 Q430,375 440,370 Z" fill="#F5F5F5" stroke="#D3D3D3" stroke-width="1"/>
<!-- 飞羽(深色尖端) -->
<path d="M340,330 Q330,335 335,340 Q345,345 350,340 Z" fill="#4A5560"/>
<path d="M355,338 Q345,343 350,348 Q360,353 365,348 Z" fill="#4A5560"/>
<path d="M370,346 Q360,351 365,356 Q375,361 380,356 Z" fill="#4A5560"/>
<!-- 翅膀羽毛纹理 -->
<g stroke="#CCCCCC" stroke-width="0.8" fill="none">
<path d="M400,350 Q380,345 365,350"/>
<path d="M405,355 Q385,350 370,355"/>
<path d="M410,360 Q390,355 375,360"/>
</g>
</g>
<!-- 右翅膀(在身体后面,略小) -->
<g id="wing-right" opacity="0.6">
<path d="M450,370 Q410,390 380,400 Q400,415 430,405 Q450,395 455,385 Z" fill="#D3D3D3"/>
<path d="M380,400 Q370,405 375,410 Q385,415 390,410 Z" fill="#5A6A7A"/>
</g>
</g>
<!-- === 动态效果 === -->
<!-- 风吹动的羽毛 -->
<g stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" opacity="0.7">
<path d="M430,360 Q420,350 425,340"/>
<path d="M440,355 Q435,345 440,335"/>
<path d="M450,350 Q445,340 450,330"/>
</g>
<!-- 自行车踏板运动模糊 -->
<ellipse cx="500" cy="555" rx="15" ry="5" fill="#333333" opacity="0.2"/>
<!-- 速度线(地面) -->
<g stroke="#8B4513" stroke-width="2" stroke-linecap="round" opacity="0.2">
<line x1="200" y1="620" x2="280" y2="620"/>
<line x1="320" y1="640" x2="400" y2="640"/>
<line x1="700" y1="610" x2="800" y2="610"/>
<line x1="820" y1="650" x2="920" y2="650"/>
</g>
<!-- 沙滩上的轮胎痕迹 -->
<g stroke="#8B7355" stroke-width="3" stroke-linecap="round" opacity="0.3" fill="none">
<path d="M400,610 Q500,600 600,610"/>
<path d="M400,625 Q500,615 600,625"/>
</g>
<!-- 前景草丛 -->
<g fill="#228B22" opacity="0.8">
<path d="M50,650 Q55,620 60,650 Q65,610 70,650 Q75,625 80,650 Z"/>
<path d="M120,660 Q125,630 130,660 Q135,620 140,660 Q145,635 150,660 Z"/>
<path d="M900,640 Q905,610 910,640 Q915,600 920,640 Q925,615 930,640 Z"/>
<path d="M950,655 Q955,625 960,655 Q965,615 970,655 Q975,630 980,655 Z"/>
</g>
<!-- 阳光光束效果 -->
<g stroke="#FFD700" stroke-width="2" stroke-linecap="round" opacity="0.1">
<line x1="850" y1="100" x2="700" y2="300"/>
<line x1="850" y1="100" x2="600" y2="250"/>
<line x1="850" y1="100" x2="500" y2="400"/>
<line x1="850" y1="100" x2="800" y2="350"/>
</g>
<!-- 整体氛围光晕 -->
<rect width="1000" height="700" fill="url(#sunGlow)" opacity="0.05" pointer-events="none"/>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB

+460
View File
@@ -0,0 +1,460 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 560" width="900" height="560">
<title>Pelican Biking by the Sea</title>
<defs>
<!-- Sky gradient -->
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#1b3a6b"/>
<stop offset="0.45" stop-color="#4f8fc8"/>
<stop offset="0.78" stop-color="#f4c87a"/>
<stop offset="1" stop-color="#fbe2a8"/>
</linearGradient>
<!-- Sun -->
<radialGradient id="sun" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#fff6c8" stop-opacity="1"/>
<stop offset="0.45" stop-color="#ffd86b" stop-opacity="0.9"/>
<stop offset="1" stop-color="#ffb84d" stop-opacity="0"/>
</radialGradient>
<!-- Sea -->
<linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#2a6a8a"/>
<stop offset="0.4" stop-color="#3d8fb2"/>
<stop offset="1" stop-color="#7dc1d4"/>
</linearGradient>
<!-- Wet sand -->
<linearGradient id="sand" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#c9a26b"/>
<stop offset="0.5" stop-color="#e3c189"/>
<stop offset="1" stop-color="#f1d7a3"/>
</linearGradient>
<!-- Wave foam -->
<linearGradient id="foam" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.9"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0.4"/>
</linearGradient>
<!-- Pelican body -->
<linearGradient id="bodyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="0.6" stop-color="#ececec"/>
<stop offset="1" stop-color="#bcbcbc"/>
</linearGradient>
<!-- Pelican belly highlight -->
<radialGradient id="bellyHL" cx="0.45" cy="0.6" r="0.55">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.85"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<!-- Wing -->
<linearGradient id="wingGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#c9c9d6"/>
<stop offset="0.5" stop-color="#9c9caa"/>
<stop offset="1" stop-color="#5e5e72"/>
</linearGradient>
<!-- Beak top -->
<linearGradient id="beakTop" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffd07a"/>
<stop offset="0.5" stop-color="#f29a3c"/>
<stop offset="1" stop-color="#c96822"/>
</linearGradient>
<!-- Pouch -->
<linearGradient id="pouch" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffb46b"/>
<stop offset="0.5" stop-color="#e57a2a"/>
<stop offset="1" stop-color="#a14310"/>
</linearGradient>
<!-- Tire -->
<radialGradient id="tire" cx="0.5" cy="0.5" r="0.5">
<stop offset="0.55" stop-color="#2a2a2a"/>
<stop offset="0.78" stop-color="#1a1a1a"/>
<stop offset="1" stop-color="#0a0a0a"/>
</radialGradient>
<!-- Spoke rim -->
<radialGradient id="rim" cx="0.5" cy="0.5" r="0.5">
<stop offset="0.6" stop-color="#c8c8c8"/>
<stop offset="0.85" stop-color="#888"/>
<stop offset="1" stop-color="#555"/>
</radialGradient>
<!-- Frame -->
<linearGradient id="frame" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#e84a4a"/>
<stop offset="0.5" stop-color="#c81f1f"/>
<stop offset="1" stop-color="#7a0e0e"/>
</linearGradient>
<!-- Chrome highlight -->
<linearGradient id="chrome" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f5f5f5"/>
<stop offset="0.5" stop-color="#bdbdbd"/>
<stop offset="1" stop-color="#6e6e6e"/>
</linearGradient>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="3" result="off"/>
<feComponentTransfer><feFuncA type="linear" slope="0.45"/></feComponentTransfer>
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="blur1"><feGaussianBlur stdDeviation="1"/></filter>
<filter id="blur2"><feGaussianBlur stdDeviation="2.5"/></filter>
<!-- Vignette -->
<radialGradient id="vignette" cx="0.5" cy="0.55" r="0.75">
<stop offset="0.7" stop-color="#000" stop-opacity="0"/>
<stop offset="1" stop-color="#000" stop-opacity="0.35"/>
</radialGradient>
</defs>
<!-- ===== Sky ===== -->
<rect width="900" height="560" fill="url(#sky)"/>
<!-- Sun glow -->
<circle cx="720" cy="160" r="120" fill="url(#sun)"/>
<circle cx="720" cy="160" r="42" fill="#fff7d6"/>
<!-- Distant clouds -->
<g opacity="0.85" filter="url(#blur1)">
<ellipse cx="120" cy="120" rx="60" ry="10" fill="#ffd9a3"/>
<ellipse cx="180" cy="135" rx="80" ry="8" fill="#ffe6b8"/>
<ellipse cx="430" cy="95" rx="70" ry="9" fill="#ffd9a3"/>
<ellipse cx="540" cy="115" rx="55" ry="7" fill="#ffe6b8"/>
<ellipse cx="860" cy="220" rx="70" ry="9" fill="#ffd1a0"/>
</g>
<!-- Birds in the distance -->
<g fill="none" stroke="#3a2a1a" stroke-width="2" stroke-linecap="round" opacity="0.7">
<path d="M150180 q8 -8160 q8 -8160"/>
<path d="M260200 q6 -6120 q6 -6120"/>
<path d="M620210 q7 -7140 q7 -7140"/>
</g>
<!-- ===== Sea ===== -->
<rect y="300" width="900" height="160" fill="url(#sea)"/>
<!-- Sun reflection on sea -->
<g opacity="0.7">
<ellipse cx="720" cy="320" rx="90" ry="6" fill="#fff3c2"/>
<ellipse cx="720" cy="340" rx="70" ry="5" fill="#ffe28a"/>
<ellipse cx="720" cy="360" rx="55" ry="4" fill="#ffd06b"/>
<ellipse cx="720" cy="380" rx="40" ry="3" fill="#ffbe4d"/>
</g>
<!-- Wave shimmer lines -->
<g stroke="#ffffff" stroke-linecap="round" fill="none" opacity="0.55">
<path d="M40320 q20 -3400 t400 t400" stroke-width="1.5"/>
<path d="M180340 q25 -4500 t500 t500" stroke-width="1.2"/>
<path d="M0360 q30 -3600 t600" stroke-width="1.4"/>
<path d="M380350 q20 -3400 t400 t400" stroke-width="1.2"/>
<path d="M540365 q25 -4500 t500" stroke-width="1.3"/>
<path d="M70395 q30 -3600 t600 t600" stroke-width="1.5"/>
<path d="M310410 q25 -3500 t500" stroke-width="1.2"/>
<path d="M520415 q30 -4600 t600" stroke-width="1.3"/>
</g>
<!-- Foam on shoreline -->
<path d="M0440 Q100425200438 T400437 T600438 T900436 L900460 L0460 Z" fill="url(#foam)" opacity="0.85"/>
<g fill="#ffffff" opacity="0.85">
<ellipse cx="80" cy="438" rx="22" ry="3.5"/>
<ellipse cx="230" cy="436" rx="28" ry="3"/>
<ellipse cx="400" cy="437" rx="24" ry="3"/>
<ellipse cx="560" cy="438" rx="30" ry="3.2"/>
<ellipse cx="740" cy="436" rx="22" ry="3"/>
</g>
<!-- ===== Sand ===== -->
<rect y="440" width="900" height="120" fill="url(#sand)"/>
<!-- Sand ripples -->
<g stroke="#a8854f" stroke-linecap="round" fill="none" opacity="0.45">
<path d="M40470 q40 -3800 t800" stroke-width="1.4"/>
<path d="M260485 q50 -31000 t1000" stroke-width="1.2"/>
<path d="M520478 q45 -3900 t900" stroke-width="1.3"/>
<path d="M60510 q50 -31000 t1000" stroke-width="1.2"/>
<path d="M340525 q60 -31200 t1200" stroke-width="1.4"/>
<path d="M620518 q40 -3800 t800" stroke-width="1.2"/>
</g>
<!-- Small pebbles -->
<g fill="#7a5a30" opacity="0.7">
<ellipse cx="80" cy="545" rx="4" ry="2"/>
<ellipse cx="150" cy="552" rx="3" ry="1.6"/>
<ellipse cx="290" cy="548" rx="3.5" ry="1.8"/>
<ellipse cx="510" cy="552" rx="4" ry="2"/>
<ellipse cx="700" cy="546" rx="3" ry="1.5"/>
<ellipse cx="820" cy="554" rx="3.5" ry="1.7"/>
</g>
<!-- Distant sailboat -->
<g opacity="0.85">
<path d="M260350 L260365 L290365 Z" fill="#3a2a1a"/>
<path d="M260320 L260350 L278348 Z" fill="#ffffff"/>
<path d="M260322 L260350 L245350 Z" fill="#fff4d6"/>
<ellipse cx="275" cy="365" rx="22" ry="3" fill="#2a1a0a"/>
</g>
<!-- Seagull on sand -->
<g transform="translate(120525)">
<ellipse cx="0" cy="0" rx="14" ry="6" fill="#ffffff"/>
<ellipse cx="-10" cy="-2" rx="9" ry="7" fill="#ffffff"/>
<path d="M-16 -2 l-7 -3 l44 z" fill="#f4a020"/>
<circle cx="-12" cy="-3" r="1.2" fill="#000"/>
<path d="M2 -1 q10 -3184 q-8 -2 -160 z" fill="#dcdcdc"/>
<path d="M-24 l-14 M24 l-14 M64 l-14" stroke="#f4a020" stroke-width="1.2"/>
</g>
<!-- ===== Bicycle ===== -->
<g filter="url(#softShadow)">
<!-- back wheel -->
<g transform="translate(360470)">
<circle r="48" fill="url(#tire)"/>
<circle r="44" fill="none" stroke="#000" stroke-width="0.6" opacity="0.4"/>
<circle r="38" fill="url(#rim)"/>
<circle r="36" fill="none" stroke="#666" stroke-width="0.6"/>
<!-- spokes -->
<g stroke="#cfcfcf" stroke-width="1">
<line x1="0" y1="-34" x2="0" y2="34"/>
<line x1="-34" y1="0" x2="34" y2="0"/>
<line x1="-24" y1="-24" x2="24" y2="24"/>
<line x1="-24" y1="24" x2="24" y2="-24"/>
<line x1="-14" y1="-31" x2="14" y2="31"/>
<line x1="14" y1="-31" x2="-14" y2="31"/>
<line x1="-31" y1="-14" x2="31" y2="14"/>
<line x1="31" y1="-14" x2="-31" y2="14"/>
</g>
<circle r="6" fill="#444"/>
<circle r="2.5" fill="#222"/>
</g>
<!-- front wheel -->
<g transform="translate(560470)">
<circle r="48" fill="url(#tire)"/>
<circle r="44" fill="none" stroke="#000" stroke-width="0.6" opacity="0.4"/>
<circle r="38" fill="url(#rim)"/>
<circle r="36" fill="none" stroke="#666" stroke-width="0.6"/>
<g stroke="#cfcfcf" stroke-width="1">
<line x1="0" y1="-34" x2="0" y2="34"/>
<line x1="-34" y1="0" x2="34" y2="0"/>
<line x1="-24" y1="-24" x2="24" y2="24"/>
<line x1="-24" y1="24" x2="24" y2="-24"/>
<line x1="-14" y1="-31" x2="14" y2="31"/>
<line x1="14" y1="-31" x2="-14" y2="31"/>
<line x1="-31" y1="-14" x2="31" y2="14"/>
<line x1="31" y1="-14" x2="-31" y2="14"/>
</g>
<circle r="6" fill="#444"/>
<circle r="2.5" fill="#222"/>
</g>
<!-- Frame: top tube, down tube, seat tube, chain stay -->
<g fill="none" stroke="url(#frame)" stroke-width="11" stroke-linecap="round" stroke-linejoin="round">
<!-- seat tube (pedals to saddle) -->
<line x1="430" y1="470" x2="455" y2="380"/>
<!-- down tube (saddle area to front fork) -->
<line x1="455" y1="380" x2="540" y2="430"/>
<!-- top tube (handlebars to saddle) -->
<line x1="455" y1="380" x2="540" y2="380"/>
<!-- chain stay (pedals to back wheel) -->
<line x1="430" y1="470" x2="360" y2="470"/>
<!-- seat stay (saddle to back wheel) -->
<line x1="455" y1="380" x2="360" y2="470"/>
<!-- front fork -->
<line x1="540" y1="430" x2="560" y2="470"/>
<!-- head tube short -->
<line x1="540" y1="430" x2="540" y2="380"/>
</g>
<!-- Frame highlights -->
<g fill="none" stroke="#ff8a8a" stroke-width="2" stroke-linecap="round" opacity="0.55">
<line x1="455" y1="383" x2="540" y2="383"/>
<line x1="431" y1="468" x2="455" y2="383"/>
<line x1="431" y1="468" x2="362" y2="468"/>
</g>
<!-- Pedals / crank -->
<g>
<circle cx="430" cy="470" r="11" fill="url(#chrome)" stroke="#333" stroke-width="1.2"/>
<circle cx="430" cy="470" r="4" fill="#222"/>
<!-- Pedal arm + pedal -->
<line x1="430" y1="470" x2="412" y2="486" stroke="#2a2a2a" stroke-width="3" stroke-linecap="round"/>
<rect x="402" y="482" width="22" height="8" rx="2" fill="#1a1a1a"/>
<rect x="402" y="482" width="22" height="2.5" rx="1" fill="#3a3a3a"/>
</g>
<!-- Chain -->
<path d="M430470 q-35 -2 -700" stroke="#333" stroke-width="2.4" fill="none"/>
<path d="M430470 q-35 -2 -700" stroke="#888" stroke-width="0.8" fill="none" stroke-dasharray="22"/>
<!-- Seat -->
<g>
<path d="M442374 q15 -830 -2 q-26 -87 q-122 -22 -5 z" fill="#1a1a1a"/>
<path d="M444372 q13 -626 -2 q-24 -75 q-112 -19 -3 z" fill="#3a3a3a"/>
</g>
<!-- Handlebars + stem -->
<g>
<line x1="540" y1="380" x2="540" y2="365" stroke="url(#chrome)" stroke-width="6" stroke-linecap="round"/>
<path d="M510360 q30 -10600" stroke="url(#chrome)" stroke-width="6" fill="none" stroke-linecap="round"/>
<path d="M508362 q-84 -1414" stroke="url(#chrome)" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M572362 q841414" stroke="url(#chrome)" stroke-width="5" fill="none" stroke-linecap="round"/>
<!-- grips -->
<ellipse cx="494" cy="376" rx="6" ry="4" fill="#222" transform="rotate(-30494376)"/>
<ellipse cx="586" cy="376" rx="6" ry="4" fill="#222" transform="rotate(30586376)"/>
</g>
<!-- Shadow on sand -->
<ellipse cx="460" cy="528" rx="170" ry="10" fill="#000" opacity="0.18"/>
</g>
<!-- ===== Pelican ===== -->
<g filter="url(#softShadow)">
<!-- tail feathers (behind body) -->
<g>
<path d="M310405 q-40 -10 -55 -2 q156308 q15225 -2 z" fill="#bfbfd0"/>
<path d="M310408 q-35 -4 -504 q144284 q13022 -4 z" fill="#a0a0b6"/>
<path d="M315415 q-306 -4014 q12024 -2 q12 -216 -8 z" fill="#7d7d96"/>
</g>
<!-- Body -->
<path d="M310410
q-10 -5550 -75
q70 -221300
q55226070
q435 -2555
q-4528 -11022
q-70 -6 -95 -28
q-15 -15 -10 -44 z" fill="url(#bodyGrad)"/>
<!-- Belly highlight -->
<ellipse cx="385" cy="455" rx="90" ry="35" fill="url(#bellyHL)"/>
<!-- Body subtle feather lines -->
<g fill="none" stroke="#c9c9c9" stroke-width="0.8" opacity="0.7">
<path d="M335410 q1583010"/>
<path d="M360420 q1583010"/>
<path d="M395428 q156308"/>
<path d="M430432 q154284"/>
<path d="M465430 q122240"/>
</g>
<!-- Left wing (back) -->
<path d="M395360
q-40 -20 -90 -10
q-4010 -5040
q-6221838
q402611014
q35 -650 -22
q-15 -25 -38 -60 z" fill="url(#wingGrad)"/>
<!-- Wing feather lines -->
<g fill="none" stroke="#4a4a60" stroke-width="1" opacity="0.65">
<path d="M310400 q206506"/>
<path d="M300415 q258606"/>
<path d="M295430 q308654"/>
<path d="M308445 q306600"/>
<path d="M335455 q25455 -2"/>
</g>
<!-- Wing tip feathers -->
<g fill="#3a3a4a">
<path d="M260405 q-12 -2 -226 q104222 z"/>
<path d="M258425 q-140 -248 q124240 z"/>
<path d="M270445 q-144 -2212 q12222 -2 z"/>
</g>
<!-- Neck -->
<path d="M495350
q20 -3055 -28
q4025528
q-1032 -4538
q-508 -75 -10
q-5 -1510 -28 z" fill="url(#bodyGrad)"/>
<g fill="none" stroke="#cfcfcf" stroke-width="0.7" opacity="0.7">
<path d="M510340 q20 -645 -2"/>
<path d="M510355 q20 -4500"/>
<path d="M510370 q20 -2504"/>
</g>
<!-- Head -->
<g>
<ellipse cx="600" cy="312" rx="42" ry="36" fill="url(#bodyGrad)"/>
<!-- head crest tuft -->
<path d="M608282 q4 -1814 -22 q-214 -624 z" fill="#e6e6f0"/>
<path d="M615282 q6 -1414 -16 q-212 -820 z" fill="#d4d4e0"/>
<!-- small wisps -->
<path d="M580290 q-6 -6 -10 -4 q4486 z" fill="#cfcfdc"/>
<!-- Eye -->
<circle cx="612" cy="306" r="6" fill="#fff"/>
<circle cx="613" cy="307" r="4.5" fill="#7a4a18"/>
<circle cx="614" cy="306" r="2.2" fill="#1a0a00"/>
<circle cx="615.2" cy="305" r="0.9" fill="#ffffff"/>
<!-- eye ring -->
<circle cx="612" cy="306" r="6" fill="none" stroke="#a08868" stroke-width="1"/>
<!-- brow -->
<path d="M604297 q8 -316 -1" stroke="#9a9aa6" stroke-width="1.2" fill="none" stroke-linecap="round"/>
</g>
<!-- Beak: upper -->
<path d="M632318
q70 -2958
q156616
q-128 -5010
q-502 -65 -8
q-12 -814 -26 z" fill="url(#beakTop)"/>
<!-- Beak hook tip -->
<path d="M725326 q14 -2184 q-48 -166 q-6 -1 -2 -10 z" fill="#a8540c"/>
<!-- Beak ridge highlight -->
<path d="M640320 q60 -4906" stroke="#ffe1a8" stroke-width="1.5" fill="none" opacity="0.85"/>
<!-- Nostril -->
<ellipse cx="660" cy="328" rx="2" ry="1.2" fill="#5a2a08"/>
<!-- Pouch (lower beak) -->
<path d="M632336
q15405050
q40865 -4
q-2 -10 -16 -14
q-50 -10 -82 -16
q-15 -4 -17 -16 z" fill="url(#pouch)"/>
<!-- Pouch shading -->
<path d="M650348 q30146518" stroke="#7a3008" stroke-width="1.2" fill="none" opacity="0.6"/>
<path d="M660360 q25105514" stroke="#7a3008" stroke-width="1" fill="none" opacity="0.5"/>
</g>
<!-- Legs / feet on pedals -->
<g filter="url(#softShadow)">
<!-- Right leg forward to pedal -->
<path d="M430432 q-618 -836" stroke="url(#beakTop)" stroke-width="9" fill="none" stroke-linecap="round"/>
<!-- foot on near pedal (at412,486) -->
<g transform="translate(412486)">
<ellipse cx="0" cy="0" rx="9" ry="4" fill="#f29a3c"/>
<path d="M-62 q-34 -16 M-22 q-2406 M22 q-1416 M62 q0425" stroke="#c96822" stroke-width="1.4" fill="none" stroke-linecap="round"/>
</g>
<!-- Left leg slightly back (resting foot) -->
<path d="M470432 q10181830" stroke="url(#beakTop)" stroke-width="9" fill="none" stroke-linecap="round" opacity="0.95"/>
<g transform="translate(488462)">
<ellipse cx="0" cy="0" rx="8" ry="3.5" fill="#f29a3c" opacity="0.9"/>
<path d="M-51 q-23 -15 M-11 q-1305 M31 q0315" stroke="#c96822" stroke-width="1.2" fill="none" stroke-linecap="round" opacity="0.9"/>
</g>
</g>
<!-- Motion lines / wind -->
<g stroke="#ffffff" stroke-linecap="round" fill="none" opacity="0.7">
<path d="M180380 q30 -4600" stroke-width="1.6"/>
<path d="M150405 q40 -4800" stroke-width="1.4"/>
<path d="M210430 q25 -3500" stroke-width="1.2"/>
</g>
<!-- Splash dots behind bike -->
<g fill="#ffffff" opacity="0.85">
<circle cx="320" cy="500" r="2"/>
<circle cx="305" cy="510" r="1.5"/>
<circle cx="335" cy="515" r="2.2"/>
<circle cx="290" cy="525" r="1.4"/>
<circle cx="345" cy="525" r="1.6"/>
</g>
<!-- Foreground grass tufts -->
<g stroke="#7a8a3a" stroke-width="2" fill="none" stroke-linecap="round">
<path d="M40540 q3 -106 -14 M44540 q-1 -81 -12 M48540 q3 -97 -12"/>
<path d="M820545 q3 -106 -14 M824545 q-1 -81 -12 M828545 q3 -97 -12"/>
<path d="M640552 q2 -85 -11 M644552 q0 -62 -10"/>
</g>
<!-- Subtle vignette -->
<rect width="900" height="560" fill="url(#vignette)" pointer-events="none"/>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB