A combination can now ship multiple versions of the same case: runs.<case-id> accepts an array, each extra variant naming its own file; the viewer grows a RUN 01/02 switcher and validation enforces distinct files plus a provenance note per variant. Integrated content, attributed to their authors: - Gemini 3.1 Pro + 3.5 Flash pelican runs from both PRs, shown as two variants each (PR #2's Google AI Studio runs first, PR #3's second) - Doubao Seed 2.0 Pro / Mini pelican runs (folders renamed to the dash-only convention) - GPT-5.5 Codex pelican run Co-authored-by: lpluma <liuyz2023@mails.jlu.edu.cn> Co-authored-by: XA2333 <97206278+XA2333@users.noreply.github.com>
No files matched your search
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"label": "Claude Fable 5",
|
||||
"vendor": "Anthropic",
|
||||
"harness": "Claude Web App",
|
||||
"effort": "Max",
|
||||
"order": 10,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"label": "Composer 2.5",
|
||||
"vendor": "Cursor",
|
||||
"harness": "Cursor",
|
||||
"effort": "Max",
|
||||
"order": 70,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"label": "DeepSeek-V4-Pro",
|
||||
"vendor": "DeepSeek",
|
||||
"harness": "Claude Code",
|
||||
"effort": "Max",
|
||||
"order": 90,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"label": "Doubao Seed 2.0 Mini",
|
||||
"vendor": "ByteDance",
|
||||
"harness": "Doubao Web",
|
||||
"effort": "Fast Mode",
|
||||
"order": 96,
|
||||
"runs": {
|
||||
"pelican-cycling": {
|
||||
"note": {
|
||||
"zh": "在豆包网页版以快速模式一次生成。\n\n「要不要我再给你做一个带简单动画(翅膀扇动、车轮转动)的增强版 SVG 代码?」",
|
||||
"en": "Generated in one shot on Doubao web app in Lite mode.\n\n\"Should I make you an enhanced version of the SVG code with simple animations (flapping wings, rotating wheels)?\""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"label": "Doubao Seed 2.0 Pro",
|
||||
"vendor": "ByteDance",
|
||||
"harness": "Doubao Web",
|
||||
"effort": "Pro Mode",
|
||||
"order": 95,
|
||||
"runs": {
|
||||
"pelican-cycling": {
|
||||
"note": {
|
||||
"zh": "使用豆包网页版超能模式,首次输出了 png 图片,经提醒后生成 svg 代码。",
|
||||
"en": "Using Doubao web app (Pro mode), it initially output a PNG image, then generated the SVG code after being reminded."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"label": "Gemini 3.1 Pro",
|
||||
"vendor": "Google",
|
||||
"harness": "AntiGravity",
|
||||
"effort": "High",
|
||||
"order": 40,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
@@ -8,6 +10,21 @@
|
||||
"zh": "通过 AntiGravity 生成(thinking effort: high);一次生成,未发现需要修复的问题,原样展示。",
|
||||
"en": "Generated via AntiGravity (thinking effort: high); one shot, no fixes needed — shown as-is."
|
||||
}
|
||||
}
|
||||
},
|
||||
"pelican-cycling": [
|
||||
{
|
||||
"note": {
|
||||
"zh": "在 Google AI Studio 以 Gemini 3.1 Pro Preview High(最高思考强度)一次生成。",
|
||||
"en": "Generated in Google AI Studio on Gemini 3.1 Pro Preview High (max thinking effort) in one shot."
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "pelican-cycling-2.svg",
|
||||
"note": {
|
||||
"zh": "由社区 PR #3(Codex 工作流)提交,提交者未注明运行环境与思考档位。",
|
||||
"en": "Contributed via community PR #3 (a Codex workflow); the submitter did not specify the runtime or effort level."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"label": "Gemini 3.5 Flash",
|
||||
"vendor": "Google",
|
||||
"harness": "AntiGravity",
|
||||
"effort": "High",
|
||||
"order": 50,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
@@ -8,6 +10,21 @@
|
||||
"zh": "通过 AntiGravity 生成(thinking effort: high);本页为修复版(仅改 1 行)。问题:16 张贴图按「上为原点」的行序画进 4×4 图集,UV 坐标表也按同一行序编写,但 CanvasTexture 默认 flipY=true 把采样行上下镜像(第 r 行实际采到第 3-r 行)。修复前:草地顶面显示成紫水晶、侧面采到带透明孔洞的传送门/树叶贴图,配合 alphaTest 出现大量「透明方块」,放置的方块贴图与名称完全对不上。原因:flipY 与图集行序约定不一致。加上 flipY=false 后行序对齐,地形与方块全部正常。",
|
||||
"en": "Generated via AntiGravity (thinking effort: high); fixed build (1 line changed). Bug: 16 tiles drawn into a 4x4 atlas with top-origin rows, and the UV table uses the same convention, but CanvasTexture's default flipY=true mirrors the rows on sampling (row r actually reads row 3-r). Before the fix: grass tops rendered as purple crystal, sides sampled the portal/leaves tiles with alpha holes — hence the many \"transparent blocks\" — and placed blocks never matched their names. Cause: flipY disagreeing with the atlas row convention. With flipY=false everything lines up."
|
||||
}
|
||||
}
|
||||
},
|
||||
"pelican-cycling": [
|
||||
{
|
||||
"note": {
|
||||
"zh": "在 Google AI Studio 以 Gemini 3.5 Flash High(最高思考强度)一次生成。",
|
||||
"en": "Generated in Google AI Studio on Gemini 3.5 Flash High (max thinking effort) in one shot."
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "pelican-cycling-2.svg",
|
||||
"note": {
|
||||
"zh": "由社区 PR #3(Codex 工作流)提交,提交者未注明运行环境与思考档位。",
|
||||
"en": "Contributed via community PR #3 (a Codex workflow); the submitter did not specify the runtime or effort level."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"label": "GPT-5.5 Pro",
|
||||
"vendor": "OpenAI",
|
||||
"harness": "ChatGPT Web",
|
||||
"effort": "Extended Pro",
|
||||
"order": 20,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"label": "GPT-5.5 xhigh",
|
||||
"label": "GPT-5.5 Codex",
|
||||
"vendor": "OpenAI",
|
||||
"harness": "Codex CLI",
|
||||
"effort": "xhigh",
|
||||
"order": 30,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
@@ -8,6 +10,12 @@
|
||||
"zh": "全程在 Codex CLI 中生成(未使用任何 skill);本页为修复版(仅改 1 行)。问题:移动向量的 Z 分量整体差一个负号(第 979 行,正确应为 -strafe*sin - forward*cos)。修复前:运动被沿 X 轴镜像——面朝 ±X 方向时按 A/D 左右颠倒,面朝 ±Z 时 W/S 前后颠倒,体感「左右移动方向不对」。原因:Three.js 相机在 yaw=0 时朝 -Z,推导前进/侧移向量时把这个约定弄反了。给 Z 分量取负后,任意朝向下八方向移动全部正确。",
|
||||
"en": "Generated entirely in Codex CLI (no skills); fixed build (1 line changed). Bug: the movement vector's Z component had its sign flipped (line 979; correct form is -strafe*sin - forward*cos). Before the fix movement was mirrored across the X axis — A/D swapped when facing +-X, W/S swapped when facing +-Z, i.e. \"strafing goes the wrong way\". Cause: a Three.js camera faces -Z at yaw 0, and the forward/right derivation inverted that convention. Negating Z makes all eight directions correct at any heading."
|
||||
}
|
||||
},
|
||||
"pelican-cycling": {
|
||||
"note": {
|
||||
"zh": "由社区 PR #3(Codex 工作流)提交,提交者未注明运行环境与思考档位。",
|
||||
"en": "Contributed via community PR #3 (a Codex workflow); the submitter did not specify the runtime or effort level."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"label": "Grok Build",
|
||||
"vendor": "xAI",
|
||||
"harness": "Grok Build TUI",
|
||||
"effort": "Max",
|
||||
"order": 60,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
<svg width="800" height="500" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 渐变定义 -->
|
||||
<defs>
|
||||
<!-- 天空渐变 -->
|
||||
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="0.4">
|
||||
<stop offset="0%" stop-color="#87CEEB"/>
|
||||
<stop offset="100%" stop-color="#B0E0E6"/>
|
||||
</linearGradient>
|
||||
<!-- 海水渐变 -->
|
||||
<linearGradient id="seaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#4682B4"/>
|
||||
<stop offset="100%" stop-color="#1E90FF"/>
|
||||
</linearGradient>
|
||||
<!-- 沙滩渐变 -->
|
||||
<linearGradient id="sandGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#F5DEB3"/>
|
||||
<stop offset="100%" stop-color="#DEB887"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 背景-天空 -->
|
||||
<rect width="800" height="200" fill="url(#skyGrad)"/>
|
||||
|
||||
<!-- 远景海浪/海平面 -->
|
||||
<path d="M0 180 Q200 170 400 185 T800 180 L800 220 L0 220 Z" fill="url(#seaGrad)" opacity="0.8"/>
|
||||
|
||||
<!-- 中景海面 -->
|
||||
<path d="M0 220 Q150 210 300 225 T600 218 T800 222 L800 320 L0 320 Z" fill="url(#seaGrad)"/>
|
||||
|
||||
<!-- 沙滩地面 -->
|
||||
<path d="M0 320 L800 320 L800 500 L0 500 Z" fill="url(#sandGrad)"/>
|
||||
|
||||
<!-- 海浪波纹 -->
|
||||
<path d="M20 290 Q40 285 60 292" stroke="#ADD8E6" stroke-width="2" fill="none"/>
|
||||
<path d="M120 288 Q140 282 160 290" stroke="#ADD8E6" stroke-width="2" fill="none"/>
|
||||
<path d="M350 295 Q370 288 390 294" stroke="#ADD8E6" stroke-width="2" fill="none"/>
|
||||
<path d="M580 292 Q600 286 620 293" stroke="#ADD8E6" stroke-width="2" fill="none"/>
|
||||
<path d="M720 289 Q740 284 760 291" stroke="#ADD8E6" stroke-width="2" fill="none"/>
|
||||
|
||||
<!-- 自行车 -->
|
||||
<!-- 后轮 -->
|
||||
<circle cx="220" cy="420" r="35" stroke="#333" stroke-width="4" fill="none"/>
|
||||
<circle cx="220" cy="420" r="5" fill="#222"/>
|
||||
<!-- 前轮 -->
|
||||
<circle cx="420" cy="410" r="35" stroke="#333" stroke-width="4" fill="none"/>
|
||||
<circle cx="420" cy="410" r="5" fill="#222"/>
|
||||
<!-- 车架 -->
|
||||
<path d="M220 420 L320 340 L420 410 L320 380 Z" stroke="#8B4513" stroke-width="5" fill="none"/>
|
||||
<!-- 车座、车把、脚踏 -->
|
||||
<path d="M320 340 L310 320" stroke="#8B4513" stroke-width="4" fill="none"/>
|
||||
<path d="M320 340 L380 330" stroke="#8B4513" stroke-width="4" fill="none"/>
|
||||
<path d="M280 390 L270 405" stroke="#8B4513" stroke-width="3" fill="none"/>
|
||||
|
||||
<!-- 鹈鹕主体 -->
|
||||
<!-- 身体 -->
|
||||
<ellipse cx="320" cy="345" rx="65" ry="40" fill="#F8F8F8" stroke="#CCC" stroke-width="2"/>
|
||||
<!-- 翅膀 -->
|
||||
<path d="M270 330 Q240 310 225 335 Q245 360 275 350 Z" fill="#E8E8E8" stroke="#BBB" stroke-width="1.5"/>
|
||||
<path d="M370 335 Q400 315 415 340 Q395 365 365 355 Z" fill="#E8E8E8" stroke="#BBB" stroke-width="1.5"/>
|
||||
<!-- 长颈 -->
|
||||
<path d="M380 330 Q410 290 440 300" stroke="#F0F0F0" stroke-width="18" fill="none" stroke-linecap="round"/>
|
||||
<!-- 头部 -->
|
||||
<circle cx="445" cy="298" r="14" fill="#F5F5F5" stroke="#CCC" stroke-width="2"/>
|
||||
<!-- 眼睛 -->
|
||||
<circle cx="452" cy="294" r="3" fill="#111"/>
|
||||
<!-- 鹈鹕巨喙(喉囊) -->
|
||||
<path d="M455 300 Q490 310 485 340 Q460 350 448 335 Z" fill="#FFB347" stroke="#E69500" stroke-width="2"/>
|
||||
<!-- 腿脚(踩脚踏) -->
|
||||
<path d="M290 375 L272 402" stroke="#FFB347" stroke-width="6" fill="none" stroke-linecap="round"/>
|
||||
<path d="M330 380 L345 408" stroke="#FFB347" stroke-width="6" fill="none" stroke-linecap="round"/>
|
||||
|
||||
<!-- 远景小云朵 -->
|
||||
<g opacity="0.7">
|
||||
<circle cx="100" cy="100" r="20" fill="#fff"/>
|
||||
<circle cx="125" cy="90" r="25" fill="#fff"/>
|
||||
<circle cx="150" cy="102" r="18" fill="#fff"/>
|
||||
</g>
|
||||
<g opacity="0.6">
|
||||
<circle cx="600" cy="110" r="22" fill="#fff"/>
|
||||
<circle cx="628" cy="98" r="26" fill="#fff"/>
|
||||
<circle cx="655" cy="112" r="20" fill="#fff"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,203 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<title>Realistic Pelican Riding Bicycle on Beach</title>
|
||||
<desc>A realistic, lively illustration of a pelican riding a bicycle along the coastal beach</desc>
|
||||
<metadata type="keywords">pelican, bicycle, beach, coastal, realistic, animation</metadata>
|
||||
|
||||
<defs>
|
||||
<!-- Gradients for realistic shading -->
|
||||
<linearGradient id="oceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#87CEEB" />
|
||||
<stop offset="100%" stop-color="#1E90FF" />
|
||||
</linearGradient>
|
||||
<linearGradient id="pelicanBodyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" />
|
||||
<stop offset="100%" stop-color="#F0F0F0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="pelicanWingGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" />
|
||||
<stop offset="100%" stop-color="#E0E0E0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="pelicanPouchGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFA500" />
|
||||
<stop offset="100%" stop-color="#FF8C00" />
|
||||
</linearGradient>
|
||||
<linearGradient id="bikeFrameGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1E90FF" />
|
||||
<stop offset="100%" stop-color="#1C86EE" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Sky background -->
|
||||
<rect id="sky" class="sky" x="0" y="0" width="512" height="250" fill="#87CEEB" />
|
||||
|
||||
<!-- Sun with subtle pulsing animation -->
|
||||
<circle id="sun" class="sun" cx="430" cy="80" r="40" fill="#FFD700">
|
||||
<animate attributeName="r" values="40;42;40" dur="5s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
|
||||
<!-- Moving clouds -->
|
||||
<g id="cloud1" class="cloud">
|
||||
<ellipse cx="100" cy="90" rx="30" ry="20" fill="white" />
|
||||
<ellipse cx="70" cy="90" rx="20" ry="15" fill="white" />
|
||||
<ellipse cx="130" cy="90" rx="20" ry="15" fill="white" />
|
||||
<animate attributeName="transform" type="translate" values="0,0; 20,0; 0,0" dur="10s" repeatCount="indefinite" />
|
||||
</g>
|
||||
|
||||
<g id="cloud2" class="cloud">
|
||||
<ellipse cx="350" cy="120" rx="35" ry="22" fill="white" />
|
||||
<ellipse cx="320" cy="120" rx="22" ry="17" fill="white" />
|
||||
<ellipse cx="380" cy="120" rx="22" ry="17" fill="white" />
|
||||
<animate attributeName="transform" type="translate" values="0,0; -15,0; 0,0" dur="12s" repeatCount="indefinite" />
|
||||
</g>
|
||||
|
||||
<!-- Ocean with depth gradient -->
|
||||
<rect id="ocean" class="ocean" x="0" y="250" width="512" height="100" fill="url(#oceanGradient)" />
|
||||
|
||||
<!-- Animated waves at the shore -->
|
||||
<g id="waves" class="waves">
|
||||
<path d="M0,350 Q50,340 100,350 T200,350 T300,350 T400,350 T512,350 L512,360 L0,360 Z" fill="#87CEEB" opacity="0.7">
|
||||
<animate attributeName="d" values="M0,350 Q50,340 100,350 T200,350 T300,350 T400,350 T512,350 L512,360 L0,360 Z; M0,350 Q50,360 100,350 T200,350 T300,350 T400,350 T512,350 L512,360 L0,360 Z; M0,350 Q50,340 100,350 T200,350 T300,350 T400,350 T512,350 L512,360 L0,360 Z" dur="3s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Beach/Sand background -->
|
||||
<rect id="beach" class="beach" x="0" y="350" width="512" height="162" fill="#F5DEB3" />
|
||||
|
||||
<!-- Shadow of the pelican and bike on the sand -->
|
||||
<g id="shadow" opacity="0.3">
|
||||
<ellipse cx="230" cy="430" rx="60" ry="10" fill="black" />
|
||||
</g>
|
||||
|
||||
<!-- Bicycle with subtle movement and rotating wheels -->
|
||||
<g id="bicycle" class="bicycle">
|
||||
<animate attributeName="transform" type="translate" values="0,0; 2,0; 0,0" dur="0.5s" repeatCount="indefinite" />
|
||||
|
||||
<!-- Wheels -->
|
||||
<circle id="backWheel" class="wheel" cx="180" cy="410" r="30" fill="none" stroke="black" stroke-width="3">
|
||||
<animate attributeName="transform" attributeType="XML" type="rotate" from="0 180 410" to="360 180 410" dur="1s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle id="frontWheel" class="wheel" cx="280" cy="410" r="30" fill="none" stroke="black" stroke-width="3">
|
||||
<animate attributeName="transform" attributeType="XML" type="rotate" from="0 280 410" to="360 280 410" dur="1s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
|
||||
<!-- Spokes -->
|
||||
<g id="backSpokes" class="spokes">
|
||||
<line x1="180" y1="380" x2="180" y2="440" stroke="black" stroke-width="1" />
|
||||
<line x1="150" y1="410" x2="210" y2="410" stroke="black" stroke-width="1" />
|
||||
<line x1="159" y1="389" x2="201" y2="431" stroke="black" stroke-width="1" />
|
||||
<line x1="159" y1="431" x2="201" y2="389" stroke="black" stroke-width="1" />
|
||||
<animate attributeName="transform" attributeType="XML" type="rotate" from="0 180 410" to="360 180 410" dur="1s" repeatCount="indefinite" />
|
||||
</g>
|
||||
|
||||
<g id="frontSpokes" class="spokes">
|
||||
<line x1="280" y1="380" x2="280" y2="440" stroke="black" stroke-width="1" />
|
||||
<line x1="250" y1="410" x2="310" y2="410" stroke="black" stroke-width="1" />
|
||||
<line x1="259" y1="389" x2="301" y2="431" stroke="black" stroke-width="1" />
|
||||
<line x1="259" y1="431" x2="301" y2="389" stroke="black" stroke-width="1" />
|
||||
<animate attributeName="transform" attributeType="XML" type="rotate" from="0 280 410" to="360 280 410" dur="1s" repeatCount="indefinite" />
|
||||
</g>
|
||||
|
||||
<!-- Frame with gradient shading -->
|
||||
<path id="bikeFrame" class="frame" d="M180,410 L230,350 L280,410 M230,350 L250,330 L290,370 L280,410" fill="none" stroke="url(#bikeFrameGradient)" stroke-width="5" />
|
||||
|
||||
<!-- Handlebars -->
|
||||
<path id="handlebars" class="handlebars" d="M290,370 C300,360 310,370 305,380" fill="none" stroke="url(#bikeFrameGradient)" stroke-width="4" />
|
||||
|
||||
<!-- Seat -->
|
||||
<ellipse id="seat" class="seat" cx="230" cy="350" rx="10" ry="5" fill="black" />
|
||||
|
||||
<!-- Pedals with rotation -->
|
||||
<circle id="pedalCenter" class="pedalCenter" cx="230" cy="380" r="5" fill="url(#bikeFrameGradient)" />
|
||||
<g id="pedals" class="pedals">
|
||||
<line id="pedalArm1" x1="230" y1="380" x2="250" y2="395" stroke="url(#bikeFrameGradient)" stroke-width="3" />
|
||||
<rect id="pedalFoot1" x="250" y="390" width="10" height="5" fill="black" />
|
||||
<line id="pedalArm2" x1="230" y1="380" x2="210" y2="365" stroke="url(#bikeFrameGradient)" stroke-width="3" />
|
||||
<rect id="pedalFoot2" x="200" y="360" width="10" height="5" fill="black" />
|
||||
<animate attributeName="transform" attributeType="XML" type="rotate" from="0 230 380" to="360 230 380" dur="1s" repeatCount="indefinite" />
|
||||
</g>
|
||||
|
||||
<!-- Chain -->
|
||||
<path id="chain" class="chain" d="M180,410 C195,405 215,395 230,380 C215,365 195,395 180,410" fill="none" stroke="black" stroke-width="1" />
|
||||
</g>
|
||||
|
||||
<!-- Pelican with realistic shading and animations -->
|
||||
<g id="pelican" class="pelican">
|
||||
<animate attributeName="transform" type="translate" values="0,0; 2,0; 0,0" dur="0.5s" repeatCount="indefinite" />
|
||||
|
||||
<!-- Body with gradient -->
|
||||
<ellipse id="body" class="body" cx="230" cy="310" rx="40" ry="30" fill="url(#pelicanBodyGradient)" stroke="#333" stroke-width="1" />
|
||||
|
||||
<!-- Neck -->
|
||||
<path id="neck" class="neck" d="M260,300 C270,290 275,280 270,270" fill="url(#pelicanBodyGradient)" stroke="#333" stroke-width="1" />
|
||||
|
||||
<!-- Head with subtle nodding animation -->
|
||||
<ellipse id="head" class="head" cx="270" cy="265" rx="15" ry="12" fill="url(#pelicanBodyGradient)" stroke="#333" stroke-width="1">
|
||||
<animate attributeName="transform" type="rotate" values="0,270,265; 10,270,265; 0,270,265; -10,270,265; 0,270,265" dur="5s" repeatCount="indefinite" />
|
||||
</ellipse>
|
||||
|
||||
<!-- Beak -->
|
||||
<path id="beak" class="beak" d="M270,265 L320,270 L270,275 Z" fill="url(#pelicanPouchGradient)" stroke="#333" stroke-width="1">
|
||||
<animate attributeName="transform" type="rotate" values="0,270,265; 5,270,265; 0,270,265; -5,270,265; 0,270,265" dur="5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
|
||||
<!-- Eye with blinking animation -->
|
||||
<circle id="eye" class="eye" cx="275" cy="262" r="3" fill="black">
|
||||
<animate attributeName="r" values="3;2;3" dur="5s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
|
||||
<!-- Wing with flapping animation -->
|
||||
<path id="wing" class="wing" d="M230,290 C220,270 200,260 190,270 C200,290 210,300 230,290" fill="url(#pelicanWingGradient)" stroke="#333" stroke-width="1">
|
||||
<animate attributeName="d" values="M230,290 C220,270 200,260 190,270 C200,290 210,300 230,290; M230,290 C220,265 195,255 185,265 C195,285 210,300 230,290; M230,290 C220,270 200,260 190,270 C200,290 210,300 230,290" dur="5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
|
||||
<!-- Legs with pedaling animation -->
|
||||
<path id="leftLeg" class="leg" d="M210,340 L210,380 L250,395" fill="none" stroke="url(#pelicanPouchGradient)" stroke-width="3">
|
||||
<animate attributeName="d" values="M210,340 L210,380 L250,395; M210,340 L210,380 L210,395; M210,340 L210,380 L250,395" dur="1s" repeatCount="indefinite" />
|
||||
</path>
|
||||
|
||||
<path id="rightLeg" class="leg" d="M240,340 L240,365 L210,365" fill="none" stroke="url(#pelicanPouchGradient)" stroke-width="3">
|
||||
<animate attributeName="d" values="M240,340 L240,365 L210,365; M240,340 L240,365 L240,380; M240,340 L240,365 L210,365" dur="1s" repeatCount="indefinite" />
|
||||
</path>
|
||||
|
||||
<!-- Feet -->
|
||||
<path id="leftFoot" class="foot" d="M250,395 L255,395 L255,390 L250,390 Z" fill="url(#pelicanPouchGradient)" stroke="#333" stroke-width="1">
|
||||
<animate attributeName="transform" type="rotate" values="0,250,395; 20,250,395; 0,250,395" dur="1s" repeatCount="indefinite" />
|
||||
</path>
|
||||
|
||||
<path id="rightFoot" class="foot" d="M210,365 L215,365 L215,360 L210,360 Z" fill="url(#pelicanPouchGradient)" stroke="#333" stroke-width="1">
|
||||
<animate attributeName="transform" type="rotate" values="0,210,365; -20,210,365; 0,210,365" dur="1s" repeatCount="indefinite" />
|
||||
</path>
|
||||
|
||||
<!-- Pouch with subtle movement -->
|
||||
<path id="pouch" class="pouch" d="M270,270 C280,290 290,300 270,310 C260,300 265,280 270,270" fill="url(#pelicanPouchGradient)" stroke="#333" stroke-width="1">
|
||||
<animate attributeName="d" values="M270,270 C280,290 290,300 270,310 C260,300 265,280 270,270; M270,270 C285,290 295,300 275,310 C265,300 265,280 270,270; M270,270 C280,290 290,300 270,310 C260,300 265,280 270,270" dur="5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Fish jumping out of the pelican's pouch (playful beach detail) -->
|
||||
<g id="fish" class="fish">
|
||||
<path d="M275,290 L285,285 L290,290 L285,295 Z" fill="silver" stroke="#333" stroke-width="1">
|
||||
<animate attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur="5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
<circle cx="282" cy="290" r="1" fill="black">
|
||||
<animate attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur="5s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<path d="M290,290 L295,288 L295,292 Z" fill="silver" stroke="#333" stroke-width="1">
|
||||
<animate attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur="5s" repeatCount="indefinite" />
|
||||
<animate attributeName="d" values="M290,290 L295,288 L295,292 Z; M290,290 L297,288 L297,292 Z; M290,290 L295,288 L295,292 Z" dur="0.5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Water droplets from the fish -->
|
||||
<g id="waterDrops" class="waterDrops">
|
||||
<circle id="drop1" cx="295" cy="280" r="1" fill="#87CEEB">
|
||||
<animate attributeName="cy" values="280;290;280" dur="5s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="1;0;1" dur="5s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle id="drop2" cx="300" cy="285" r="1" fill="#87CEEB">
|
||||
<animate attributeName="cy" values="285;295;285" dur="5s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="1;0;1" dur="5s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,349 @@
|
||||
<svg viewBox="0 0 1000 700" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- 环境光影渐变 -->
|
||||
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#4a90e2" />
|
||||
<stop offset="40%" stop-color="#87ceeb" />
|
||||
<stop offset="80%" stop-color="#ffdfa0" />
|
||||
<stop offset="100%" stop-color="#ffb347" />
|
||||
</linearGradient>
|
||||
|
||||
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#ffffff" />
|
||||
<stop offset="20%" stop-color="#ffeeaa" />
|
||||
<stop offset="100%" stop-color="#ffb347" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
<linearGradient id="seaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#005c8a" />
|
||||
<stop offset="40%" stop-color="#0083b0" />
|
||||
<stop offset="100%" stop-color="#00b4db" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="sandGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#e6d3a8" />
|
||||
<stop offset="100%" stop-color="#c2a77a" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 自行车材质渐变 -->
|
||||
<linearGradient id="frameGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#00e5ff" />
|
||||
<stop offset="50%" stop-color="#00b4db" />
|
||||
<stop offset="100%" stop-color="#0083b0" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="chromeGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#ffffff" />
|
||||
<stop offset="50%" stop-color="#cccccc" />
|
||||
<stop offset="100%" stop-color="#999999" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="tireGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#444444" />
|
||||
<stop offset="100%" stop-color="#111111" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 鹈鹕材质渐变 -->
|
||||
<radialGradient id="bodyGrad" cx="50%" cy="50%" r="50%" fx="70%" fy="30%">
|
||||
<stop offset="0%" stop-color="#ffffff" />
|
||||
<stop offset="70%" stop-color="#e6ecef" />
|
||||
<stop offset="100%" stop-color="#a0b4c0" />
|
||||
</radialGradient>
|
||||
|
||||
<linearGradient id="beakTopGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#ffe066" />
|
||||
<stop offset="60%" stop-color="#ffb300" />
|
||||
<stop offset="100%" stop-color="#f57c00" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="beakPouchGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#ffcc80" />
|
||||
<stop offset="40%" stop-color="#ff8a65" />
|
||||
<stop offset="80%" stop-color="#e64a19" />
|
||||
<stop offset="100%" stop-color="#bf360c" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 滤镜 -->
|
||||
<filter id="blur-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="8" />
|
||||
</filter>
|
||||
|
||||
<filter id="blur-cloud" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="6" />
|
||||
</filter>
|
||||
|
||||
<!-- 复用组件:车轮 -->
|
||||
<g id="wheel">
|
||||
<!-- 外胎 -->
|
||||
<circle cx="0" cy="0" r="90" fill="none" stroke="url(#tireGrad)" stroke-width="14" />
|
||||
<!-- 白边复古轮胎圈 -->
|
||||
<circle cx="0" cy="0" r="82" fill="none" stroke="#f4f4f4" stroke-width="5" />
|
||||
<!-- 金属轮毂 -->
|
||||
<circle cx="0" cy="0" r="77" fill="none" stroke="url(#chromeGrad)" stroke-width="6" />
|
||||
<!-- 交叉辐条 -->
|
||||
<g stroke="#cfcfcf" stroke-width="1.5">
|
||||
<line x1="-75" y1="0" x2="75" y2="0" />
|
||||
<line x1="0" y1="-75" x2="0" y2="75" />
|
||||
<line x1="-53" y1="-53" x2="53" y2="53" />
|
||||
<line x1="-53" y1="53" x2="53" y2="-53" />
|
||||
<line x1="-69" y1="-29" x2="69" y2="29" />
|
||||
<line x1="-69" y1="29" x2="69" y2="-29" />
|
||||
<line x1="-29" y1="-69" x2="29" y2="69" />
|
||||
<line x1="-29" y1="69" x2="29" y2="-69" />
|
||||
</g>
|
||||
<!-- 轴心 -->
|
||||
<circle cx="0" cy="0" r="8" fill="url(#chromeGrad)" stroke="#666" stroke-width="2"/>
|
||||
</g>
|
||||
</defs>
|
||||
|
||||
<!-- 背景:天空与太阳 -->
|
||||
<rect x="0" y="0" width="1000" height="400" fill="url(#skyGrad)" />
|
||||
<!-- 太阳光晕 -->
|
||||
<circle cx="800" cy="220" r="150" fill="url(#sunGrad)" />
|
||||
<circle cx="800" cy="220" r="40" fill="#ffffff" filter="url(#blur-cloud)" />
|
||||
|
||||
<!-- 远处的飞鸟 -->
|
||||
<g fill="#ffffff" opacity="0.6">
|
||||
<path d="M 150,150 Q 160,140 170,150 Q 180,140 190,150 Q 180,155 170,145 Q 160,155 150,150 Z" />
|
||||
<path d="M 220,120 Q 225,115 230,120 Q 235,115 240,120 Q 235,123 230,118 Q 225,123 220,120 Z" />
|
||||
</g>
|
||||
|
||||
<!-- 云彩 -->
|
||||
<g fill="#ffffff" opacity="0.85" filter="url(#blur-cloud)">
|
||||
<circle cx="200" cy="180" r="30" />
|
||||
<circle cx="240" cy="160" r="45" />
|
||||
<circle cx="290" cy="180" r="35" />
|
||||
<rect x="190" y="170" width="110" height="40" rx="20" />
|
||||
|
||||
<circle cx="850" cy="120" r="25" />
|
||||
<circle cx="890" cy="110" r="35" />
|
||||
<circle cx="930" cy="130" r="20" />
|
||||
</g>
|
||||
|
||||
<!-- 背景:海面 -->
|
||||
<rect x="0" y="400" width="1000" height="120" fill="url(#seaGrad)" />
|
||||
<!-- 水波纹与太阳倒影 -->
|
||||
<g stroke="#ffffff" stroke-width="2" fill="none" opacity="0.4" stroke-linecap="round">
|
||||
<path d="M 150,430 Q 180,430 210,430" />
|
||||
<path d="M 350,460 Q 380,460 410,460" />
|
||||
<path d="M 100,480 Q 140,480 180,480" />
|
||||
<!-- 倒影区域 -->
|
||||
<g stroke="#ffcc80" stroke-width="3" opacity="0.8">
|
||||
<path d="M 750,415 L 850,415" />
|
||||
<path d="M 770,435 L 830,435" />
|
||||
<path d="M 740,455 L 860,455" />
|
||||
<path d="M 780,475 L 820,475" />
|
||||
<path d="M 760,495 L 840,495" />
|
||||
</g>
|
||||
<path d="M 680,440 Q 700,440 720,440" />
|
||||
<path d="M 880,460 Q 900,460 920,460" />
|
||||
</g>
|
||||
|
||||
<!-- 背景:沙滩 -->
|
||||
<path d="M 0,520 Q 250,510 500,520 T 1000,520 L 1000,700 L 0,700 Z" fill="url(#sandGrad)" />
|
||||
<path d="M 0,560 Q 300,530 600,580 T 1000,550 L 1000,700 L 0,700 Z" fill="#b99e71" opacity="0.3" />
|
||||
|
||||
<!-- 投影 -->
|
||||
<path d="M 180,630 L 700,610 L 780,630 L 250,650 Z" fill="rgba(0,0,0,0.25)" filter="url(#blur-shadow)" />
|
||||
<ellipse cx="280" cy="625" rx="50" ry="10" fill="rgba(0,0,0,0.3)" filter="url(#blur-shadow)" />
|
||||
<ellipse cx="720" cy="625" rx="50" ry="10" fill="rgba(0,0,0,0.3)" filter="url(#blur-shadow)" />
|
||||
|
||||
<!-- 左侧(背景层)踏板与鹈鹕左腿 -->
|
||||
<g id="left-leg-and-pedal">
|
||||
<!-- 左侧曲柄 -->
|
||||
<line x1="500" y1="540" x2="475" y2="515" stroke="#888888" stroke-width="7" stroke-linecap="round" />
|
||||
<!-- 左腿大腿 -->
|
||||
<path d="M 370,330 C 380,360 400,390 420,390 C 410,360 390,340 370,330 Z" fill="#a0b4c0" />
|
||||
<!-- 左腿小腿 -->
|
||||
<line x1="415" y1="385" x2="475" y2="515" stroke="#cc7700" stroke-width="8" stroke-linecap="round" />
|
||||
<!-- 左侧脚蹼 -->
|
||||
<path d="M 475,515 L 495,515 L 505,530 L 485,525 Z" fill="#cc7700" />
|
||||
<!-- 左踏板 -->
|
||||
<rect x="463" y="511" width="24" height="8" rx="2" fill="#555555" />
|
||||
</g>
|
||||
|
||||
<!-- 挡泥板(后层) -->
|
||||
<path d="M 190,550 A 100 100 0 0 1 350,450" fill="none" stroke="url(#frameGrad)" stroke-width="12" stroke-linecap="round" />
|
||||
|
||||
<!-- 车轮 -->
|
||||
<use href="#wheel" x="280" y="520" />
|
||||
<use href="#wheel" x="720" y="520" />
|
||||
|
||||
<!-- 自行车车架 -->
|
||||
<g id="bicycle-frame">
|
||||
<!-- 后下叉 (Chainstay) -->
|
||||
<line x1="280" y1="520" x2="500" y2="540" stroke="url(#frameGrad)" stroke-width="12" stroke-linecap="round" />
|
||||
<!-- 后上叉 (Seatstay) -->
|
||||
<line x1="280" y1="520" x2="420" y2="360" stroke="url(#frameGrad)" stroke-width="10" stroke-linecap="round" />
|
||||
<!-- 下管 (Down tube) -->
|
||||
<line x1="500" y1="540" x2="680" y2="400" stroke="url(#frameGrad)" stroke-width="15" stroke-linecap="round" />
|
||||
<!-- 上管 (Top tube) -->
|
||||
<line x1="420" y1="360" x2="660" y2="340" stroke="url(#frameGrad)" stroke-width="14" stroke-linecap="round" />
|
||||
<!-- 立管 (Seat tube) -->
|
||||
<line x1="500" y1="540" x2="420" y2="360" stroke="url(#frameGrad)" stroke-width="14" stroke-linecap="round" />
|
||||
<!-- 头管 (Head tube) -->
|
||||
<line x1="660" y1="340" x2="680" y2="400" stroke="url(#frameGrad)" stroke-width="18" stroke-linecap="round" />
|
||||
<!-- 前叉 (Fork) -->
|
||||
<line x1="680" y1="400" x2="720" y2="520" stroke="url(#chromeGrad)" stroke-width="12" stroke-linecap="round" />
|
||||
<!-- 挡泥板(前层) -->
|
||||
<path d="M 630,550 A 100 100 0 0 1 790,450" fill="none" stroke="url(#frameGrad)" stroke-width="12" stroke-linecap="round" />
|
||||
</g>
|
||||
|
||||
<!-- 座管与座椅 -->
|
||||
<line x1="420" y1="360" x2="410" y2="320" stroke="url(#chromeGrad)" stroke-width="8" />
|
||||
<path d="M 380,320 C 370,310 440,310 450,330 L 380,330 Z" fill="#2a2a2a" />
|
||||
<!-- 座椅弹簧细节 -->
|
||||
<path d="M 395,330 L 390,345 M 435,330 L 430,345" stroke="#999" stroke-width="3" />
|
||||
|
||||
<!-- 传动系统:牙盘与链条 -->
|
||||
<g id="drivetrain">
|
||||
<!-- 链条 -->
|
||||
<path d="M 280,510 L 500,518 M 280,530 L 500,562" stroke="#444444" stroke-width="4" stroke-dasharray="5 3" />
|
||||
<circle cx="280" cy="520" r="10" fill="#999" stroke="#555" stroke-width="2" />
|
||||
<!-- 牙盘 -->
|
||||
<circle cx="500" cy="540" r="24" fill="none" stroke="#555" stroke-width="4" stroke-dasharray="4 2" />
|
||||
<circle cx="500" cy="540" r="18" fill="url(#chromeGrad)" />
|
||||
<line x1="482" y1="540" x2="518" y2="540" stroke="#777" stroke-width="4" />
|
||||
<line x1="500" y1="522" x2="500" y2="558" stroke="#777" stroke-width="4" />
|
||||
</g>
|
||||
|
||||
<!-- 右侧曲柄与踏板 (前景) -->
|
||||
<g id="right-crank">
|
||||
<line x1="500" y1="540" x2="525" y2="565" stroke="url(#chromeGrad)" stroke-width="7" stroke-linecap="round" />
|
||||
<rect x="513" y="561" width="24" height="8" rx="2" fill="#222222" />
|
||||
</g>
|
||||
|
||||
<!-- 鹈鹕主体 (尾巴、身体、脖子、头部) -->
|
||||
<g id="pelican">
|
||||
<!-- 尾羽 -->
|
||||
<path d="M 260,330 L 150,360 L 140,340 L 240,310 Z" fill="#333333" />
|
||||
<path d="M 250,350 L 140,380 L 130,360 L 220,330 Z" fill="#1a1a1a" />
|
||||
|
||||
<!-- 身体 -->
|
||||
<path d="M 380,360
|
||||
C 280,380 200,340 180,280
|
||||
C 160,220 280,200 350,230
|
||||
C 410,250 460,290 450,340
|
||||
C 445,355 420,360 380,360 Z"
|
||||
fill="url(#bodyGrad)" />
|
||||
|
||||
<!-- 脖子 -->
|
||||
<path d="M 350,240
|
||||
C 340,160 430,150 460,110
|
||||
C 470,90 500,80 520,90
|
||||
C 530,110 500,130 480,130
|
||||
C 440,160 410,210 400,260 Z"
|
||||
fill="url(#bodyGrad)" />
|
||||
|
||||
<!-- 喉囊 (下颌) -->
|
||||
<!-- 增加半透明度和阴影表现饱满感 -->
|
||||
<path d="M 505,105 C 570,180 720,210 800,130 C 680,120 580,115 505,105 Z" fill="url(#beakPouchGrad)" />
|
||||
<path d="M 505,105 C 550,150 630,170 730,125" fill="none" stroke="#d84315" stroke-width="2" opacity="0.4" />
|
||||
|
||||
<!-- 上喙 (上颌) -->
|
||||
<path d="M 515,85 Q 680,80 800,120 Q 815,125 808,135 Q 803,135 800,130 Q 680,110 505,105 Z" fill="url(#beakTopGrad)" />
|
||||
|
||||
<!-- 眼睛与眼斑 -->
|
||||
<path d="M 495,90 C 495,80 515,80 515,90 C 515,100 495,100 495,90 Z" fill="#ffe082" stroke="#ffb300" stroke-width="1.5" />
|
||||
<circle cx="505" cy="90" r="5" fill="#111111" />
|
||||
<circle cx="507" cy="88" r="1.5" fill="#ffffff" />
|
||||
</g>
|
||||
|
||||
<!-- 配饰:车篓与捕到的鱼 -->
|
||||
<g id="basket-and-fish">
|
||||
<!-- 车把立管 -->
|
||||
<line x1="660" y1="340" x2="650" y2="290" stroke="url(#chromeGrad)" stroke-width="10" />
|
||||
|
||||
<!-- 车篓底色与轮廓 -->
|
||||
<path d="M 670,290 L 730,290 L 715,360 L 665,360 Z" fill="#d4a373" stroke="#8b5a2b" stroke-width="3" stroke-linejoin="round" />
|
||||
|
||||
<!-- 鱼 -->
|
||||
<g id="fish">
|
||||
<path d="M 685,300 L 665,320 L 685,325 Z" fill="#90a4ae" />
|
||||
<path d="M 685,300 C 680,270 690,250 710,240 C 725,230 745,240 745,240 C 745,240 735,260 715,270 C 700,280 685,300 685,300 Z" fill="url(#chromeGrad)" stroke="#78909c" stroke-width="1" />
|
||||
<circle cx="730" cy="245" r="2.5" fill="#111" />
|
||||
<circle cx="731" cy="244" r="0.8" fill="#fff" />
|
||||
<path d="M 718,245 Q 713,255 718,265" fill="none" stroke="#546e7a" stroke-width="1.5" />
|
||||
</g>
|
||||
|
||||
<!-- 车篓藤条纹理 -->
|
||||
<line x1="675" y1="305" x2="725" y2="305" stroke="#b5835a" stroke-width="4" />
|
||||
<line x1="673" y1="322" x2="721" y2="322" stroke="#b5835a" stroke-width="4" />
|
||||
<line x1="670" y1="340" x2="717" y2="340" stroke="#b5835a" stroke-width="4" />
|
||||
<line x1="685" y1="290" x2="680" y2="360" stroke="#b5835a" stroke-width="4" />
|
||||
<line x1="700" y1="290" x2="695" y2="360" stroke="#b5835a" stroke-width="4" />
|
||||
<line x1="715" y1="290" x2="710" y2="360" stroke="#b5835a" stroke-width="4" />
|
||||
</g>
|
||||
|
||||
<!-- 车把与握把 -->
|
||||
<path d="M 600,270 C 630,260 660,260 680,290" fill="none" stroke="url(#chromeGrad)" stroke-width="10" stroke-linecap="round" />
|
||||
<line x1="585" y1="275" x2="615" y2="265" stroke="#8b4513" stroke-width="16" stroke-linecap="round" />
|
||||
|
||||
<!-- 鹈鹕生动的配饰:红底白点波浪头巾 -->
|
||||
<g id="bandana">
|
||||
<path d="M 400,260 C 410,275 435,275 440,250 L 445,265 C 420,285 395,280 400,260 Z" fill="#d32f2f" />
|
||||
<!-- 飘扬的头巾尾巴 -->
|
||||
<path d="M 408,265 Q 360,280 320,265 Q 360,295 415,275 Z" fill="#b71c1c" />
|
||||
<path d="M 418,268 Q 370,305 340,315 Q 380,325 425,278 Z" fill="#d32f2f" />
|
||||
<!-- 波点 -->
|
||||
<circle cx="410" cy="263" r="2" fill="#ffffff" />
|
||||
<circle cx="425" cy="265" r="2" fill="#ffffff" />
|
||||
<circle cx="435" cy="255" r="2" fill="#ffffff" />
|
||||
<circle cx="390" cy="275" r="1.5" fill="#ffffff" />
|
||||
<circle cx="360" cy="273" r="1.5" fill="#ffffff" />
|
||||
<circle cx="380" cy="295" r="1.5" fill="#ffffff" />
|
||||
<circle cx="350" cy="305" r="1.5" fill="#ffffff" />
|
||||
</g>
|
||||
|
||||
<!-- 鹈鹕右腿 (前景层) -->
|
||||
<g id="right-leg">
|
||||
<path d="M 390,340 C 410,380 440,430 470,440 C 460,400 420,360 390,340 Z" fill="url(#bodyGrad)" />
|
||||
<line x1="465" y1="435" x2="525" y2="565" stroke="#ff9900" stroke-width="9" stroke-linecap="round" />
|
||||
<path d="M 525,565 L 560,575 L 575,595 L 540,585 Z" fill="#ffaa00" />
|
||||
</g>
|
||||
|
||||
<!-- 鹈鹕右翼 (握住车把的翅膀,最前层) -->
|
||||
<g id="pelican-wing">
|
||||
<!-- 基础翅膀形态 -->
|
||||
<path d="M 350,240 C 440,250 560,260 600,270 C 590,290 500,310 400,320 C 300,330 200,320 220,290 Z" fill="url(#bodyGrad)" />
|
||||
|
||||
<!-- 初级飞羽 (深色) -->
|
||||
<path d="M 220,290 C 180,290 120,300 90,320 C 120,330 180,320 220,310 Z" fill="#222222" />
|
||||
<path d="M 230,300 C 180,310 110,330 80,350 C 120,355 180,340 230,320 Z" fill="#3a3a3a" />
|
||||
<path d="M 250,310 C 200,320 130,350 100,380 C 140,380 200,360 250,330 Z" fill="#4d4d4d" />
|
||||
|
||||
<!-- 次级飞羽 -->
|
||||
<path d="M 300,310 C 260,330 200,360 180,380 C 220,370 270,340 320,320 Z" fill="#888888" />
|
||||
<path d="M 350,315 C 310,340 250,370 230,390 C 270,380 320,350 370,325 Z" fill="#aaaaaa" />
|
||||
|
||||
<!-- 肩羽覆羽 (亮白) -->
|
||||
<path d="M 400,260 C 450,270 520,270 580,280 C 560,290 480,300 400,290 C 350,280 320,270 350,260 Z" fill="#ffffff" />
|
||||
|
||||
<!-- 翅膀轮廓与羽毛纹理 -->
|
||||
<path d="M 350,240 C 440,250 560,260 600,270" fill="none" stroke="#e0e0e0" stroke-width="2" />
|
||||
<path d="M 420,285 Q 470,285 520,290" fill="none" stroke="#cccccc" stroke-width="2" />
|
||||
<path d="M 380,300 Q 430,300 480,305" fill="none" stroke="#bbbbbb" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
<!-- 动感特效:后轮扬起的沙粒与速度线 -->
|
||||
<g id="action-effects">
|
||||
<!-- 速度线 -->
|
||||
<line x1="120" y1="520" x2="220" y2="520" stroke="#ffffff" stroke-width="3" opacity="0.5" stroke-dasharray="15 8" />
|
||||
<line x1="80" y1="560" x2="200" y2="560" stroke="#b99e71" stroke-width="4" opacity="0.6" stroke-dasharray="25 15" />
|
||||
|
||||
<!-- 扬起的沙子 -->
|
||||
<g fill="#c2a77a">
|
||||
<circle cx="180" cy="580" r="4" />
|
||||
<circle cx="160" cy="595" r="5" />
|
||||
<circle cx="140" cy="575" r="2.5" />
|
||||
<circle cx="195" cy="605" r="3" />
|
||||
<circle cx="150" cy="615" r="4.5" />
|
||||
<circle cx="130" cy="590" r="2" />
|
||||
<circle cx="170" cy="610" r="3.5" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- 整体氛围光 (屏幕混合叠加,增加温馨感) -->
|
||||
<polygon points="800,220 -200,800 200,800 800,220" fill="url(#sunGrad)" opacity="0.25" style="mix-blend-mode: screen;" />
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,492 @@
|
||||
<svg viewBox="0 0 1000 700" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Sky Gradient -->
|
||||
<linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#4A90E2" />
|
||||
<stop offset="40%" stop-color="#90C3E5" />
|
||||
<stop offset="70%" stop-color="#FFDAB9" />
|
||||
<stop offset="100%" stop-color="#FFB6C1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Sun Gradient -->
|
||||
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" />
|
||||
<stop offset="20%" stop-color="#FFF176" />
|
||||
<stop offset="70%" stop-color="#FF8A65" />
|
||||
<stop offset="100%" stop-color="#FF8A65" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
<!-- Ocean Gradient -->
|
||||
<linearGradient id="oceanGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#005C99" />
|
||||
<stop offset="50%" stop-color="#008B8B" />
|
||||
<stop offset="100%" stop-color="#20B2AA" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Sand Gradient -->
|
||||
<linearGradient id="sandGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#F4E0A0" />
|
||||
<stop offset="30%" stop-color="#F4D090" />
|
||||
<stop offset="100%" stop-color="#D2A660" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Pelican Body Gradient -->
|
||||
<linearGradient id="pelicanWhite" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" />
|
||||
<stop offset="60%" stop-color="#F0F4F8" />
|
||||
<stop offset="100%" stop-color="#B0C4DE" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="pelicanShade" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" />
|
||||
<stop offset="100%" stop-color="#D1D9E6" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Pouch Gradient (Vivid) -->
|
||||
<linearGradient id="pouchGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFD54F" />
|
||||
<stop offset="40%" stop-color="#FFB300" />
|
||||
<stop offset="75%" stop-color="#FF7043" />
|
||||
<stop offset="100%" stop-color="#E53935" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Beak Gradient -->
|
||||
<linearGradient id="beakGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#FFF59D" />
|
||||
<stop offset="70%" stop-color="#FFD54F" />
|
||||
<stop offset="90%" stop-color="#FFCA28" />
|
||||
<stop offset="100%" stop-color="#BDBDBD" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Bike Frame Gradient -->
|
||||
<linearGradient id="frameGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FF5252" />
|
||||
<stop offset="50%" stop-color="#E53935" />
|
||||
<stop offset="100%" stop-color="#B71C1C" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Drop Shadow for Realism -->
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="15" stdDeviation="10" flood-color="#000" flood-opacity="0.3"/>
|
||||
</filter>
|
||||
<filter id="blurShadow">
|
||||
<feGaussianBlur stdDeviation="15"/>
|
||||
</filter>
|
||||
|
||||
<!-- Pattern for Sand Texture -->
|
||||
<pattern id="sandTexture" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<circle cx="5" cy="5" r="1" fill="#A0522D" opacity="0.15" />
|
||||
<circle cx="25" cy="15" r="1.5" fill="#A0522D" opacity="0.1" />
|
||||
<circle cx="15" cy="30" r="1" fill="#8B4513" opacity="0.2" />
|
||||
<circle cx="35" cy="35" r="0.8" fill="#8B4513" opacity="0.15" />
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- ================= BACKGROUND ================= -->
|
||||
<!-- Sky -->
|
||||
<rect x="0" y="0" width="1000" height="380" fill="url(#skyGrad)" />
|
||||
|
||||
<!-- Sun & Glow -->
|
||||
<circle cx="850" cy="220" r="140" fill="url(#sunGrad)" />
|
||||
<circle cx="850" cy="220" r="60" fill="#FFFFFF" opacity="0.8" filter="url(#blurShadow)" />
|
||||
|
||||
<!-- Distant Birds -->
|
||||
<g fill="none" stroke="#886" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6">
|
||||
<path d="M 750,150 Q 760,135 770,150 Q 760,145 750,150" />
|
||||
<path d="M 780,120 Q 785,110 790,120 Q 785,115 780,120" />
|
||||
<path d="M 720,170 Q 732,150 745,170 Q 732,162 720,170" />
|
||||
<path d="M 800,165 Q 810,155 820,165 Q 810,160 800,165" />
|
||||
</g>
|
||||
|
||||
<!-- Clouds -->
|
||||
<g fill="#FFFFFF" opacity="0.4" filter="url(#blurShadow)">
|
||||
<path d="M 150,120 Q 180,90 220,120 Q 260,100 290,130 Q 320,120 340,150 L 120,150 Q 110,130 150,120 Z" />
|
||||
<path d="M 550,80 Q 580,50 620,70 Q 660,60 680,90 Q 710,80 730,110 L 520,110 Q 510,90 550,80 Z" />
|
||||
<path d="M 50,220 Q 80,190 120,210 Q 160,200 190,230 L 30,230 Q 20,210 50,220 Z" />
|
||||
</g>
|
||||
|
||||
<!-- Ocean -->
|
||||
<rect x="0" y="380" width="1000" height="150" fill="url(#oceanGrad)" />
|
||||
|
||||
<!-- Sun Reflections on Water -->
|
||||
<g fill="#FFF59D" opacity="0.6">
|
||||
<rect x="780" y="385" width="140" height="3" rx="1.5" />
|
||||
<rect x="800" y="395" width="100" height="3" rx="1.5" />
|
||||
<rect x="750" y="405" width="200" height="4" rx="2" />
|
||||
<rect x="770" y="418" width="160" height="4" rx="2" opacity="0.4" />
|
||||
<rect x="810" y="432" width="80" height="5" rx="2.5" opacity="0.3" />
|
||||
<rect x="760" y="448" width="180" height="5" rx="2.5" opacity="0.2" />
|
||||
<rect x="790" y="465" width="120" height="6" rx="3" opacity="0.15" />
|
||||
<rect x="740" y="485" width="220" height="6" rx="3" opacity="0.1" />
|
||||
</g>
|
||||
|
||||
<!-- Distant Sailboat -->
|
||||
<g transform="translate(250, 360)">
|
||||
<path d="M 10,20 L 30,20 L 25,25 L 12,25 Z" fill="#444" />
|
||||
<path d="M 20,5 L 20,20 L 10,20 Z" fill="#FFF" opacity="0.9" />
|
||||
<path d="M 22,3 L 22,20 L 32,20 Z" fill="#E0E0E0" opacity="0.8" />
|
||||
</g>
|
||||
|
||||
<!-- Ocean Waves (Surf lines) -->
|
||||
<g stroke="#FFFFFF" fill="none" stroke-linecap="round">
|
||||
<path d="M -50,400 Q 50,410 150,400 T 350,400 T 550,400 T 750,400 T 950,400" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M 0,430 Q 120,445 240,430 T 480,430 T 720,430 T 960,430 T 1050,430" stroke-width="3" opacity="0.4"/>
|
||||
<path d="M -20,460 Q 150,480 300,460 T 600,460 T 900,460 T 1050,460" stroke-width="4" opacity="0.5"/>
|
||||
<path d="M 0,500 Q 200,520 400,500 T 800,500 T 1050,500" stroke-width="6" opacity="0.6"/>
|
||||
<!-- Foamy bits -->
|
||||
<path d="M 380,500 Q 400,490 420,500" stroke-width="8" opacity="0.8"/>
|
||||
<path d="M 780,500 Q 800,490 820,500" stroke-width="8" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<!-- Sand -->
|
||||
<path d="M 0,510 Q 250,480 500,520 T 1000,500 L 1000,700 L 0,700 Z" fill="url(#sandGrad)" />
|
||||
<path d="M 0,510 Q 250,480 500,520 T 1000,500 L 1000,700 L 0,700 Z" fill="url(#sandTexture)" />
|
||||
|
||||
<!-- Shadow under the bike -->
|
||||
<ellipse cx="480" cy="625" rx="280" ry="25" fill="#5C4033" opacity="0.4" filter="url(#blurShadow)" />
|
||||
|
||||
|
||||
<!-- ================= BACK LAYER ELEMENTS ================= -->
|
||||
<!-- Left Wing (Flapping Up / Cheering) -->
|
||||
<g transform="translate(0, 0)">
|
||||
<!-- Base shadow/depth wing -->
|
||||
<path d="M 320,260 C 260,200 150,110 80,80 C 130,120 180,160 210,210 C 150,130 90,80 50,60 C 120,110 170,160 210,230 C 140,160 70,100 40,90 C 110,150 170,220 230,270 Z" fill="#9BA6B5" opacity="0.8"/>
|
||||
<!-- Primary feathers -->
|
||||
<path d="M 340,280 Q 200,150 100,50 Q 160,110 240,210 Z" fill="url(#pelicanWhite)" stroke="#D1D9E6" stroke-width="1"/>
|
||||
<path d="M 330,285 Q 180,160 80,70 Q 150,130 230,230 Z" fill="url(#pelicanWhite)" stroke="#D1D9E6" stroke-width="1"/>
|
||||
<path d="M 320,290 Q 160,170 60,90 Q 140,150 220,250 Z" fill="url(#pelicanWhite)" stroke="#D1D9E6" stroke-width="1"/>
|
||||
<path d="M 310,295 Q 140,180 40,110 Q 130,170 210,270 Z" fill="url(#pelicanWhite)" stroke="#D1D9E6" stroke-width="1"/>
|
||||
<!-- Wing Coverts (Upper wing overlap) -->
|
||||
<path d="M 360,280 C 310,220 220,160 180,150 C 250,190 300,240 330,300 Z" fill="url(#pelicanShade)"/>
|
||||
<path d="M 370,290 C 320,240 240,190 190,190 C 260,220 310,260 340,310 Z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<!-- Left Pedal & Crank (Background) -->
|
||||
<g>
|
||||
<!-- Left Crank -->
|
||||
<line x1="450" y1="560" x2="420" y2="500" stroke="#777" stroke-width="10" stroke-linecap="round" />
|
||||
<!-- Left Pedal -->
|
||||
<rect x="395" y="495" width="50" height="12" rx="4" fill="#333" />
|
||||
<rect x="400" y="490" width="40" height="22" rx="2" fill="none" stroke="#999" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
<!-- Pelican Left Leg (Background) -->
|
||||
<g>
|
||||
<!-- Thigh -->
|
||||
<path d="M 360,370 C 390,380 410,430 400,470 C 380,460 350,400 360,370 Z" fill="#A0AEC0" />
|
||||
<!-- Lower Leg -->
|
||||
<line x1="400" y1="465" x2="420" y2="500" stroke="#E67E22" stroke-width="12" stroke-linecap="round" />
|
||||
<!-- Webbed Foot -->
|
||||
<path d="M 410,490 Q 430,480 450,495 Q 430,515 405,510 Z" fill="#D35400" />
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ================= BICYCLE ================= -->
|
||||
<!-- Spokes Pattern / Paths -->
|
||||
<g stroke="#999" stroke-width="2" opacity="0.8">
|
||||
<!-- Back Wheel Spokes -->
|
||||
<path d="M 250,485 L 250,635 M 175,560 L 325,560
|
||||
M 197,507 L 303,613 M 197,613 L 303,507
|
||||
M 212,495 L 288,625 M 212,625 L 288,495
|
||||
M 185,522 L 315,598 M 185,598 L 315,522" />
|
||||
<!-- Front Wheel Spokes -->
|
||||
<path d="M 700,485 L 700,635 M 625,560 L 775,560
|
||||
M 647,507 L 753,613 M 647,613 L 753,507
|
||||
M 662,495 L 738,625 M 662,625 L 738,495
|
||||
M 635,522 L 765,598 M 635,598 L 765,522" />
|
||||
</g>
|
||||
|
||||
<!-- Wheels (Tires & Rims) -->
|
||||
<g fill="none">
|
||||
<!-- Back Wheel -->
|
||||
<!-- Inner Rim -->
|
||||
<circle cx="250" cy="560" r="63" stroke="#A0A0A0" stroke-width="6" />
|
||||
<!-- White Wall -->
|
||||
<circle cx="250" cy="560" r="67" stroke="#F5F5DC" stroke-width="4" />
|
||||
<!-- Outer Tire -->
|
||||
<circle cx="250" cy="560" r="75" stroke="#2C3E50" stroke-width="12" />
|
||||
|
||||
<!-- Front Wheel -->
|
||||
<!-- Inner Rim -->
|
||||
<circle cx="700" cy="560" r="63" stroke="#A0A0A0" stroke-width="6" />
|
||||
<!-- White Wall -->
|
||||
<circle cx="700" cy="560" r="67" stroke="#F5F5DC" stroke-width="4" />
|
||||
<!-- Outer Tire -->
|
||||
<circle cx="700" cy="560" r="75" stroke="#2C3E50" stroke-width="12" />
|
||||
</g>
|
||||
|
||||
<!-- Hubs -->
|
||||
<circle cx="250" cy="560" r="12" fill="#CCC" stroke="#888" stroke-width="2" />
|
||||
<circle cx="700" cy="560" r="12" fill="#CCC" stroke="#888" stroke-width="2" />
|
||||
|
||||
<!-- Fenders -->
|
||||
<g fill="none" stroke="url(#frameGrad)" stroke-width="10" stroke-linecap="round">
|
||||
<!-- Rear Fender -->
|
||||
<path d="M 165,560 A 85,85 0 0,1 315,495" />
|
||||
<!-- Front Fender -->
|
||||
<path d="M 615,560 A 85,85 0 0,1 775,510" />
|
||||
</g>
|
||||
<!-- Fender struts -->
|
||||
<g stroke="#A0A0A0" stroke-width="3" fill="none">
|
||||
<line x1="250" y1="560" x2="180" y2="510" />
|
||||
<line x1="700" y1="560" x2="760" y2="520" />
|
||||
</g>
|
||||
|
||||
<!-- Chain & Chainring (Back part) -->
|
||||
<line x1="250" y1="550" x2="450" y2="540" stroke="#444" stroke-width="4" />
|
||||
<line x1="250" y1="570" x2="450" y2="580" stroke="#444" stroke-width="4" />
|
||||
<circle cx="250" cy="560" r="10" fill="#666" />
|
||||
|
||||
<!-- Bicycle Frame -->
|
||||
<g fill="none" stroke="url(#frameGrad)" stroke-width="12" stroke-linejoin="round" stroke-linecap="round" filter="url(#shadow)">
|
||||
<!-- Chainstay -->
|
||||
<line x1="250" y1="560" x2="450" y2="560" />
|
||||
<!-- Seatstay -->
|
||||
<line x1="250" y1="560" x2="380" y2="400" />
|
||||
<!-- Seat Tube -->
|
||||
<line x1="450" y1="560" x2="380" y2="400" />
|
||||
<!-- Downtube -->
|
||||
<line x1="450" y1="560" x2="650" y2="420" />
|
||||
<!-- Top Tube (Curved for cruiser style) -->
|
||||
<path d="M 380,400 Q 520,390 650,420" />
|
||||
<!-- Fork -->
|
||||
<line x1="650" y1="420" x2="700" y2="560" />
|
||||
</g>
|
||||
|
||||
<!-- Frame Highlights (Glossy Effect) -->
|
||||
<g fill="none" stroke="#FFFFFF" stroke-width="2" opacity="0.5" stroke-linecap="round">
|
||||
<line x1="440" y1="555" x2="640" y2="415" />
|
||||
<path d="M 390,400 Q 520,395 640,418" />
|
||||
<line x1="655" y1="430" x2="695" y2="550" />
|
||||
<line x1="260" y1="555" x2="440" y2="555" />
|
||||
<line x1="440" y1="550" x2="385" y2="410" />
|
||||
<line x1="260" y1="552" x2="375" y2="410" />
|
||||
</g>
|
||||
|
||||
<!-- Seat Post & Saddle -->
|
||||
<g>
|
||||
<!-- Seat Post -->
|
||||
<line x1="380" y1="400" x2="360" y2="350" stroke="#A0A0A0" stroke-width="10" stroke-linecap="round" />
|
||||
<!-- Saddle Base -->
|
||||
<path d="M 310,350 Q 360,330 390,350 Q 400,360 360,360 Q 330,360 310,350 Z" fill="#5C4033" filter="url(#shadow)" />
|
||||
<path d="M 315,350 Q 360,335 385,350" stroke="#8B4513" stroke-width="2" fill="none" />
|
||||
<!-- Saddle Springs -->
|
||||
<circle cx="330" cy="365" r="4" fill="none" stroke="#A0A0A0" stroke-width="2" />
|
||||
<circle cx="340" cy="365" r="4" fill="none" stroke="#A0A0A0" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
<!-- Head Tube & Stem & Handlebars -->
|
||||
<g>
|
||||
<!-- Head Tube -->
|
||||
<line x1="650" y1="420" x2="635" y2="370" stroke="url(#frameGrad)" stroke-width="14" stroke-linecap="round" />
|
||||
<!-- Stem -->
|
||||
<line x1="635" y1="370" x2="625" y2="330" stroke="#A0A0A0" stroke-width="8" stroke-linecap="round" />
|
||||
<line x1="625" y1="330" x2="640" y2="330" stroke="#A0A0A0" stroke-width="8" stroke-linecap="round" />
|
||||
<!-- Handlebar Curve -->
|
||||
<path d="M 640,330 Q 600,340 590,300 Q 580,260 650,270" fill="none" stroke="#D3D3D3" stroke-width="10" stroke-linecap="round" filter="url(#shadow)" />
|
||||
<!-- Handlebar Highlight -->
|
||||
<path d="M 640,328 Q 604,338 594,300 Q 584,264 645,268" fill="none" stroke="#FFF" stroke-width="2" opacity="0.6"/>
|
||||
<!-- Handlebar Grip -->
|
||||
<line x1="635" y1="270" x2="675" y2="275" stroke="#333" stroke-width="14" stroke-linecap="round" />
|
||||
<!-- Grip Texture -->
|
||||
<line x1="640" y1="265" x2="640" y2="280" stroke="#111" stroke-width="2" />
|
||||
<line x1="650" y1="266" x2="650" y2="281" stroke="#111" stroke-width="2" />
|
||||
<line x1="660" y1="267" x2="660" y2="283" stroke="#111" stroke-width="2" />
|
||||
<line x1="670" y1="268" x2="670" y2="284" stroke="#111" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ================= PELICAN (MAIN) ================= -->
|
||||
<!-- Pelican Body -->
|
||||
<g filter="url(#shadow)">
|
||||
<!-- Main Body Oval / Teardrop -->
|
||||
<path d="M 370,345 C 300,320 290,210 390,180 C 470,150 510,250 480,330 C 460,390 390,370 370,345 Z" fill="url(#pelicanWhite)" />
|
||||
|
||||
<!-- Body Highlights / Feather Textures -->
|
||||
<path d="M 360,330 C 310,310 310,230 380,200 C 450,180 480,250 460,310 C 440,360 390,350 360,330 Z" fill="url(#pelicanShade)" opacity="0.4" />
|
||||
|
||||
<!-- Chest Fluff -->
|
||||
<path d="M 450,220 Q 480,250 495,280 Q 510,310 475,340 Q 515,310 480,250 Q 500,230 450,220 Z" fill="#FFFFFF" opacity="0.7"/>
|
||||
<path d="M 460,250 Q 500,280 470,320 Q 495,290 460,250 Z" fill="#FFFFFF" opacity="0.9"/>
|
||||
</g>
|
||||
|
||||
<!-- Pelican Neck & Head -->
|
||||
<g>
|
||||
<!-- Neck -->
|
||||
<path d="M 390,190 C 420,80 460,110 490,90 C 510,75 520,70 515,110 C 500,160 450,240 420,210 Z" fill="url(#pelicanWhite)" filter="url(#shadow)" />
|
||||
<!-- Neck Shading -->
|
||||
<path d="M 400,180 C 430,90 470,115 490,95 C 470,130 440,180 400,180 Z" fill="url(#pelicanShade)" opacity="0.6"/>
|
||||
|
||||
<!-- Head Tuft / Crest (Majestic) -->
|
||||
<path d="M 490,85 Q 460,50 430,60 Q 460,70 450,85 Q 470,75 480,95 Z" fill="#FFF3CD" />
|
||||
<path d="M 485,80 Q 450,40 410,50 Q 440,60 430,75 Q 460,65 470,85 Z" fill="#FFFFFF" />
|
||||
<path d="M 495,90 Q 470,60 450,65 Q 475,80 485,100 Z" fill="#FFE082" opacity="0.8"/>
|
||||
|
||||
<!-- Head Base -->
|
||||
<path d="M 470,95 C 480,70 520,70 525,100 C 530,120 500,125 480,115 Z" fill="#FFFFFF" />
|
||||
|
||||
<!-- Eye Mask (Pink/Yellow skin patch) -->
|
||||
<path d="M 495,95 C 505,85 520,85 525,98 C 520,108 500,110 495,95 Z" fill="#F8BBD0" />
|
||||
<path d="M 500,95 C 508,88 518,88 522,98 C 518,105 505,105 500,95 Z" fill="#FFF9C4" />
|
||||
|
||||
<!-- Eye -->
|
||||
<circle cx="512" cy="96" r="5" fill="#FFFFFF" />
|
||||
<circle cx="513" cy="96" r="3.5" fill="#87CEEB" />
|
||||
<circle cx="514" cy="96" r="2" fill="#000000" />
|
||||
<circle cx="514.5" cy="95" r="0.8" fill="#FFFFFF" /> <!-- Catchlight -->
|
||||
</g>
|
||||
|
||||
<!-- Beak & Pouch (Vivid Centerpiece) -->
|
||||
<g filter="url(#shadow)">
|
||||
<!-- Pouch (Massive, hanging down) -->
|
||||
<path d="M 520,110 C 510,210 590,320 670,270 C 730,230 760,160 765,145 Q 630,135 520,110 Z" fill="url(#pouchGrad)" opacity="0.95" />
|
||||
|
||||
<!-- Pouch Translucency / Veins / Folds -->
|
||||
<path d="M 530,130 Q 560,250 640,260" stroke="#FF5722" stroke-width="2" fill="none" opacity="0.6"/>
|
||||
<path d="M 550,135 Q 590,260 670,240" stroke="#E64A19" stroke-width="1.5" fill="none" opacity="0.5"/>
|
||||
<path d="M 580,140 Q 630,260 700,210" stroke="#D84315" stroke-width="1" fill="none" opacity="0.4"/>
|
||||
<path d="M 610,140 Q 670,240 730,180" stroke="#BF360C" stroke-width="1" fill="none" opacity="0.3"/>
|
||||
|
||||
<!-- Pouch Highlight (Sun glowing through) -->
|
||||
<path d="M 600,250 C 670,250 730,200 755,145 Q 680,180 600,250 Z" fill="#FFF59D" opacity="0.3" />
|
||||
|
||||
<!-- Upper Mandible (Beak) -->
|
||||
<path d="M 515,100 Q 640,115 770,135 Q 780,140 775,145 L 515,115 Z" fill="url(#beakGrad)" />
|
||||
<!-- Beak Hook (Nail) -->
|
||||
<path d="M 770,135 Q 785,138 780,150 Q 770,145 770,135 Z" fill="#9E9E9E" />
|
||||
<!-- Beak Central Ridge Line -->
|
||||
<path d="M 520,105 Q 640,122 770,140" fill="none" stroke="#F57F17" stroke-width="1.5" opacity="0.7"/>
|
||||
<!-- Nostril -->
|
||||
<ellipse cx="535" cy="108" rx="4" ry="1.5" fill="#5D4037" transform="rotate(-5 535 108)" />
|
||||
<!-- Smile line separating top beak and pouch -->
|
||||
<path d="M 515,115 Q 640,125 775,145" fill="none" stroke="#D84315" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
<!-- Right Wing (Holding Handlebar) -->
|
||||
<g filter="url(#shadow)">
|
||||
<!-- Shoulder/Upper Arm -->
|
||||
<path d="M 390,230 C 430,250 460,290 465,310 C 500,310 580,290 640,280 C 645,290 635,300 620,310 C 550,330 450,350 400,290 C 370,270 370,240 390,230 Z" fill="url(#pelicanWhite)" />
|
||||
|
||||
<!-- Feather Layers on Wing (Vivid & Realistic) -->
|
||||
<!-- Primary Flight Feathers wrapping grip -->
|
||||
<path d="M 600,285 Q 640,280 660,295 Q 620,305 590,300 Z" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="1"/>
|
||||
<path d="M 580,290 Q 630,285 650,305 Q 610,315 570,305 Z" fill="#F1F5F9" stroke="#CBD5E1" stroke-width="1"/>
|
||||
<path d="M 560,295 Q 620,290 640,315 Q 590,325 550,315 Z" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1"/>
|
||||
|
||||
<!-- Secondary Feathers draping down -->
|
||||
<path d="M 450,305 Q 500,340 550,320 Q 480,350 430,310 Z" fill="url(#pelicanShade)"/>
|
||||
<path d="M 430,290 Q 480,340 530,320 Q 460,350 410,295 Z" fill="#FFFFFF"/>
|
||||
<path d="M 410,270 Q 460,330 510,310 Q 440,340 390,280 Z" fill="#E2E8F0"/>
|
||||
|
||||
<!-- Coverts (Shoulder fluff) -->
|
||||
<path d="M 380,240 C 420,250 450,280 460,300 C 420,290 390,260 375,250 Z" fill="#FFFFFF"/>
|
||||
<path d="M 390,245 C 425,260 450,290 455,305 C 425,285 400,265 385,255 Z" fill="#F8FAFC"/>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ================= BIKE FRONT PARTS ================= -->
|
||||
<g>
|
||||
<!-- Chainring (Front Gear) -->
|
||||
<circle cx="450" cy="560" r="28" fill="#555" stroke="#333" stroke-width="3" />
|
||||
<circle cx="450" cy="560" r="20" fill="none" stroke="#999" stroke-width="2" stroke-dasharray="4,4" />
|
||||
<!-- Chainring spokes -->
|
||||
<line x1="450" y1="532" x2="450" y2="588" stroke="#999" stroke-width="3" />
|
||||
<line x1="422" y1="560" x2="478" y2="560" stroke="#999" stroke-width="3" />
|
||||
<line x1="430" y1="540" x2="470" y2="580" stroke="#999" stroke-width="3" />
|
||||
<line x1="430" y1="580" x2="470" y2="540" stroke="#999" stroke-width="3" />
|
||||
|
||||
<!-- Chain Cover (Cruiser style element) -->
|
||||
<path d="M 250,545 L 450,540 A 25,25 0 0,1 450,580 L 250,575 A 15,15 0 0,1 250,545 Z" fill="url(#frameGrad)" opacity="0.9" stroke="#B71C1C" stroke-width="2"/>
|
||||
<path d="M 250,550 L 445,545" stroke="#FFF" stroke-width="1.5" opacity="0.5"/> <!-- Cover highlight -->
|
||||
|
||||
<!-- Right Crank -->
|
||||
<line x1="450" y1="560" x2="480" y2="615" stroke="#BDBDBD" stroke-width="10" stroke-linecap="round" filter="url(#shadow)"/>
|
||||
<line x1="450" y1="560" x2="480" y2="615" stroke="#FFF" stroke-width="2" stroke-linecap="round" opacity="0.7"/> <!-- Crank highlight -->
|
||||
|
||||
<!-- Right Pedal Base -->
|
||||
<rect x="455" y="610" width="50" height="14" rx="4" fill="#333" filter="url(#shadow)"/>
|
||||
<rect x="460" y="605" width="40" height="24" rx="2" fill="none" stroke="#999" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
<!-- ================= PELICAN RIGHT LEG ================= -->
|
||||
<g filter="url(#shadow)">
|
||||
<!-- Thigh (Foreground) -->
|
||||
<path d="M 390,340 C 430,360 450,420 440,460 C 410,450 380,390 390,340 Z" fill="url(#pelicanShade)" />
|
||||
<!-- Fluff overlapping thigh -->
|
||||
<path d="M 380,340 C 420,360 440,400 430,420 C 400,410 370,360 380,340 Z" fill="#FFFFFF" />
|
||||
|
||||
<!-- Lower Leg -->
|
||||
<line x1="435" y1="455" x2="475" y2="610" stroke="#F39C12" stroke-width="14" stroke-linecap="round" />
|
||||
<!-- Leg Highlight -->
|
||||
<line x1="433" y1="455" x2="473" y2="610" stroke="#F1C40F" stroke-width="4" stroke-linecap="round" />
|
||||
<!-- Leg Joint (Knee/Ankle scale detail) -->
|
||||
<line x1="430" y1="455" x2="445" y2="455" stroke="#D35400" stroke-width="3" />
|
||||
<line x1="440" y1="475" x2="455" y2="475" stroke="#D35400" stroke-width="3" opacity="0.6"/>
|
||||
<line x1="450" y1="515" x2="465" y2="515" stroke="#D35400" stroke-width="3" opacity="0.6"/>
|
||||
|
||||
<!-- Right Webbed Foot (Wrapping the pedal) -->
|
||||
<path d="M 465,600 Q 490,590 515,605 Q 490,630 460,620 Z" fill="#E67E22" />
|
||||
<path d="M 470,605 Q 490,595 510,605 Q 490,620 465,615 Z" fill="#F39C12" />
|
||||
<!-- Toe nails / web lines -->
|
||||
<path d="M 475,605 L 515,605" stroke="#D35400" stroke-width="2" />
|
||||
<path d="M 470,610 L 505,615" stroke="#D35400" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ================= FOREGROUND / VIVID DETAILS ================= -->
|
||||
<!-- Palm Tree Fronds (Top Left Corner) -->
|
||||
<g filter="url(#shadow)">
|
||||
<!-- Branch 1 -->
|
||||
<path d="M -20,-20 Q 150,50 300,120" fill="none" stroke="#556B2F" stroke-width="6" stroke-linecap="round"/>
|
||||
<path d="M 20,0 Q 80,40 60,80 Q 90,40 100,20 Z" fill="#4CAF50" />
|
||||
<path d="M 60,20 Q 120,60 100,100 Q 130,60 140,40 Z" fill="#388E3C" />
|
||||
<path d="M 100,40 Q 160,80 140,120 Q 170,80 180,60 Z" fill="#4CAF50" />
|
||||
<path d="M 140,60 Q 200,100 180,140 Q 210,100 220,80 Z" fill="#388E3C" />
|
||||
<path d="M 180,80 Q 240,120 220,160 Q 250,120 260,100 Z" fill="#4CAF50" />
|
||||
<path d="M 220,100 Q 280,140 260,180 Q 290,140 300,120 Z" fill="#388E3C" />
|
||||
|
||||
<!-- Branch 2 -->
|
||||
<path d="M -20,20 Q 80,120 180,250" fill="none" stroke="#556B2F" stroke-width="5" stroke-linecap="round"/>
|
||||
<path d="M 0,40 Q 40,100 20,130 Q 60,90 80,70 Z" fill="#2E7D32" />
|
||||
<path d="M 30,70 Q 70,130 50,160 Q 90,120 110,100 Z" fill="#4CAF50" />
|
||||
<path d="M 60,100 Q 100,160 80,190 Q 120,150 140,130 Z" fill="#2E7D32" />
|
||||
<path d="M 90,130 Q 130,190 110,220 Q 150,180 170,160 Z" fill="#4CAF50" />
|
||||
<path d="M 120,160 Q 160,220 140,250 Q 180,210 200,190 Z" fill="#2E7D32" />
|
||||
</g>
|
||||
|
||||
<!-- Starfish on the beach (Bottom Right) -->
|
||||
<g transform="translate(850, 620) rotate(15)" filter="url(#shadow)">
|
||||
<polygon points="0,-20 5,-5 20,-5 8,5 12,20 0,10 -12,20 -8,5 -20,-5 -5,-5" fill="#FF7043" stroke="#E64A19" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<!-- Starfish bumps -->
|
||||
<circle cx="0" cy="0" r="1.5" fill="#FFF" opacity="0.6"/>
|
||||
<circle cx="0" cy="-10" r="1" fill="#FFF" opacity="0.6"/>
|
||||
<circle cx="10" cy="-3" r="1" fill="#FFF" opacity="0.6"/>
|
||||
<circle cx="-10" cy="-3" r="1" fill="#FFF" opacity="0.6"/>
|
||||
<circle cx="5" cy="10" r="1" fill="#FFF" opacity="0.6"/>
|
||||
<circle cx="-5" cy="10" r="1" fill="#FFF" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- Seashell (Bottom Left) -->
|
||||
<g transform="translate(100, 640) rotate(-20)" filter="url(#shadow)">
|
||||
<path d="M 0,0 C 15,-15 25,-10 30,0 C 25,10 15,15 0,0 Z" fill="#FFCCBC" stroke="#D84315" stroke-width="1" />
|
||||
<!-- Shell ridges -->
|
||||
<path d="M 5,-2 L 25,-2" stroke="#D84315" stroke-width="0.5" />
|
||||
<path d="M 5,2 L 25,2" stroke="#D84315" stroke-width="0.5" />
|
||||
<path d="M 8,-5 L 22,-5" stroke="#D84315" stroke-width="0.5" />
|
||||
<path d="M 8,5 L 22,5" stroke="#D84315" stroke-width="0.5" />
|
||||
</g>
|
||||
|
||||
<!-- Sea Grass / Reeds on the beach -->
|
||||
<g stroke="#689F38" fill="none" stroke-linecap="round">
|
||||
<path d="M 50,680 Q 40,650 60,630" stroke-width="3" />
|
||||
<path d="M 55,680 Q 60,650 45,640" stroke-width="2" />
|
||||
<path d="M 60,680 Q 75,660 70,635" stroke-width="2.5" />
|
||||
|
||||
<path d="M 920,680 Q 900,650 910,620" stroke-width="3" />
|
||||
<path d="M 930,680 Q 940,660 950,630" stroke-width="2.5" />
|
||||
<path d="M 940,680 Q 960,650 975,640" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
<!-- Ambient Light Overlay (Warm Golden Hour Glow) -->
|
||||
<rect x="0" y="0" width="1000" height="700" fill="#FF9800" opacity="0.05" style="mix-blend-mode: overlay;" pointer-events="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,342 @@
|
||||
<svg viewBox="0 0 800 600" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- 天空渐变 -->
|
||||
<linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1A3060" />
|
||||
<stop offset="40%" stop-color="#C25A7C" />
|
||||
<stop offset="70%" stop-color="#EC7D52" />
|
||||
<stop offset="100%" stop-color="#FCD0A1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 太阳径向渐变 -->
|
||||
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFDF0" stop-opacity="1" />
|
||||
<stop offset="40%" stop-color="#FFE090" stop-opacity="0.8" />
|
||||
<stop offset="100%" stop-color="#FCD0A1" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
<!-- 海水渐变 -->
|
||||
<linearGradient id="seaGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22607A" />
|
||||
<stop offset="100%" stop-color="#0F2042" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 沙滩渐变 -->
|
||||
<linearGradient id="sandGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#EED59B" />
|
||||
<stop offset="100%" stop-color="#C5A363" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 云朵渐变 -->
|
||||
<linearGradient id="cloudGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.3" />
|
||||
<stop offset="100%" stop-color="#FCD0A1" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 鹈鹕羽毛阴影渐变 -->
|
||||
<linearGradient id="pelicanShadow" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" />
|
||||
<stop offset="85%" stop-color="#F1F5F9" />
|
||||
<stop offset="100%" stop-color="#CBD5E1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 鹈鹕大嘴渐变 -->
|
||||
<linearGradient id="beakGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#FBBF24" />
|
||||
<stop offset="70%" stop-color="#F59E0B" />
|
||||
<stop offset="100%" stop-color="#D97706" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 鹈鹕喉囊渐变 -->
|
||||
<linearGradient id="pouchGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FDA4AF" />
|
||||
<stop offset="50%" stop-color="#F87171" />
|
||||
<stop offset="100%" stop-color="#FB923C" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 自行车车轮组件 -->
|
||||
<g id="wheel">
|
||||
<!-- 轮胎 -->
|
||||
<circle cx="0" cy="0" r="55" fill="none" stroke="#2D3748" stroke-width="12" />
|
||||
<!-- 车胎内圈胎纹 -->
|
||||
<circle cx="0" cy="0" r="49" fill="none" stroke="#1A202C" stroke-width="1.5" />
|
||||
<!-- 轮毂 -->
|
||||
<circle cx="0" cy="0" r="47" fill="none" stroke="#E2E8F0" stroke-width="2" />
|
||||
<!-- 辐条 -->
|
||||
<path d="M-47 0 L47 0 M0 -47 L0 47 M-33 -33 L33 33 M-33 33 L33 -33 M-43 -18 L43 18 M-43 18 L43 -18 M-18 -43 L18 43 M-18 43 L18 -43" stroke="#94A3B8" stroke-width="1" opacity="0.7" />
|
||||
<!-- 轴心 -->
|
||||
<circle cx="0" cy="0" r="9" fill="#4A5568" />
|
||||
<circle cx="0" cy="0" r="5" fill="#718096" />
|
||||
</g>
|
||||
</defs>
|
||||
|
||||
<!-- BACKGROUND: 天空 -->
|
||||
<rect width="800" height="420" fill="url(#skyGrad)" />
|
||||
|
||||
<!-- 太阳 -->
|
||||
<circle cx="380" cy="270" r="100" fill="url(#sunGrad)" />
|
||||
|
||||
<!-- 背景远山/海岛 -->
|
||||
<path d="M-50 350 Q 80 320 200 340 T 450 350 T 700 345 T 850 350 L 850 370 L -50 370 Z" fill="#4A4161" opacity="0.4" />
|
||||
|
||||
<!-- 远处的云 -->
|
||||
<path d="M 120 180 Q 150 160 180 180 T 240 180 L 240 200 L 120 200 Z" fill="url(#cloudGrad)" />
|
||||
<path d="M 550 140 Q 580 120 610 140 T 670 140 L 670 160 L 550 160 Z" fill="url(#cloudGrad)" />
|
||||
|
||||
<!-- 海燕/海鸥(远景) -->
|
||||
<path d="M 150 90 Q 155 83 160 90 Q 165 83 170 90" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round" />
|
||||
<path d="M 185 105 Q 189 100 193 105 Q 197 100 201 105" fill="none" stroke="#475569" stroke-width="1.5" stroke-linecap="round" />
|
||||
<path d="M 480 110 Q 488 100 496 110 Q 504 100 512 110" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round" />
|
||||
|
||||
<!-- MIDDLEGROUND: 大海 -->
|
||||
<path d="M -50 350 Q 200 330 450 355 T 850 350 L 850 450 L -50 450 Z" fill="url(#seaGrad)" />
|
||||
|
||||
<!-- 太阳在海面的金色波光 -->
|
||||
<g opacity="0.6">
|
||||
<ellipse cx="380" cy="360" rx="90" ry="2" fill="#FFE090" />
|
||||
<ellipse cx="375" cy="370" rx="130" ry="3" fill="#FFE090" />
|
||||
<ellipse cx="385" cy="385" rx="100" ry="2.5" fill="#FFE090" />
|
||||
<ellipse cx="380" cy="400" rx="70" ry="2" fill="#FFE090" />
|
||||
<ellipse cx="380" cy="415" rx="40" ry="1.5" fill="#FFE090" />
|
||||
</g>
|
||||
|
||||
<!-- 岸边的浪花细线 -->
|
||||
<path d="M 50 425 Q 200 410 400 425 T 750 420" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" opacity="0.5" />
|
||||
<path d="M 100 435 Q 300 420 500 435 T 850 430" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" opacity="0.4" />
|
||||
|
||||
<!-- FOREGROUND: 沙滩路段 -->
|
||||
<path d="M -50 425 Q 350 400 850 440 L 850 650 L -50 650 Z" fill="url(#sandGrad)" />
|
||||
<!-- 潮湿沙滩反光带 -->
|
||||
<path d="M -50 425 Q 350 400 850 440 L 850 460 L -50 445 Z" fill="#E2C98F" opacity="0.6" />
|
||||
|
||||
<!-- 背景海滩植物(左侧) -->
|
||||
<g fill="#2D3748" opacity="0.85">
|
||||
<path d="M 10 440 Q 5 380 -10 350 Q 15 390 25 440" />
|
||||
<path d="M 25 440 Q 30 360 50 330 Q 45 380 35 440" />
|
||||
<path d="M 35 440 Q 55 370 85 350 Q 65 390 45 440" />
|
||||
</g>
|
||||
|
||||
<!-- 自行车投影(使画面写实的关键细节) -->
|
||||
<ellipse cx="280" cy="565" rx="65" ry="12" fill="#78350F" opacity="0.35" />
|
||||
<ellipse cx="520" cy="565" rx="65" ry="12" fill="#78350F" opacity="0.35" />
|
||||
<ellipse cx="400" cy="565" rx="80" ry="15" fill="#78350F" opacity="0.25" />
|
||||
|
||||
<!-- 自行车组件:后半部分 (置于躯干后方) -->
|
||||
<!-- 后轮 -->
|
||||
<use href="#wheel" x="280" y="510" />
|
||||
<!-- 后挡泥板(复古奶油黄) -->
|
||||
<path d="M 215 510 A 65 65 0 0 1 338 468" fill="none" stroke="#FEF08A" stroke-width="8" stroke-linecap="round" />
|
||||
<path d="M 215 510 A 65 65 0 0 1 338 468" fill="none" stroke="#E2E8F0" stroke-width="2" stroke-linecap="round" opacity="0.5" />
|
||||
<!-- 后泥板支架 -->
|
||||
<line x1="280" y1="510" x2="225" y2="490" stroke="#94A3B8" stroke-width="2" />
|
||||
<line x1="280" y1="510" x2="255" y2="460" stroke="#94A3B8" stroke-width="2" />
|
||||
|
||||
<!-- 自行车传动系统 -->
|
||||
<!-- 链条暗部与亮部 -->
|
||||
<path d="M 380 495 L 280 502 M 380 525 L 280 518" fill="none" stroke="#334155" stroke-width="3" />
|
||||
<path d="M 380 495 L 280 502 M 380 525 L 280 518" fill="none" stroke="#94A3B8" stroke-width="1" />
|
||||
<!-- 牙盘 -->
|
||||
<circle cx="380" cy="510" r="19" fill="#E2E8F0" stroke="#475569" stroke-width="2" />
|
||||
<circle cx="380" cy="510" r="14" fill="#334155" />
|
||||
<!-- 背景脚踏板与腿 (处于车身另一侧) -->
|
||||
<line x1="345" y1="440" x2="360" y2="540" stroke="#C2410C" stroke-width="8" stroke-linecap="round" opacity="0.8" />
|
||||
<path d="M 360 540 Q 380 545 385 550 Q 365 555 350 545 Z" fill="#9A3412" opacity="0.8" />
|
||||
<line x1="380" y1="510" x2="360" y2="540" stroke="#64748B" stroke-width="5" stroke-linecap="round" opacity="0.8" />
|
||||
<line x1="350" y1="540" x2="370" y2="540" stroke="#1E293B" stroke-width="5" stroke-linecap="round" opacity="0.8" />
|
||||
|
||||
<!-- 自行车车架 (主结构) -->
|
||||
<!-- 湖蓝色复古车架 -->
|
||||
<line x1="380" y1="510" x2="345" y2="422" stroke="#06B6D4" stroke-width="8" stroke-linecap="round" /> <!-- 立管 -->
|
||||
<line x1="280" y1="510" x2="380" y2="510" stroke="#06B6D4" stroke-width="8" stroke-linecap="round" /> <!-- 平叉 -->
|
||||
<line x1="280" y1="510" x2="345" y2="422" stroke="#06B6D4" stroke-width="5" stroke-linecap="round" /> <!-- 后斜撑 -->
|
||||
<line x1="380" y1="510" x2="480" y2="390" stroke="#06B6D4" stroke-width="9" stroke-linecap="round" /> <!-- 下管 -->
|
||||
<path d="M 345 435 Q 410 420 480 390" fill="none" stroke="#06B6D4" stroke-width="8" stroke-linecap="round" /> <!-- 弯曲上管 -->
|
||||
|
||||
<!-- 复古皮革车座 -->
|
||||
<path d="M 322 415 Q 350 405 368 418 Q 360 426 345 423 L 322 422 Z" fill="#78350F" />
|
||||
<path d="M 322 415 Q 350 405 360 415" fill="none" stroke="#B45309" stroke-width="2" />
|
||||
<rect x="340" y="422" width="6" height="10" fill="#94A3B8" />
|
||||
|
||||
<!-- 自行车前半部分 -->
|
||||
<!-- 前轮 -->
|
||||
<use href="#wheel" x="520" y="510" />
|
||||
<!-- 前挡泥板 -->
|
||||
<path d="M 480 465 A 65 65 0 0 1 580 515" fill="none" stroke="#FEF08A" stroke-width="8" stroke-linecap="round" />
|
||||
<path d="M 480 465 A 65 65 0 0 1 580 515" fill="none" stroke="#E2E8F0" stroke-width="2" stroke-linecap="round" opacity="0.5" />
|
||||
<!-- 前叉 -->
|
||||
<line x1="480" y1="390" x2="520" y2="510" stroke="#06B6D4" stroke-width="7" stroke-linecap="round" />
|
||||
<line x1="480" y1="390" x2="475" y2="345" stroke="#94A3B8" stroke-width="6" stroke-linecap="round" /> <!-- 车把立管 -->
|
||||
|
||||
<!-- 复古燕把 -->
|
||||
<path d="M 475 345 Q 455 338 430 360" fill="none" stroke="#94A3B8" stroke-width="5" stroke-linecap="round" />
|
||||
<path d="M 475 345 Q 490 340 500 350" fill="none" stroke="#94A3B8" stroke-width="4" stroke-linecap="round" opacity="0.7" /> <!-- 右车把微露 -->
|
||||
<line x1="435" y1="356" x2="425" y2="363" stroke="#1E293B" stroke-width="7" stroke-linecap="round" /> <!-- 黑色把套 -->
|
||||
|
||||
<!-- 车筐 (藤编效果) -->
|
||||
<g>
|
||||
<!-- 挂接架 -->
|
||||
<line x1="475" y1="355" x2="490" y2="365" stroke="#475569" stroke-width="3" />
|
||||
<line x1="480" y1="390" x2="495" y2="395" stroke="#475569" stroke-width="3" />
|
||||
<!-- 车筐主体 -->
|
||||
<rect x="490" y="360" width="48" height="38" rx="6" fill="#D97706" stroke="#92400E" stroke-width="2" />
|
||||
<!-- 藤编网格纹理 -->
|
||||
<line x1="490" y1="370" x2="538" y2="370" stroke="#78350F" stroke-width="1.5" />
|
||||
<line x1="490" y1="380" x2="538" y2="380" stroke="#78350F" stroke-width="1.5" />
|
||||
<line x1="490" y1="390" x2="538" y2="390" stroke="#78350F" stroke-width="1.5" />
|
||||
<line x1="500" y1="360" x2="500" y2="398" stroke="#78350F" stroke-width="1.5" />
|
||||
<line x1="514" y1="360" x2="514" y2="398" stroke="#78350F" stroke-width="1.5" />
|
||||
<line x1="528" y1="360" x2="528" y2="398" stroke="#78350F" stroke-width="1.5" />
|
||||
<!-- 车筐里盛开的鲜花与绿叶 -->
|
||||
<path d="M 522 355 Q 535 345 528 360 Z" fill="#22C55E" />
|
||||
<circle cx="522" cy="358" r="7" fill="#EF4444" />
|
||||
<circle cx="522" cy="358" r="2.5" fill="#FCD34D" />
|
||||
<path d="M 498 358 Q 485 350 495 360 Z" fill="#10B981" />
|
||||
<circle cx="502" cy="358" r="6" fill="#F43F5E" />
|
||||
<circle cx="502" cy="358" r="2" fill="#FBBF24" />
|
||||
</g>
|
||||
|
||||
|
||||
<!-- SUBJECT: 鹈鹕 -->
|
||||
|
||||
<!-- 远侧翅膀 (微露) -->
|
||||
<path d="M 330 350 C 335 325 360 330 375 342 C 370 355 350 360 330 350 Z" fill="#CBD5E1" opacity="0.7" />
|
||||
|
||||
<!-- 尾羽 -->
|
||||
<g>
|
||||
<path d="M 275 395 C 250 390 240 405 230 400 C 248 415 268 410 278 402 Z" fill="#CBD5E1" />
|
||||
<path d="M 280 390 C 255 380 245 395 235 390 C 252 405 272 400 282 395 Z" fill="#E2E8F0" />
|
||||
</g>
|
||||
|
||||
<!-- 身体躯干 (丰满厚重) -->
|
||||
<path d="M 345 425 C 290 425 278 395 270 395 C 290 375 315 358 355 358 C 390 358 402 390 385 415 C 375 425 360 425 345 425 Z" fill="url(#pelicanShadow)" stroke="#E2E8F0" stroke-width="1" />
|
||||
|
||||
<!-- S型修长的脖子 -->
|
||||
<path d="M 345 360 C 330 305 352 255 378 248 C 388 243 392 228 388 212 C 398 212 408 232 398 252 C 382 272 368 308 375 360 Z" fill="url(#pelicanShadow)" />
|
||||
|
||||
<!-- 随风飘扬的红色围巾 (动感核心) -->
|
||||
<g>
|
||||
<!-- 飘带 1 -->
|
||||
<path d="M 368 275 C 320 270 290 240 245 260 C 285 280 318 290 368 277 Z" fill="#DC2626" />
|
||||
<!-- 飘带 2 -->
|
||||
<path d="M 368 275 C 310 280 280 270 235 290 C 275 305 308 300 368 277 Z" fill="#991B1B" />
|
||||
<!-- 围巾结 -->
|
||||
<ellipse cx="372" cy="275" rx="14" ry="8" transform="rotate(-15 372 275)" fill="#EF4444" />
|
||||
<ellipse cx="372" cy="275" rx="10" ry="5" transform="rotate(-15 372 275)" fill="#F87171" opacity="0.6" />
|
||||
</g>
|
||||
|
||||
<!-- 头部 -->
|
||||
<path d="M 370 215 C 365 190 380 180 405 185 C 418 190 422 205 410 220 C 400 230 380 230 370 215 Z" fill="url(#pelicanShadow)" />
|
||||
<!-- 后脑勺的呆毛/羽冠 -->
|
||||
<path d="M 370 200 Q 352 188 358 182 Q 358 195 370 205" fill="#CBD5E1" />
|
||||
<path d="M 373 192 Q 355 180 360 175 Q 361 188 372 196" fill="#E2E8F0" />
|
||||
|
||||
<!-- 喉囊 (大而富有质感) -->
|
||||
<g>
|
||||
<path d="M 410 218 C 435 240 420 295 382 295 C 368 295 368 265 375 245 Z" fill="url(#pouchGrad)" />
|
||||
<!-- 喉囊纹理褶皱 -->
|
||||
<path d="M 400 240 Q 390 265 377 270" fill="none" stroke="#EF4444" stroke-width="1.5" opacity="0.4" />
|
||||
<path d="M 408 235 Q 398 265 382 278" fill="none" stroke="#EF4444" stroke-width="1.5" opacity="0.4" />
|
||||
<path d="M 414 230 Q 406 260 388 285" fill="none" stroke="#EF4444" stroke-width="1.5" opacity="0.4" />
|
||||
</g>
|
||||
|
||||
<!-- 巨大的眼睑与灵动的眼睛 -->
|
||||
<g>
|
||||
<path d="M 383 198 Q 395 188 406 203" fill="none" stroke="#E2E8F0" stroke-width="3.5" stroke-linecap="round" />
|
||||
<circle cx="395" cy="202" r="8" fill="#FBBF24" /> <!-- 鲜艳的黄眼圈 -->
|
||||
<circle cx="395" cy="202" r="4.5" fill="#1E293B" />
|
||||
<circle cx="393.5" cy="200.5" r="1.5" fill="#FFFFFF" /> <!-- 高光 -->
|
||||
</g>
|
||||
|
||||
<!-- 标致性的大长嘴 -->
|
||||
<g>
|
||||
<!-- 上喙 -->
|
||||
<path d="M 405 195 Q 480 205 540 225 Q 545 228 542 235 Q 530 235 515 230 L 410 218 Z" fill="url(#beakGrad)" />
|
||||
<!-- 尖端标志性的红色鹰钩 -->
|
||||
<path d="M 535 223 Q 544 226 542 235 Q 534 235 528 228 Z" fill="#EF4444" />
|
||||
<!-- 上喙反光线 -->
|
||||
<path d="M 412 198 Q 480 208 532 226" fill="none" stroke="#FFF" stroke-width="2.5" opacity="0.6" stroke-linecap="round" />
|
||||
<!-- 下喙 -->
|
||||
<path d="M 410 218 L 515 230 Q 520 232 515 235 L 410 226 Z" fill="#F59E0B" />
|
||||
</g>
|
||||
|
||||
<!-- 近侧大腿 -->
|
||||
<path d="M 345 425 Q 365 430 365 450 Q 345 455 340 425 Z" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" />
|
||||
<!-- 橙色的小腿 -->
|
||||
<line x1="355" y1="445" x2="400" y2="480" stroke="#FB923C" stroke-width="8" stroke-linecap="round" />
|
||||
<!-- 踩在踏板上的橙红色鸭蹼脚 -->
|
||||
<g>
|
||||
<path d="M 400 480 L 428 475 L 432 485 L 402 490 Z" fill="#EA580C" />
|
||||
<!-- 蹼爪骨骼线 -->
|
||||
<line x1="400" y1="480" x2="428" y2="475" stroke="#F97316" stroke-width="2.5" />
|
||||
<line x1="400" y1="480" x2="432" y2="485" stroke="#F97316" stroke-width="2.5" />
|
||||
<line x1="400" y1="480" x2="415" y2="492" stroke="#F97316" stroke-width="2.5" />
|
||||
<!-- 黑色利爪微显 -->
|
||||
<circle cx="428" cy="475" r="1.5" fill="#1E293B" />
|
||||
<circle cx="432" cy="485" r="1.5" fill="#1E293B" />
|
||||
</g>
|
||||
|
||||
<!-- 近侧脚踏板 (盖在脚掌上) -->
|
||||
<line x1="380" y1="510" x2="400" y2="480" stroke="#CBD5E1" stroke-width="6" stroke-linecap="round" /> <!-- 曲柄 -->
|
||||
<line x1="390" y1="480" x2="415" y2="480" stroke="#475569" stroke-width="5" stroke-linecap="round" /> <!-- 踏板 -->
|
||||
|
||||
<!-- 近侧翅膀 (富有层次感,紧握车把) -->
|
||||
<g>
|
||||
<!-- 翅膀根部 -->
|
||||
<path d="M 340 360 C 350 330 385 330 408 350 C 388 368 360 372 340 360 Z" fill="#FFFFFF" stroke="#F1F5F9" stroke-width="1" />
|
||||
<!-- 中层羽毛 (浅灰色过渡) -->
|
||||
<path d="M 350 365 C 370 345 398 345 418 365 C 398 382 370 382 350 365 Z" fill="#E2E8F0" />
|
||||
<!-- 飞羽/初级飞羽 (呈握持姿态,深色,符合野生鹈鹕特征) -->
|
||||
<!-- 羽毛手指 1 (握在把手上) -->
|
||||
<path d="M 370 370 Q 410 365 435 365 Q 430 376 398 382 Z" fill="#475569" />
|
||||
<!-- 羽毛手指 2 -->
|
||||
<path d="M 380 375 Q 415 370 432 373 Q 425 384 392 387 Z" fill="#1E293B" />
|
||||
<!-- 羽毛手指 3 -->
|
||||
<path d="M 390 380 Q 415 378 428 381 Q 420 392 388 392 Z" fill="#0F172A" />
|
||||
</g>
|
||||
|
||||
|
||||
<!-- FOREGROUND: 近景环境(增强纵深感与真实感) -->
|
||||
|
||||
<!-- 右侧巨大的椰子树剪影 (框架构图) -->
|
||||
<g>
|
||||
<!-- 树干 -->
|
||||
<path d="M 800 650 Q 750 350 740 180 Q 748 178 755 180 Q 765 350 815 650 Z" fill="#1E293B" />
|
||||
<!-- 树干环形树纹 -->
|
||||
<g stroke="#0F172A" stroke-width="2" opacity="0.4">
|
||||
<path d="M 790 580 Q 770 575 752 578" />
|
||||
<path d="M 780 520 Q 762 515 746 518" />
|
||||
<path d="M 770 460 Q 754 455 741 458" />
|
||||
<path d="M 761 400 Q 746 395 736 398" />
|
||||
<path d="M 753 340 Q 740 335 732 338" />
|
||||
<path d="M 748 280 Q 736 275 730 278" />
|
||||
<path d="M 744 220 Q 736 215 732 218" />
|
||||
</g>
|
||||
<!-- 繁茂的椰树叶 -->
|
||||
<!-- 叶 1 (左下垂) -->
|
||||
<path d="M 745 180 Q 630 165 545 220 Q 640 195 745 180" fill="#1E293B" />
|
||||
<!-- 叶 2 (左中) -->
|
||||
<path d="M 745 180 Q 650 100 575 135 Q 660 140 745 180" fill="#1E1B4B" />
|
||||
<!-- 叶 3 (向上) -->
|
||||
<path d="M 745 180 Q 710 70 665 60 Q 710 105 745 180" fill="#1E293B" />
|
||||
<!-- 叶 4 (右伸) -->
|
||||
<path d="M 745 180 Q 790 70 835 80 Q 780 115 745 180" fill="#1E1B4B" />
|
||||
<!-- 叶 5 (右下垂) -->
|
||||
<path d="M 745 180 Q 840 140 875 185 Q 810 165 745 180" fill="#1E293B" />
|
||||
</g>
|
||||
|
||||
<!-- 左前角沙滩小草(前景遮挡) -->
|
||||
<g fill="#1E293B">
|
||||
<path d="M -10 600 Q 15 540 -5 500 Q 25 550 35 600 Z" />
|
||||
<path d="M 15 600 Q 40 520 60 470 Q 55 540 45 600 Z" opacity="0.9" />
|
||||
<path d="M 35 600 Q 65 530 95 500 Q 75 550 55 600 Z" opacity="0.8" />
|
||||
</g>
|
||||
|
||||
<!-- 车轮扬起的一丝沙尘 (点缀动感) -->
|
||||
<g fill="#C5A363" opacity="0.6">
|
||||
<circle cx="210" cy="560" r="3" />
|
||||
<circle cx="225" cy="552" r="2" />
|
||||
<circle cx="200" cy="565" r="1.5" />
|
||||
<circle cx="455" cy="562" r="2.5" />
|
||||
<circle cx="445" cy="558" r="1.5" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,407 @@
|
||||
<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="#1E1B4B" /> <!-- 深邃夜色 -->
|
||||
<stop offset="40%" stop-color="#701A75" /> <!-- 梦幻紫红 -->
|
||||
<stop offset="75%" stop-color="#F43F5E" /> <!-- 晚霞红 -->
|
||||
<stop offset="100%" stop-color="#F97316" /> <!-- 温暖橙黄 -->
|
||||
</linearGradient>
|
||||
|
||||
<!-- 太阳光晕 -->
|
||||
<radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFDE7" stop-opacity="1" />
|
||||
<stop offset="30%" stop-color="#FDE047" stop-opacity="0.8" />
|
||||
<stop offset="60%" stop-color="#F43F5E" stop-opacity="0.3" />
|
||||
<stop offset="100%" stop-color="#F97316" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
<!-- 海洋渐变 -->
|
||||
<linearGradient id="seaGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#F43F5E" /> <!-- 倒映天空 -->
|
||||
<stop offset="20%" stop-color="#4F46E5" /> <!-- 深蓝 -->
|
||||
<stop offset="60%" stop-color="#0E7490" /> <!-- 碧绿 -->
|
||||
<stop offset="100%" stop-color="#083344" /> <!-- 暗青 -->
|
||||
</linearGradient>
|
||||
|
||||
<!-- 沙滩渐变 -->
|
||||
<linearGradient id="sandGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FEF08A" /> <!-- 潮湿的金色沙子 -->
|
||||
<stop offset="30%" stop-color="#EAB308" />
|
||||
<stop offset="100%" stop-color="#854D0E" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 鹈鹕喙部渐变 -->
|
||||
<linearGradient id="beakGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#FED7AA" />
|
||||
<stop offset="70%" stop-color="#F97316" />
|
||||
<stop offset="100%" stop-color="#EA580C" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 鹈鹕喉囊(半透明) -->
|
||||
<linearGradient id="pouchGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FB7185" stop-opacity="0.9" />
|
||||
<stop offset="100%" stop-color="#FDA4AF" stop-opacity="0.6" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 自行车车架薄荷绿 -->
|
||||
<linearGradient id="mintGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#99F6E4" />
|
||||
<stop offset="100%" stop-color="#0F766E" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 金属铬质感 -->
|
||||
<linearGradient id="chromeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#F1F5F9" />
|
||||
<stop offset="50%" stop-color="#94A3B8" />
|
||||
<stop offset="100%" stop-color="#475569" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 柔和阴影滤镜 -->
|
||||
<filter id="softShadow" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="6" flood-color="#1E293B" flood-opacity="0.4" />
|
||||
</filter>
|
||||
|
||||
<!-- 模糊发光滤镜 -->
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="10" result="blur" />
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- ==================== 背景层 ==================== -->
|
||||
<!-- 天空 -->
|
||||
<rect width="1000" height="700" fill="url(#skyGrad)" />
|
||||
|
||||
<!-- 太阳与光晕 -->
|
||||
<circle cx="500" cy="380" r="280" fill="url(#sunGlow)" opacity="0.6" />
|
||||
<circle cx="500" cy="380" r="140" fill="url(#sunGlow)" opacity="0.9" />
|
||||
<circle cx="500" cy="380" r="60" fill="#FFFDF5" filter="url(#glow)" />
|
||||
|
||||
<!-- 远山/海岛剪影 -->
|
||||
<path d="M 0 420 Q 200 390 400 420 T 800 410 T 1000 420 L 1000 440 L 0 440 Z" fill="#4D0E4E" opacity="0.5" />
|
||||
|
||||
<!-- 海洋与海浪 -->
|
||||
<path d="M 0 420 Q 250 410 500 425 T 1000 420 L 1000 520 Q 750 530 500 515 T 0 520 Z" fill="url(#seaGrad)" />
|
||||
<!-- 海浪波光 -->
|
||||
<path d="M 0 440 Q 300 425 600 445 T 1000 435" stroke="#FCE7F3" stroke-width="2" fill="none" opacity="0.4" />
|
||||
<path d="M 0 470 Q 200 485 500 465 T 1000 480" stroke="#FBCFE8" stroke-width="3" fill="none" opacity="0.3" />
|
||||
<ellipse cx="500" cy="435" rx="120" ry="2" fill="#FFFDE7" opacity="0.7" filter="url(#glow)" />
|
||||
<ellipse cx="480" cy="455" rx="80" ry="1.5" fill="#FFFDE7" opacity="0.6" />
|
||||
<ellipse cx="520" cy="480" rx="150" ry="2" fill="#FFFDE7" opacity="0.4" filter="url(#glow)" />
|
||||
|
||||
<!-- 远景飞鸟 -->
|
||||
<g stroke="#701A75" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.6">
|
||||
<path d="M 780 160 Q 788 150 796 160 Q 804 150 812 160" />
|
||||
<path d="M 830 135 Q 836 127 842 135 Q 848 127 854 135" stroke-width="1.5" />
|
||||
<path d="M 750 120 Q 754 114 758 120 Q 762 114 766 120" stroke-width="1" />
|
||||
</g>
|
||||
|
||||
<!-- 左侧椰子树剪影 -->
|
||||
<g fill="#1E1B4B" opacity="0.85">
|
||||
<path d="M -20 700 Q 80 400 30 150 C 35 150 45 150 50 150 Q 100 400 0 700 Z" />
|
||||
<!-- 椰叶 -->
|
||||
<path d="M 35 150 Q -30 140 -80 180 Q -20 170 35 150" />
|
||||
<path d="M 35 150 Q 10 90 -20 50 Q 5 100 35 150" />
|
||||
<path d="M 35 150 Q 80 80 140 60 Q 85 110 35 150" />
|
||||
<path d="M 35 150 Q 110 140 160 200 Q 90 170 35 150" />
|
||||
<path d="M 35 150 Q 60 210 50 270 Q 40 200 35 150" />
|
||||
</g>
|
||||
|
||||
<!-- 沙滩 -->
|
||||
<path d="M 0 510 Q 350 490 700 525 T 1000 510 L 1000 700 L 0 700 Z" fill="url(#sandGrad)" />
|
||||
<!-- 沙滩纹理与潮汐线 -->
|
||||
<path d="M 0 540 Q 450 515 1000 550" stroke="#CA8A04" stroke-width="4" fill="none" opacity="0.4" />
|
||||
<path d="M 0 590 Q 500 570 1000 600" stroke="#854D0E" stroke-width="3" fill="none" opacity="0.3" />
|
||||
|
||||
<!-- 自行车与人物整体阴影 -->
|
||||
<ellipse cx="500" cy="635" rx="280" ry="18" fill="#451A03" opacity="0.6" filter="url(#glow)" />
|
||||
|
||||
|
||||
<!-- ==================== 自行车背景部分 ==================== -->
|
||||
<!-- 后车轮 -->
|
||||
<g id="rear-wheel">
|
||||
<!-- 轮胎 -->
|
||||
<circle cx="320" cy="520" r="110" fill="none" stroke="#1E293B" stroke-width="18" />
|
||||
<!-- 复古白边胎侧 -->
|
||||
<circle cx="320" cy="520" r="100" fill="none" stroke="#FEF08A" stroke-width="8" />
|
||||
<!-- 车圈 -->
|
||||
<circle cx="320" cy="520" r="91" fill="none" stroke="url(#chromeGrad)" stroke-width="6" />
|
||||
<!-- 车辐条 -->
|
||||
<g stroke="#E2E8F0" stroke-width="1.5" opacity="0.7">
|
||||
<line x1="320" y1="410" x2="320" y2="630" />
|
||||
<line x1="210" y1="520" x2="430" y2="520" />
|
||||
<line x1="242" y1="442" x2="398" y2="598" />
|
||||
<line x1="242" y1="598" x2="398" y2="442" />
|
||||
<line x1="270" y1="425" x2="370" y2="615" />
|
||||
<line x1="370" y1="425" x2="270" y2="615" />
|
||||
<line x1="215" y1="470" x2="425" y2="570" />
|
||||
<line x1="215" y1="570" x2="425" y2="470" />
|
||||
</g>
|
||||
<!-- 轴承 -->
|
||||
<circle cx="320" cy="520" r="16" fill="url(#chromeGrad)" />
|
||||
<!-- 后泥除 (挡泥板) -->
|
||||
<path d="M 210 510 A 115 115 0 0 1 405 440" stroke="url(#mintGrad)" stroke-width="12" fill="none" stroke-linecap="round" />
|
||||
<line x1="320" y1="520" x2="225" y2="480" stroke="url(#chromeGrad)" stroke-width="3" />
|
||||
<line x1="320" y1="520" x2="265" y2="425" stroke="url(#chromeGrad)" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ==================== 鹈鹕背景部分 (后肢、后羽) ==================== -->
|
||||
<!-- 左侧翅膀 (扬起挥舞,显得生动活泼) -->
|
||||
<g id="far-wing" filter="url(#softShadow)">
|
||||
<path d="M 400 290 C 330 250 260 170 220 90 C 245 125 290 190 320 210 C 315 150 300 90 290 30 C 315 70 350 140 360 190 C 380 130 395 70 400 20 C 410 70 425 140 430 220 Z" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="2" />
|
||||
<!-- 羽毛细节阴影 -->
|
||||
<path d="M 320 210 Q 340 160 350 120" stroke="#94A3B8" stroke-width="2" fill="none" />
|
||||
<path d="M 360 190 Q 380 140 390 90" stroke="#94A3B8" stroke-width="2" fill="none" />
|
||||
</g>
|
||||
|
||||
<!-- 左腿 (踏在对侧脚踏板上) -->
|
||||
<g id="far-leg">
|
||||
<path d="M 390 410 Q 405 440 395 460" stroke="#CBD5E1" stroke-width="16" stroke-linecap="round" fill="none" />
|
||||
<path d="M 395 460 L 425 470" stroke="#D97706" stroke-width="10" stroke-linecap="round" fill="none" />
|
||||
<!-- 蹼足 -->
|
||||
<path d="M 425 470 L 450 460 L 445 480 L 420 480 Z" fill="#B45309" />
|
||||
</g>
|
||||
|
||||
<!-- 远端脚踏板 -->
|
||||
<rect x="415" y="465" width="30" height="8" rx="3" fill="#475569" opacity="0.8" />
|
||||
|
||||
|
||||
<!-- ==================== 自行车车架与传动系统 ==================== -->
|
||||
<!-- 车架钢管 -->
|
||||
<g id="frame" stroke="url(#mintGrad)" stroke-linecap="round" fill="none">
|
||||
<!-- 后平叉 -->
|
||||
<path d="M 320 520 L 480 520" stroke-width="14" />
|
||||
<!-- 后上叉 -->
|
||||
<path d="M 320 520 L 420 360" stroke-width="10" />
|
||||
<!-- 立管 -->
|
||||
<path d="M 480 520 L 420 360" stroke-width="15" />
|
||||
<!-- 弧形复古双前管 (沙滩车特色双梁) -->
|
||||
<path d="M 420 380 Q 520 370 610 320" stroke-width="12" />
|
||||
<path d="M 420 410 Q 510 410 610 340" stroke-width="10" />
|
||||
<!-- 下管 -->
|
||||
<path d="M 480 520 Q 560 500 610 330" stroke-width="15" />
|
||||
</g>
|
||||
|
||||
<!-- 链条罩与链条 -->
|
||||
<path d="M 315 510 L 485 500 Q 505 500 505 520 Q 505 540 485 540 L 315 530 Z" fill="url(#mintGrad)" stroke="#0F766E" stroke-width="2" />
|
||||
<!-- 牙盘 -->
|
||||
<circle cx="480" cy="520" r="32" fill="none" stroke="url(#chromeGrad)" stroke-width="6" />
|
||||
<circle cx="480" cy="520" r="24" fill="#1E293B" opacity="0.8" />
|
||||
|
||||
|
||||
<!-- ==================== 鹈鹕身体与头部 ==================== -->
|
||||
<!-- 鹈鹕躯干 (丰满温润的身体) -->
|
||||
<path d="M 390 330 C 340 330 320 390 380 435 C 450 465 490 395 470 330 C 450 300 420 310 390 330 Z" fill="#F8FAFC" filter="url(#softShadow)" />
|
||||
<!-- 羽毛纹理亮部与暗部 -->
|
||||
<path d="M 350 375 Q 340 400 375 425" stroke="#E2E8F0" stroke-width="3" fill="none" stroke-linecap="round" />
|
||||
<path d="M 375 390 Q 380 415 415 425" stroke="#CBD5E1" stroke-width="3" fill="none" stroke-linecap="round" />
|
||||
<!-- 翘起的可爱尾羽 -->
|
||||
<path d="M 350 340 L 300 330 C 290 345 300 360 320 365 L 310 375 C 325 380 340 375 355 365 Z" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="1" />
|
||||
|
||||
<!-- 优雅的 S 型脖颈 -->
|
||||
<path d="M 460 320 Q 505 290 480 210 Q 460 145 510 115 L 535 130 Q 490 165 505 230 Q 520 280 475 325 Z" fill="#F8FAFC" />
|
||||
|
||||
<!-- 头部 -->
|
||||
<circle cx="510" cy="120" r="32" fill="#F8FAFC" />
|
||||
<!-- 脑后呆毛 (蓬松的羽毛冠) -->
|
||||
<path d="M 485 110 Q 460 90 445 110 Q 470 115 485 118 Z" fill="#E2E8F0" />
|
||||
<path d="M 488 100 Q 465 80 455 100 Q 475 105 488 108 Z" fill="#F8FAFC" />
|
||||
|
||||
<!-- 大嘴 (上喙) -->
|
||||
<path d="M 530 110 Q 610 115 675 132 C 685 135 680 143 670 143 L 525 140 Z" fill="url(#beakGrad)" filter="url(#softShadow)" />
|
||||
<!-- 尖锐的喙钩 -->
|
||||
<path d="M 668 131 Q 682 133 674 143 Q 666 136 668 131" fill="#D97706" />
|
||||
<!-- 喙部反光 -->
|
||||
<path d="M 540 114 Q 610 120 660 133" stroke="#FFF" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.6" />
|
||||
|
||||
<!-- 标志性大喉囊 (下嘴) -->
|
||||
<path d="M 525 140 Q 570 215 625 165 L 655 141 Z" fill="url(#pouchGrad)" />
|
||||
<!-- 喉囊半透明褶皱线与隐约的小鱼影子(写实生动细节) -->
|
||||
<path d="M 540 155 Q 575 195 615 163" stroke="#F43F5E" stroke-width="2" fill="none" opacity="0.4" />
|
||||
<path d="M 555 170 Q 585 192 605 170" stroke="#F43F5E" stroke-width="1.5" fill="none" opacity="0.4" />
|
||||
<!-- 喉囊中隐约透出吞下的小鱼轮廓 -->
|
||||
<path d="M 565 175 Q 580 185 595 175" stroke="#E11D48" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.15" />
|
||||
|
||||
<!-- 眼睛 (生动的神态) -->
|
||||
<circle cx="515" cy="105" r="9" fill="#FFFFFF" stroke="#1E293B" stroke-width="1.5" />
|
||||
<circle cx="517" cy="105" r="5" fill="#0F172A" />
|
||||
<circle cx="519" cy="103" r="2" fill="#FFFFFF" /> <!-- 高光 -->
|
||||
<!-- 喜悦的眉毛 -->
|
||||
<path d="M 506 94 Q 518 88 528 97" stroke="#1E293B" stroke-width="2.5" stroke-linecap="round" fill="none" />
|
||||
|
||||
<!-- 帅气的金色复古飞行员墨镜 -->
|
||||
<g id="sunglasses" filter="url(#softShadow)">
|
||||
<path d="M 510 102 Q 525 101 522 115 Q 511 116 508 107 Z" fill="#F59E0B" stroke="#B45309" stroke-width="1.5" opacity="0.85" />
|
||||
<path d="M 526 104 Q 538 103 534 117 Q 525 118 523 109 Z" fill="#F59E0B" stroke="#B45309" stroke-width="1.5" opacity="0.85" />
|
||||
<line x1="519" y1="106" x2="526" y2="107" stroke="#B45309" stroke-width="2" />
|
||||
<path d="M 511 104 Q 518 103 520 112" stroke="#FFF" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.6" /> <!-- 墨镜反光 -->
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ==================== 自行车前部与配件 ==================== -->
|
||||
<!-- 前车轮 -->
|
||||
<g id="front-wheel">
|
||||
<circle cx="680" cy="520" r="110" fill="none" stroke="#1E293B" stroke-width="18" />
|
||||
<circle cx="680" cy="520" r="100" fill="none" stroke="#FEF08A" stroke-width="8" />
|
||||
<circle cx="680" cy="520" r="91" fill="none" stroke="url(#chromeGrad)" stroke-width="6" />
|
||||
<g stroke="#E2E8F0" stroke-width="1.5" opacity="0.7">
|
||||
<line x1="680" y1="410" x2="680" y2="630" />
|
||||
<line x1="570" y1="520" x2="790" y2="520" />
|
||||
<line x1="602" y1="442" x2="758" y2="598" />
|
||||
<line x1="602" y1="598" x2="758" y2="442" />
|
||||
<line x1="630" y1="425" x2="730" y2="615" />
|
||||
<line x1="730" y1="425" x2="630" y2="615" />
|
||||
<line x1="575" y1="470" x2="785" y2="570" />
|
||||
<line x1="575" y1="570" x2="785" y2="470" />
|
||||
</g>
|
||||
<circle cx="680" cy="520" r="16" fill="url(#chromeGrad)" />
|
||||
<!-- 前泥除 -->
|
||||
<path d="M 625 435 A 115 115 0 0 1 765 470" stroke="url(#mintGrad)" stroke-width="12" fill="none" stroke-linecap="round" />
|
||||
<line x1="680" y1="520" x2="760" y2="475" stroke="url(#chromeGrad)" stroke-width="3" />
|
||||
</g>
|
||||
|
||||
<!-- 前叉 (前轮中心连接至车头) -->
|
||||
<path d="M 610 320 L 620 350 L 680 520" stroke="url(#mintGrad)" stroke-width="14" stroke-linecap="round" fill="none" />
|
||||
<path d="M 610 320 L 620 350 L 680 520" stroke="url(#chromeGrad)" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.3" />
|
||||
|
||||
<!-- 车把立管与复古弯把 -->
|
||||
<path d="M 610 320 L 605 250" stroke="url(#chromeGrad)" stroke-width="10" stroke-linecap="round" fill="none" />
|
||||
<!-- 车把横梁 (向后弯曲延伸) -->
|
||||
<path d="M 605 250 Q 580 230 535 255" stroke="url(#chromeGrad)" stroke-width="8" stroke-linecap="round" fill="none" />
|
||||
<!-- 橡胶把套 -->
|
||||
<path d="M 540 252 Q 532 257 528 260" stroke="#1E293B" stroke-width="12" stroke-linecap="round" fill="none" />
|
||||
|
||||
<!-- 车座 (复古皮革大弹簧车座) -->
|
||||
<g id="saddle" filter="url(#softShadow)">
|
||||
<!-- 金属弹簧支撑 -->
|
||||
<path d="M 405 355 Q 415 375 405 385 M 430 355 Q 440 375 430 385" stroke="url(#chromeGrad)" stroke-width="4" fill="none" />
|
||||
<!-- 皮革坐垫 -->
|
||||
<path d="M 380 345 C 380 345 390 330 430 335 C 455 338 450 355 425 355 C 400 355 380 345 380 345 Z" fill="#78350F" />
|
||||
<path d="M 385 343 C 395 335 425 339 440 342" stroke="#A16207" stroke-width="2" fill="none" /> <!-- 坐垫高光线 -->
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ==================== 鹈鹕前景部分 (前肢、前腿、围巾) ==================== -->
|
||||
<!-- 右腿 (踏在近端脚踏板上,腿部弯曲用力) -->
|
||||
<g id="near-leg" filter="url(#softShadow)">
|
||||
<!-- 大腿羽毛 -->
|
||||
<path d="M 430 410 Q 460 440 445 465" stroke="#F8FAFC" stroke-width="22" stroke-linecap="round" fill="none" />
|
||||
<!-- 橙色小腿 -->
|
||||
<path d="M 445 465 L 515 560" stroke="#F97316" stroke-width="11" stroke-linecap="round" fill="none" />
|
||||
<!-- 骨节细节 -->
|
||||
<circle cx="445" cy="465" r="7" fill="#EA580C" />
|
||||
<!-- 踏在脚踏板上的鸭蹼足 -->
|
||||
<path d="M 515 560 Q 545 550 565 558 L 555 582 Q 530 585 510 568 Z" fill="#EA580C" />
|
||||
<!-- 蹼足褶皱 -->
|
||||
<path d="M 515 560 L 565 558 M 512 566 L 558 575" stroke="#9A3412" stroke-width="2.5" />
|
||||
</g>
|
||||
|
||||
<!-- 近端脚踏板 -->
|
||||
<g id="near-pedal" filter="url(#softShadow)">
|
||||
<!-- 曲柄 -->
|
||||
<line x1="480" y1="520" x2="515" y2="560" stroke="url(#chromeGrad)" stroke-width="8" stroke-linecap="round" />
|
||||
<circle cx="480" cy="520" r="10" fill="url(#chromeGrad)" />
|
||||
<!-- 脚踏 -->
|
||||
<rect x="500" y="555" width="35" height="12" rx="4" fill="#1E293B" stroke="#475569" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
<!-- 右侧翅膀 (伸向前方,稳稳抓握住车把) -->
|
||||
<path d="M 450 335 C 485 320 520 295 545 258 C 540 270 525 295 485 335 C 500 320 535 285 540 262 C 525 295 490 345 440 355 Z" fill="#F8FAFC" filter="url(#softShadow)" />
|
||||
<!-- 羽翅末端包裹车把把手 -->
|
||||
<path d="M 545 258 C 548 253 538 248 532 258 C 525 268 535 272 542 262 Z" fill="#E2E8F0" />
|
||||
|
||||
<!-- 迎风飘扬的红白条纹围巾 -->
|
||||
<g id="scarf" filter="url(#softShadow)">
|
||||
<!-- 脖子上的围巾圈 -->
|
||||
<path d="M 478 205 Q 495 195 508 212 Q 495 228 478 215 Z" fill="#DC2626" />
|
||||
<!-- 飘带 1 (主飘带,大波浪) -->
|
||||
<path d="M 478 210 C 410 195 345 225 270 195 C 320 240 390 220 478 218 Z" fill="#DC2626" />
|
||||
<!-- 飘带 2 (副飘带,色调略暗体现立体感) -->
|
||||
<path d="M 482 216 C 420 220 365 260 290 245 C 330 280 400 250 482 224 Z" fill="#991B1B" />
|
||||
|
||||
<!-- 围巾白条纹装饰 -->
|
||||
<g stroke="#F8FAFC" stroke-width="5" fill="none" opacity="0.9" stroke-linecap="round">
|
||||
<!-- 圈上的条纹 -->
|
||||
<path d="M 488 200 L 493 218" />
|
||||
<!-- 飘带 1 的条纹 -->
|
||||
<path d="M 315 204 L 322 225" />
|
||||
<path d="M 360 207 L 368 227" />
|
||||
<path d="M 410 210 L 418 226" />
|
||||
<!-- 飘带 2 的条纹 -->
|
||||
<path d="M 330 247 L 338 268" stroke-width="4" opacity="0.7" />
|
||||
<path d="M 380 245 L 388 264" stroke-width="4" opacity="0.7" />
|
||||
<path d="M 430 238 L 438 254" stroke-width="4" opacity="0.7" />
|
||||
</g>
|
||||
|
||||
<!-- 围巾流苏 -->
|
||||
<path d="M 270 195 L 260 190 M 270 198 L 258 196 M 271 203 L 260 205" stroke="#DC2626" stroke-width="2" />
|
||||
<path d="M 290 245 L 280 242 M 290 249 L 278 250 M 291 254 L 280 258" stroke="#991B1B" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ==================== 前置藤编车筐与里面的小鱼 ==================== -->
|
||||
<g id="basket-group" filter="url(#softShadow)">
|
||||
<!-- 车筐挂架 -->
|
||||
<path d="M 605 255 L 635 265 M 615 300 L 635 305" stroke="url(#chromeGrad)" stroke-width="4" />
|
||||
|
||||
<!-- 篮子里的鱼儿 (充满童趣与故事性) -->
|
||||
<!-- 鱼儿 1 (朝天看,带着惊讶的逗趣表情) -->
|
||||
<g id="fish1">
|
||||
<path d="M 630 270 Q 642 225 655 242 Q 662 260 645 270 Z" fill="#94A3B8" />
|
||||
<!-- 鱼肚白 -->
|
||||
<path d="M 630 270 Q 642 245 645 270" fill="#E2E8F0" />
|
||||
<!-- 鱼鳃与大圆眼 -->
|
||||
<circle cx="642" cy="246" r="4" fill="#FFF" />
|
||||
<circle cx="642" cy="246" r="2" fill="#000" />
|
||||
<!-- 惊讶的小嘴 -->
|
||||
<ellipse cx="637" cy="242" rx="1.5" ry="2" fill="#334155" />
|
||||
</g>
|
||||
|
||||
<!-- 鱼儿 2 (倒挂在篮边,露出一截欢快的鱼尾) -->
|
||||
<g id="fish2">
|
||||
<path d="M 665 265 L 682 215 C 672 210 692 200 692 210 L 685 265 Z" fill="#475569" />
|
||||
<!-- 尾鳍条纹 -->
|
||||
<path d="M 678 212 L 686 205 M 683 213 L 691 206" stroke="#1E293B" stroke-width="1" />
|
||||
</g>
|
||||
|
||||
<!-- 藤编车筐主体 -->
|
||||
<rect x="625" y="260" width="75" height="65" rx="8" fill="#D97706" stroke="#92400E" stroke-width="3" />
|
||||
<!-- 藤编经纬纹理线 -->
|
||||
<g stroke="#78350F" stroke-width="2" opacity="0.6">
|
||||
<!-- 横线 -->
|
||||
<line x1="625" y1="273" x2="700" y2="273" />
|
||||
<line x1="625" y1="286" x2="700" y2="286" />
|
||||
<line x1="625" y1="299" x2="700" y2="299" />
|
||||
<line x1="625" y1="312" x2="700" y2="312" />
|
||||
<!-- 竖线 -->
|
||||
<line x1="638" y1="260" x2="638" y2="325" />
|
||||
<line x1="651" y1="260" x2="651" y2="325" />
|
||||
<line x1="664" y1="260" x2="664" y2="325" />
|
||||
<line x1="677" y1="260" x2="677" y2="325" />
|
||||
<line x1="690" y1="260" x2="690" y2="325" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ==================== 前景动感细节层 ==================== -->
|
||||
<!-- 迎面吹来的海风线 (增加动感与空间感) -->
|
||||
<g stroke="#FFF" stroke-linecap="round" fill="none" opacity="0.3">
|
||||
<path d="M 180 260 Q 230 240 280 270" stroke-width="2.5" />
|
||||
<path d="M 760 330 Q 810 310 860 340" stroke-width="2" />
|
||||
<path d="M 120 490 Q 180 475 240 500" stroke-width="2.5" />
|
||||
<path d="M 680 180 Q 720 170 760 195" stroke-width="1.5" />
|
||||
</g>
|
||||
|
||||
<!-- 车轮滚过沙滩激起的一丁点小金色沙尘 (生动感) -->
|
||||
<g fill="#FEF08A" opacity="0.8">
|
||||
<!-- 后轮沙尘 -->
|
||||
<circle cx="215" cy="620" r="3" />
|
||||
<circle cx="200" cy="626" r="2.5" />
|
||||
<circle cx="225" cy="615" r="2" />
|
||||
<!-- 前轮沙尘 -->
|
||||
<circle cx="585" cy="624" r="3" />
|
||||
<circle cx="572" cy="628" r="2.5" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 20 KiB |
@@ -0,0 +1,240 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800" role="img" aria-labelledby="title desc">
|
||||
<title id="title">海边骑自行车的鹈鹕</title>
|
||||
<desc id="desc">一只逼真的褐鹈鹕在金色海岸边骑着复古自行车,海浪、湿沙和飞溅的水珠营造出鲜活的速度感。</desc>
|
||||
<defs>
|
||||
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#5eb5dc"/>
|
||||
<stop offset=".48" stop-color="#b9ddeb"/>
|
||||
<stop offset=".77" stop-color="#f1d5aa"/>
|
||||
<stop offset="1" stop-color="#ebb879"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="sunGlow" cx=".73" cy=".21" r=".37">
|
||||
<stop offset="0" stop-color="#fff9cf" stop-opacity=".95"/>
|
||||
<stop offset=".28" stop-color="#ffe8a4" stop-opacity=".42"/>
|
||||
<stop offset="1" stop-color="#ffd38b" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#498fa8"/>
|
||||
<stop offset=".48" stop-color="#2d7189"/>
|
||||
<stop offset="1" stop-color="#174b60"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sand" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#d2a670"/>
|
||||
<stop offset=".45" stop-color="#b78251"/>
|
||||
<stop offset="1" stop-color="#795138"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wetSand" x1="0" y1="0" x2="1" y2=".7">
|
||||
<stop offset="0" stop-color="#816452"/>
|
||||
<stop offset=".5" stop-color="#9f7552"/>
|
||||
<stop offset="1" stop-color="#4a4650"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="frameMetal" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#27545c"/>
|
||||
<stop offset=".48" stop-color="#6ca4a4"/>
|
||||
<stop offset=".58" stop-color="#173a42"/>
|
||||
<stop offset="1" stop-color="#8db9b1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="pelicanBody" x1=".2" y1=".05" x2=".75" y2=".95">
|
||||
<stop offset="0" stop-color="#f2ead7"/>
|
||||
<stop offset=".34" stop-color="#c7b89f"/>
|
||||
<stop offset=".72" stop-color="#766d62"/>
|
||||
<stop offset="1" stop-color="#403e3b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wing" x1=".1" y1=".2" x2=".9" y2=".9">
|
||||
<stop offset="0" stop-color="#eee4cf"/>
|
||||
<stop offset=".38" stop-color="#a79c8c"/>
|
||||
<stop offset=".72" stop-color="#5a5651"/>
|
||||
<stop offset="1" stop-color="#292d2f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="neck" x1="0" y1="0" x2=".8" y2="1">
|
||||
<stop offset="0" stop-color="#f7eee0"/>
|
||||
<stop offset=".48" stop-color="#d2b99d"/>
|
||||
<stop offset="1" stop-color="#806c5d"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bill" x1="0" y1=".1" x2="1" y2=".8">
|
||||
<stop offset="0" stop-color="#f6c883"/>
|
||||
<stop offset=".52" stop-color="#d88b4b"/>
|
||||
<stop offset="1" stop-color="#8f4b31"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="pouch" x1=".25" y1="0" x2=".7" y2="1">
|
||||
<stop offset="0" stop-color="#e79b65"/>
|
||||
<stop offset=".62" stop-color="#bd684c"/>
|
||||
<stop offset="1" stop-color="#7b4139"/>
|
||||
</linearGradient>
|
||||
<filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur stdDeviation="10"/>
|
||||
</filter>
|
||||
<filter id="tinyBlur" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="2.3"/>
|
||||
</filter>
|
||||
<filter id="drop" x="-30%" y="-30%" width="170%" height="180%">
|
||||
<feDropShadow dx="2" dy="8" stdDeviation="7" flood-color="#18252a" flood-opacity=".38"/>
|
||||
</filter>
|
||||
<filter id="bikeShadow" x="-30%" y="-70%" width="170%" height="260%">
|
||||
<feGaussianBlur stdDeviation="7"/>
|
||||
</filter>
|
||||
<clipPath id="rearWheelClip"><circle cx="397" cy="628" r="111"/></clipPath>
|
||||
<clipPath id="frontWheelClip"><circle cx="785" cy="628" r="111"/></clipPath>
|
||||
<pattern id="sandGrain" width="80" height="40" patternUnits="userSpaceOnUse">
|
||||
<circle cx="8" cy="8" r="1" fill="#f3c991" opacity=".22"/>
|
||||
<circle cx="34" cy="28" r=".8" fill="#392d2b" opacity=".18"/>
|
||||
<circle cx="67" cy="13" r="1.3" fill="#e2b780" opacity=".17"/>
|
||||
<path d="M17 36l12-2M49 5l8 1" stroke="#f3d0a2" stroke-width=".7" opacity=".16"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- Atmosphere -->
|
||||
<rect width="1200" height="800" fill="url(#sky)"/>
|
||||
<rect width="1200" height="540" fill="url(#sunGlow)"/>
|
||||
<circle cx="881" cy="158" r="47" fill="#fff5bf" opacity=".75" filter="url(#soft)"/>
|
||||
<circle cx="881" cy="158" r="25" fill="#fffbdc" opacity=".92"/>
|
||||
|
||||
<g fill="#fff" opacity=".48" filter="url(#soft)">
|
||||
<path d="M-45 165c67-55 129-30 160-3 29-44 107-43 129 12 53-21 101 7 110 46H-45z"/>
|
||||
<path d="M755 95c49-34 95-17 114 8 35-37 99-22 103 24 41-12 76 9 81 39H740z"/>
|
||||
</g>
|
||||
<g fill="none" stroke="#416d7b" stroke-width="3" stroke-linecap="round" opacity=".48">
|
||||
<path d="M173 230q12-10 24 0q12-10 24 0"/>
|
||||
<path d="M1031 260q10-8 20 0q10-8 20 0"/>
|
||||
<path d="M952 211q7-6 14 0q7-6 14 0"/>
|
||||
</g>
|
||||
|
||||
<!-- Ocean -->
|
||||
<path d="M0 340C181 327 333 346 501 335c174-12 311-2 455 3 100 4 181-3 244-8v262H0z" fill="url(#sea)"/>
|
||||
<path d="M0 358c196-10 291 16 466 2 196-16 312 1 468 5 104 3 193-9 266-13" fill="none" stroke="#d4edf1" stroke-width="4" opacity=".72"/>
|
||||
<g fill="none" stroke-linecap="round">
|
||||
<path d="M32 398c89-16 161 16 255-2s167 9 256-5" stroke="#a7d6df" stroke-width="7" opacity=".48"/>
|
||||
<path d="M665 410c91-13 167 15 261-2 88-16 174 8 258-7" stroke="#d0e9e7" stroke-width="6" opacity=".58"/>
|
||||
<path d="M70 454c129-27 215 19 360-4 130-21 230 16 360-1" stroke="#f3f0df" stroke-width="11" opacity=".72"/>
|
||||
<path d="M20 480c132-15 220 21 344 7 112-13 221 15 316 3" stroke="#eaf1e9" stroke-width="9" opacity=".54"/>
|
||||
</g>
|
||||
|
||||
<!-- Beach -->
|
||||
<path d="M0 470c189-6 360 40 531 42 208 3 377-44 669-28v316H0z" fill="url(#sand)"/>
|
||||
<path d="M0 529c221-8 361 63 578 38 222-25 391-51 622-27v260H0z" fill="url(#wetSand)"/>
|
||||
<rect y="505" width="1200" height="295" fill="url(#sandGrain)" opacity=".8"/>
|
||||
<path d="M0 498c121-20 193 27 297 19 89-7 141 31 233 23 120-10 198-56 326-39 120 16 218-18 344-5" fill="none" stroke="#f7f1dc" stroke-width="18" opacity=".86"/>
|
||||
<path d="M0 509c126-19 198 27 300 19 93-7 149 32 239 23 127-13 196-50 318-38 125 13 221-16 343-4" fill="none" stroke="#d3ece6" stroke-width="8" opacity=".75"/>
|
||||
<g fill="#fffdf3" opacity=".7">
|
||||
<circle cx="104" cy="506" r="5"/><circle cx="141" cy="516" r="3"/><circle cx="223" cy="514" r="7"/>
|
||||
<circle cx="274" cy="528" r="4"/><circle cx="918" cy="506" r="6"/><circle cx="983" cy="503" r="3"/>
|
||||
<circle cx="1091" cy="509" r="8"/><circle cx="1130" cy="503" r="4"/>
|
||||
</g>
|
||||
|
||||
<!-- Reflections and speed streaks -->
|
||||
<g stroke-linecap="round" opacity=".22" filter="url(#tinyBlur)">
|
||||
<path d="M195 710h260M116 736h212M854 701h248M910 747h197" stroke="#f3d49d" stroke-width="12"/>
|
||||
<path d="M250 680h145M805 681h177M54 663h184" stroke="#c9e1da" stroke-width="7"/>
|
||||
</g>
|
||||
<ellipse cx="596" cy="739" rx="323" ry="28" fill="#1d2b31" opacity=".35" filter="url(#bikeShadow)"/>
|
||||
|
||||
<!-- Bicycle wheels -->
|
||||
<g filter="url(#drop)">
|
||||
<g>
|
||||
<circle cx="397" cy="628" r="114" fill="none" stroke="#151d20" stroke-width="13"/>
|
||||
<circle cx="397" cy="628" r="106" fill="none" stroke="#b7c6c3" stroke-width="3"/>
|
||||
<circle cx="397" cy="628" r="9" fill="#c9d5cf" stroke="#26363a" stroke-width="4"/>
|
||||
<g stroke="#d1ddd8" stroke-width="1.25" opacity=".8" clip-path="url(#rearWheelClip)">
|
||||
<path d="M397 628L397 514M397 628L452 528M397 628L492 564M397 628L507 599M397 628L510 649M397 628L487 690M397 628L456 725M397 628L405 741M397 628L349 732M397 628L305 696M397 628L287 650M397 628L292 585M397 628L327 538"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="785" cy="628" r="114" fill="none" stroke="#151d20" stroke-width="13"/>
|
||||
<circle cx="785" cy="628" r="106" fill="none" stroke="#b7c6c3" stroke-width="3"/>
|
||||
<circle cx="785" cy="628" r="9" fill="#c9d5cf" stroke="#26363a" stroke-width="4"/>
|
||||
<g stroke="#d1ddd8" stroke-width="1.25" opacity=".8" clip-path="url(#frontWheelClip)">
|
||||
<path d="M785 628L785 514M785 628L840 528M785 628L880 564M785 628L895 599M785 628L898 649M785 628L875 690M785 628L844 725M785 628L793 741M785 628L737 732M785 628L693 696M785 628L675 650M785 628L680 585M785 628L715 538"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Bicycle frame -->
|
||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M397 628L513 620L602 475L696 620L513 620L466 495L602 475" stroke="#12262c" stroke-width="20" opacity=".45"/>
|
||||
<path d="M397 628L513 620L602 475L696 620L513 620L466 495L602 475" stroke="url(#frameMetal)" stroke-width="13"/>
|
||||
<path d="M696 620L753 465L785 628" stroke="#1e3d44" stroke-width="12"/>
|
||||
<path d="M735 467q28-9 57 4" stroke="#1b3035" stroke-width="10"/>
|
||||
<path d="M442 489h49" stroke="#28211d" stroke-width="12"/>
|
||||
<path d="M449 481h45q7 0 7 7v3h-59z" fill="#674636" stroke="#30231f" stroke-width="3"/>
|
||||
<circle cx="513" cy="620" r="29" stroke="#28363a" stroke-width="5"/>
|
||||
<circle cx="513" cy="620" r="19" stroke="#d7c28b" stroke-width="4"/>
|
||||
<path d="M513 620l43 17" stroke="#242b2d" stroke-width="6"/>
|
||||
<path d="M556 637h24" stroke="#1f2527" stroke-width="7"/>
|
||||
<path d="M513 620l-39-22" stroke="#242b2d" stroke-width="6"/>
|
||||
<path d="M454 594h25" stroke="#1f2527" stroke-width="7"/>
|
||||
<path d="M506 607C480 592 438 591 397 622" stroke="#c5a45d" stroke-width="4"/>
|
||||
</g>
|
||||
|
||||
<!-- Pelican body -->
|
||||
<g filter="url(#drop)">
|
||||
<path d="M459 448c11-80 88-135 175-113 74 19 98 92 61 151-36 57-117 75-186 38-40-22-57-47-50-76z" fill="url(#pelicanBody)"/>
|
||||
<path d="M490 443c41-79 142-93 191-35 20 24 20 57-2 83-55 27-119 15-177-24z" fill="#d8cdb9" opacity=".48"/>
|
||||
<!-- Rear plumage -->
|
||||
<path d="M479 403c-41-12-83-3-121 22 34 5 55 17 73 31-32-2-59 7-82 26 47-1 82 11 117 35 14-31 20-72 13-114z" fill="#6b6861"/>
|
||||
<path d="M451 418c-30-1-55 6-77 20 31 5 51 14 74 30" fill="none" stroke="#d2c5ae" stroke-width="5" opacity=".55"/>
|
||||
<path d="M452 454c-31 5-53 14-72 29 31-1 56 7 79 24" fill="none" stroke="#a79b89" stroke-width="5" opacity=".5"/>
|
||||
|
||||
<!-- Far balancing wing -->
|
||||
<path d="M568 379c51-78 119-119 188-133-49 39-60 65-76 93 35-28 72-42 109-49-33 28-61 57-83 93-37 60-80 83-119 66z" fill="#625e58"/>
|
||||
<path d="M597 400c47-58 91-98 142-126M620 419c49-44 88-71 136-93" fill="none" stroke="#c3b6a1" stroke-width="5" opacity=".48"/>
|
||||
|
||||
<!-- Main wing gripping handlebar -->
|
||||
<path d="M581 393c48-7 88 19 107 57 14 29 29 37 59 33 23-4 43 7 48 24-38 12-75 10-107-7-32-17-62-34-96-44-26-8-36-59-11-63z" fill="url(#wing)"/>
|
||||
<path d="M604 411c42 14 62 46 89 63 25 16 52 22 83 20M591 431c35 13 59 39 90 59" fill="none" stroke="#e4d5bc" stroke-width="5" opacity=".58"/>
|
||||
<path d="M745 482c9-4 19-4 29 2M755 491c11-4 22-2 31 3M767 501c9-2 18 0 25 5" fill="none" stroke="#3a3937" stroke-width="5"/>
|
||||
|
||||
<!-- Neck -->
|
||||
<path d="M545 394c-25-37-28-94-2-137 22-36 67-50 105-34 30 12 48 40 40 67-9 30-46 39-67 19-19-18-11-40-24-52-9-8-21 1-23 15-6 42 26 82 55 105z" fill="url(#neck)"/>
|
||||
<path d="M570 365c-5-35-1-66 13-86 5-7 12-9 16-3 7 11 3 25 13 38 10 13 28 19 47 14" fill="none" stroke="#8d745f" stroke-width="6" opacity=".55"/>
|
||||
<path d="M558 282c9-44 31-67 68-69 32-2 59 14 71 40-44-15-87-5-139 29z" fill="#f2eadc"/>
|
||||
|
||||
<!-- Head -->
|
||||
<path d="M604 229c9-31 45-47 78-34 25 10 38 32 31 55-8 24-38 36-68 25-30-10-48-25-41-46z" fill="#f5eee1"/>
|
||||
<path d="M674 199c19 5 34 17 39 33-19-8-35-7-49 2-17 11-34 8-51-6 16-23 38-34 61-29z" fill="#d8c6af"/>
|
||||
<ellipse cx="687" cy="225" rx="10" ry="11" fill="#20292b"/>
|
||||
<circle cx="690" cy="222" r="3.2" fill="#f7d65e"/>
|
||||
<circle cx="692" cy="219" r="1.8" fill="#fff"/>
|
||||
|
||||
<!-- Beak and pouch -->
|
||||
<path d="M706 234c66-7 139 5 207 29-77 2-147 1-211-1-11-1-14-24 4-28z" fill="url(#bill)"/>
|
||||
<path d="M712 255c56 3 116 5 180 7-47 21-108 39-167 24-17-4-24-17-13-31z" fill="url(#pouch)"/>
|
||||
<path d="M716 241c57 1 120 8 184 20" fill="none" stroke="#793f2f" stroke-width="3" opacity=".65"/>
|
||||
<path d="M735 268c42 12 91 7 138-1" fill="none" stroke="#f0ae76" stroke-width="4" opacity=".4"/>
|
||||
<path d="M913 263l-20-2 15 9z" fill="#593832"/>
|
||||
</g>
|
||||
|
||||
<!-- Legs and feet -->
|
||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M554 505c-5 42-10 78-41 108" stroke="#815540" stroke-width="15"/>
|
||||
<path d="M513 613c14 5 26 13 38 24" stroke="#b47b55" stroke-width="10"/>
|
||||
<path d="M513 613c-7 10-15 18-25 24M517 614c2 12 2 23 0 35" stroke="#b47b55" stroke-width="7"/>
|
||||
<path d="M635 506c-2 37 8 74 43 108" stroke="#77503f" stroke-width="15"/>
|
||||
<path d="M678 614c19 0 36 4 51 12" stroke="#b47b55" stroke-width="10"/>
|
||||
<path d="M678 614c7 10 12 20 14 31M680 614c-3 12-4 23-2 34" stroke="#b47b55" stroke-width="7"/>
|
||||
</g>
|
||||
|
||||
<!-- Feather details -->
|
||||
<g fill="none" stroke-linecap="round" opacity=".48">
|
||||
<path d="M488 475c49 18 102 23 154 10M501 494c40 15 87 19 130 10M504 439c42 25 91 30 139 19" stroke="#efe3ce" stroke-width="5"/>
|
||||
<path d="M525 519c31 8 61 10 91 4M472 459c12-29 31-51 56-67" stroke="#4c4a47" stroke-width="4"/>
|
||||
<path d="M550 345c15 5 30 4 45-4M548 327c16 5 28 4 39-2" stroke="#f7eddd" stroke-width="4"/>
|
||||
</g>
|
||||
|
||||
<!-- Water spray around wheels -->
|
||||
<g fill="#e8f5f2" opacity=".86">
|
||||
<circle cx="313" cy="676" r="6"/><circle cx="292" cy="661" r="3.5"/><circle cx="274" cy="638" r="5"/>
|
||||
<circle cx="253" cy="620" r="2.8"/><circle cx="323" cy="701" r="3"/><circle cx="350" cy="718" r="4"/>
|
||||
<circle cx="872" cy="688" r="5"/><circle cx="897" cy="671" r="3"/><circle cx="914" cy="643" r="5"/>
|
||||
<circle cx="926" cy="615" r="2.5"/><circle cx="853" cy="713" r="3.5"/><circle cx="831" cy="729" r="4"/>
|
||||
</g>
|
||||
<g fill="none" stroke="#f6fbf5" stroke-linecap="round" opacity=".72">
|
||||
<path d="M338 694c-42-13-69-31-88-57M851 701c43-11 72-34 88-69" stroke-width="5"/>
|
||||
<path d="M356 714c-32-3-56-12-76-28M834 719c35-4 63-16 82-35" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- Foreground texture -->
|
||||
<path d="M0 760c160-20 316 3 474-7 188-12 374-4 726-15v62H0z" fill="#342f31" opacity=".28"/>
|
||||
<g stroke="#e8c88f" stroke-linecap="round" opacity=".38">
|
||||
<path d="M44 704h64M152 754h91M941 772h109M1051 716h83M43 785h165M694 768h106" stroke-width="4"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |