Nagi-ovoandCodex committed
1 parent
7a1571f46b
commit
4a5aad4a35
19 files changed
+11903
-8
No files matched your search
+6
-1
@@ -29,12 +29,17 @@ One-shot LLM eval cases by NAGI STUDIO: same prompt, different model x harness x
|
||||
| Claude Fable 5 | Anthropic | Claude Web App · Max<br>Claude Code · Max<br>Cursor · High | 06 |
|
||||
| Claude Opus 4.8 | Anthropic | Claude Code · Max | 02 |
|
||||
| Claude Opus 4.7 | Anthropic | Cursor · Max | 02 |
|
||||
| Claude Opus 4.6 | Anthropic | Cursor · Max | 01 |
|
||||
| Claude Opus 4.6 | Anthropic | Cursor · Max | 02 |
|
||||
| Claude Opus 4.5 | Anthropic | Cursor · Thinking | 02 |
|
||||
| GPT-5.5 Pro | OpenAI | ChatGPT Web · Extended Pro | 02 |
|
||||
| GPT-5.5 | OpenAI | Codex CLI · xhigh | 02 |
|
||||
| GPT-5.4 | OpenAI | Cursor · xhigh | 02 |
|
||||
| GPT-5.3 Codex | OpenAI | Cursor · xhigh | 02 |
|
||||
| GPT-5.2 | OpenAI | Cursor · xhigh | 02 |
|
||||
| Gemini 3.1 Pro | Google | AntiGravity · High<br>Cursor · Default<br>Google AI Studio · High | 04 |
|
||||
| Gemini 3.5 Flash | Google | AntiGravity · High<br>Google AI Studio · High<br>Cursor · Default | 04 |
|
||||
| Grok Build | xAI | Grok Build TUI · Max | 02 |
|
||||
| Grok 4.3 | xAI | Cursor · Default | 01 |
|
||||
| Composer 2.5 | Cursor | Cursor · Max<br>Cursor · Default<br>Grok Build TUI · Default | 05 |
|
||||
| Mistral Medium 3.5 | Mistral AI | Vibe · Thinking | 02 |
|
||||
| DeepSeek-V4-Pro | DeepSeek | Claude Code · Max | 02 |
|
||||
|
||||
@@ -29,12 +29,17 @@ NAGI STUDIO 的 LLM 测评案例集：同一段提示词，不同「模型 × Ha
|
||||
| Claude Fable 5 | Anthropic | Claude Web App · Max<br>Claude Code · Max<br>Cursor · High | 06 |
|
||||
| Claude Opus 4.8 | Anthropic | Claude Code · Max | 02 |
|
||||
| Claude Opus 4.7 | Anthropic | Cursor · Max | 02 |
|
||||
| Claude Opus 4.6 | Anthropic | Cursor · Max | 01 |
|
||||
| Claude Opus 4.6 | Anthropic | Cursor · Max | 02 |
|
||||
| Claude Opus 4.5 | Anthropic | Cursor · Thinking | 02 |
|
||||
| GPT-5.5 Pro | OpenAI | ChatGPT Web · Extended Pro | 02 |
|
||||
| GPT-5.5 | OpenAI | Codex CLI · xhigh | 02 |
|
||||
| GPT-5.4 | OpenAI | Cursor · xhigh | 02 |
|
||||
| GPT-5.3 Codex | OpenAI | Cursor · xhigh | 02 |
|
||||
| GPT-5.2 | OpenAI | Cursor · xhigh | 02 |
|
||||
| Gemini 3.1 Pro | Google | AntiGravity · High<br>Cursor · Default<br>Google AI Studio · High | 04 |
|
||||
| Gemini 3.5 Flash | Google | AntiGravity · High<br>Google AI Studio · High<br>Cursor · Default | 04 |
|
||||
| Grok Build | xAI | Grok Build TUI · Max | 02 |
|
||||
| Grok 4.3 | xAI | Cursor · Default | 01 |
|
||||
| Composer 2.5 | Cursor | Cursor · Max<br>Cursor · Default<br>Grok Build TUI · Default | 05 |
|
||||
| Mistral Medium 3.5 | Mistral AI | Vibe · Thinking | 02 |
|
||||
| DeepSeek-V4-Pro | DeepSeek | Claude Code · Max | 02 |
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"label": "Claude Opus 4.5",
|
||||
"vendor": "Anthropic",
|
||||
"harness": "Cursor",
|
||||
"effort": "Thinking",
|
||||
"artifactDir": "claude-opus-4-5/cursor-thinking",
|
||||
"order": 18,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
"note": {
|
||||
"zh": "在 Cursor 中以 Claude Opus 4.5（Thinking 思考配额）一次生成；本页为未经修改的原始产出。",
|
||||
"en": "Generated in one shot by Claude Opus 4.5 (Thinking effort) inside Cursor; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
},
|
||||
"pelican-cycling": {
|
||||
"note": {
|
||||
"zh": "在 Cursor 中以 Claude Opus 4.5（Thinking 思考配额）一次生成；本页为未经修改的原始产出。",
|
||||
"en": "Generated in one shot by Claude Opus 4.5 (Thinking effort) inside Cursor; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,14 @@
|
||||
"en": "Generated in one shot by Claude Opus 4.6 (Max effort) inside Cursor; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
},
|
||||
"pelican-cycling": {
|
||||
"file": "pelican-bicycle.svg",
|
||||
"note": {
|
||||
"zh": "在 Cursor 中以 Claude Opus 4.6（Max 思考配额）一次生成；本页为未经修改的原始产出。",
|
||||
"en": "Generated in one shot by Claude Opus 4.6 (Max effort) inside Cursor; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"label": "GPT-5.2",
|
||||
"vendor": "OpenAI",
|
||||
"harness": "Cursor",
|
||||
"effort": "xhigh",
|
||||
"artifactDir": "gpt-5-2/cursor-xhigh",
|
||||
"order": 33,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
"file": "mythiccraft.html",
|
||||
"note": {
|
||||
"zh": "在 Cursor 中以 GPT-5.2（xhigh 思考配额）一次生成；本页为未经修改的原始产出。",
|
||||
"en": "Generated in one shot by GPT-5.2 (xhigh effort) inside Cursor; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
},
|
||||
"pelican-cycling": {
|
||||
"note": {
|
||||
"zh": "在 Cursor 中以 GPT-5.2（xhigh 思考配额）一次生成；本页为未经修改的原始产出。",
|
||||
"en": "Generated in one shot by GPT-5.2 (xhigh effort) inside Cursor; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"label": "GPT-5.3 Codex",
|
||||
"vendor": "OpenAI",
|
||||
"harness": "Cursor",
|
||||
"effort": "xhigh",
|
||||
"artifactDir": "gpt-5-3-codex/cursor-xhigh",
|
||||
"order": 32,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
"file": "mythic-craft.html",
|
||||
"note": {
|
||||
"zh": "在 Cursor 中以 GPT-5.3 Codex（xhigh 思考配额）一次生成；本页为未经修改的原始产出。",
|
||||
"en": "Generated in one shot by GPT-5.3 Codex (xhigh effort) inside Cursor; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
},
|
||||
"pelican-cycling": {
|
||||
"note": {
|
||||
"zh": "在 Cursor 中以 GPT-5.3 Codex（xhigh 思考配额）一次生成；本页为未经修改的原始产出。",
|
||||
"en": "Generated in one shot by GPT-5.3 Codex (xhigh effort) inside Cursor; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"label": "GPT-5.4",
|
||||
"vendor": "OpenAI",
|
||||
"harness": "Cursor",
|
||||
"effort": "xhigh",
|
||||
"artifactDir": "gpt-5-4/cursor-xhigh",
|
||||
"order": 31,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
"file": "index.html",
|
||||
"note": {
|
||||
"zh": "在 Cursor 中以 GPT-5.4（xhigh 思考配额）一次生成；本页为未经修改的原始产出。",
|
||||
"en": "Generated in one shot by GPT-5.4 (xhigh effort) inside Cursor; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
},
|
||||
"pelican-cycling": {
|
||||
"note": {
|
||||
"zh": "在 Cursor 中以 GPT-5.4（xhigh 思考配额）一次生成；本页为未经修改的原始产出。",
|
||||
"en": "Generated in one shot by GPT-5.4 (xhigh effort) inside Cursor; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"label": "Grok 4.3",
|
||||
"vendor": "xAI",
|
||||
"harness": "Cursor",
|
||||
"effort": "Default",
|
||||
"artifactDir": "grok-4-3/cursor-default",
|
||||
"order": 61,
|
||||
"runs": {
|
||||
"mythos-craft": {
|
||||
"note": {
|
||||
"zh": "在 Cursor 中以 Grok 4.3 默认设置一次生成；本页为未经修改的原始产出。",
|
||||
"en": "Generated in one shot by Grok 4.3 inside Cursor with default settings; unmodified original output."
|
||||
},
|
||||
"contributor": "Nagi-ovo"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,339 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<!-- Gradients -->
|
||||
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#87CEEB"/>
|
||||
<stop offset="60%" style="stop-color:#FFE4B5"/>
|
||||
<stop offset="100%" style="stop-color:#FFA07A"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="oceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4682B4"/>
|
||||
<stop offset="50%" style="stop-color:#5F9EA0"/>
|
||||
<stop offset="100%" style="stop-color:#20B2AA"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="sandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#F4E4C1"/>
|
||||
<stop offset="100%" style="stop-color:#DEB887"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="pelicanBodyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FAFAFA"/>
|
||||
<stop offset="50%" style="stop-color:#E8E8E8"/>
|
||||
<stop offset="100%" style="stop-color:#D3D3D3"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="pouchGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FFB347"/>
|
||||
<stop offset="100%" style="stop-color:#FF8C00"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="beakGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#FFE4B5"/>
|
||||
<stop offset="50%" style="stop-color:#FFDAB9"/>
|
||||
<stop offset="100%" style="stop-color:#FFA07A"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="sunGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FFD700"/>
|
||||
<stop offset="100%" style="stop-color:#FFA500"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Filters for realism -->
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="3" dy="5" stdDeviation="4" flood-opacity="0.3"/>
|
||||
</filter>
|
||||
|
||||
<filter id="softGlow">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Wave pattern -->
|
||||
<pattern id="wavePattern" x="0" y="0" width="100" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M0 10 Q25 0 50 10 T100 10" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- Background Sky -->
|
||||
<rect x="0" y="0" width="800" height="600" fill="url(#skyGradient)"/>
|
||||
|
||||
<!-- Sun -->
|
||||
<circle cx="650" cy="100" r="50" fill="url(#sunGradient)" filter="url(#softGlow)"/>
|
||||
<g opacity="0.6">
|
||||
<line x1="650" y1="30" x2="650" y2="10" stroke="#FFD700" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="650" y1="170" x2="650" y2="190" stroke="#FFD700" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="580" y1="100" x2="560" y2="100" stroke="#FFD700" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="720" y1="100" x2="740" y2="100" stroke="#FFD700" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="600" y1="50" x2="585" y2="35" stroke="#FFD700" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="700" y1="150" x2="715" y2="165" stroke="#FFD700" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="700" y1="50" x2="715" y2="35" stroke="#FFD700" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="600" y1="150" x2="585" y2="165" stroke="#FFD700" stroke-width="3" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Clouds -->
|
||||
<g opacity="0.9">
|
||||
<ellipse cx="150" cy="80" rx="50" ry="25" fill="white"/>
|
||||
<ellipse cx="190" cy="70" rx="40" ry="20" fill="white"/>
|
||||
<ellipse cx="120" cy="90" rx="35" ry="18" fill="white"/>
|
||||
|
||||
<ellipse cx="400" cy="60" rx="45" ry="22" fill="white"/>
|
||||
<ellipse cx="440" cy="50" rx="35" ry="18" fill="white"/>
|
||||
<ellipse cx="370" cy="70" rx="30" ry="15" fill="white"/>
|
||||
</g>
|
||||
|
||||
<!-- Distant birds -->
|
||||
<g stroke="#555" stroke-width="2" fill="none" opacity="0.5">
|
||||
<path d="M100 150 Q110 140 120 150 Q130 140 140 150"/>
|
||||
<path d="M200 120 Q208 112 216 120 Q224 112 232 120"/>
|
||||
<path d="M500 130 Q510 120 520 130 Q530 120 540 130"/>
|
||||
</g>
|
||||
|
||||
<!-- Ocean -->
|
||||
<rect x="0" y="300" width="800" height="150" fill="url(#oceanGradient)"/>
|
||||
<rect x="0" y="300" width="800" height="150" fill="url(#wavePattern)"/>
|
||||
|
||||
<!-- Ocean waves detail -->
|
||||
<g fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2">
|
||||
<path d="M0 320 Q50 310 100 320 T200 320 T300 320 T400 320 T500 320 T600 320 T700 320 T800 320"/>
|
||||
<path d="M0 350 Q60 340 120 350 T240 350 T360 350 T480 350 T600 350 T720 350 T800 350"/>
|
||||
<path d="M0 380 Q40 370 80 380 T160 380 T240 380 T320 380 T400 380 T480 380 T560 380 T640 380 T720 380 T800 380"/>
|
||||
<path d="M0 410 Q70 400 140 410 T280 410 T420 410 T560 410 T700 410 T800 410"/>
|
||||
</g>
|
||||
|
||||
<!-- Beach -->
|
||||
<ellipse cx="400" cy="600" rx="500" ry="200" fill="url(#sandGradient)"/>
|
||||
|
||||
<!-- Beach texture (shells and pebbles) -->
|
||||
<g fill="#C4A484" opacity="0.5">
|
||||
<circle cx="100" cy="520" r="3"/>
|
||||
<circle cx="200" cy="550" r="2"/>
|
||||
<circle cx="300" cy="530" r="4"/>
|
||||
<circle cx="500" cy="540" r="3"/>
|
||||
<circle cx="600" cy="520" r="2"/>
|
||||
<circle cx="700" cy="550" r="3"/>
|
||||
<ellipse cx="150" cy="560" rx="5" ry="3"/>
|
||||
<ellipse cx="450" cy="570" rx="4" ry="2"/>
|
||||
<ellipse cx="650" cy="530" rx="6" ry="3"/>
|
||||
</g>
|
||||
|
||||
<!-- Bicycle with pelican -->
|
||||
<g transform="translate(300, 380)" filter="url(#shadow)">
|
||||
<!-- Bicycle shadow on sand -->
|
||||
<ellipse cx="70" cy="130" rx="120" ry="15" fill="rgba(0,0,0,0.15)"/>
|
||||
|
||||
<!-- Back wheel -->
|
||||
<g transform="translate(0, 60)">
|
||||
<circle cx="0" cy="0" r="50" fill="none" stroke="#333" stroke-width="5"/>
|
||||
<circle cx="0" cy="0" r="45" fill="none" stroke="#444" stroke-width="2"/>
|
||||
<!-- Spokes -->
|
||||
<g stroke="#666" stroke-width="1.5">
|
||||
<line x1="0" y1="-45" x2="0" y2="45"/>
|
||||
<line x1="-45" y1="0" x2="45" y2="0"/>
|
||||
<line x1="-32" y1="-32" x2="32" y2="32"/>
|
||||
<line x1="32" y1="-32" x2="-32" y2="32"/>
|
||||
<line x1="-22" y1="-40" x2="22" y2="40"/>
|
||||
<line x1="22" y1="-40" x2="-22" y2="40"/>
|
||||
<line x1="-40" y1="-22" x2="40" y2="22"/>
|
||||
<line x1="40" y1="-22" x2="-40" y2="22"/>
|
||||
</g>
|
||||
<!-- Hub -->
|
||||
<circle cx="0" cy="0" r="8" fill="#444"/>
|
||||
<circle cx="0" cy="0" r="4" fill="#666"/>
|
||||
<!-- Tire -->
|
||||
<circle cx="0" cy="0" r="50" fill="none" stroke="#222" stroke-width="8"/>
|
||||
</g>
|
||||
|
||||
<!-- Front wheel -->
|
||||
<g transform="translate(140, 60)">
|
||||
<circle cx="0" cy="0" r="50" fill="none" stroke="#333" stroke-width="5"/>
|
||||
<circle cx="0" cy="0" r="45" fill="none" stroke="#444" stroke-width="2"/>
|
||||
<!-- Spokes -->
|
||||
<g stroke="#666" stroke-width="1.5">
|
||||
<line x1="0" y1="-45" x2="0" y2="45"/>
|
||||
<line x1="-45" y1="0" x2="45" y2="0"/>
|
||||
<line x1="-32" y1="-32" x2="32" y2="32"/>
|
||||
<line x1="32" y1="-32" x2="-32" y2="32"/>
|
||||
<line x1="-22" y1="-40" x2="22" y2="40"/>
|
||||
<line x1="22" y1="-40" x2="-22" y2="40"/>
|
||||
<line x1="-40" y1="-22" x2="40" y2="22"/>
|
||||
<line x1="40" y1="-22" x2="-40" y2="22"/>
|
||||
</g>
|
||||
<!-- Hub -->
|
||||
<circle cx="0" cy="0" r="8" fill="#444"/>
|
||||
<circle cx="0" cy="0" r="4" fill="#666"/>
|
||||
<!-- Tire -->
|
||||
<circle cx="0" cy="0" r="50" fill="none" stroke="#222" stroke-width="8"/>
|
||||
</g>
|
||||
|
||||
<!-- Frame -->
|
||||
<g stroke="#C41E3A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none">
|
||||
<!-- Down tube -->
|
||||
<line x1="0" y1="60" x2="70" y2="0"/>
|
||||
<!-- Top tube -->
|
||||
<line x1="70" y1="0" x2="120" y2="10"/>
|
||||
<!-- Seat tube -->
|
||||
<line x1="70" y1="0" x2="55" y2="60"/>
|
||||
<!-- Chain stay -->
|
||||
<line x1="0" y1="60" x2="55" y2="60"/>
|
||||
<!-- Seat stay -->
|
||||
<line x1="0" y1="60" x2="70" y2="0"/>
|
||||
<!-- Head tube -->
|
||||
<line x1="120" y1="10" x2="140" y2="60"/>
|
||||
<!-- Fork -->
|
||||
<path d="M120 10 Q130 35 140 60" stroke-width="5"/>
|
||||
</g>
|
||||
|
||||
<!-- Seat post -->
|
||||
<line x1="70" y1="0" x2="65" y2="-25" stroke="#333" stroke-width="4"/>
|
||||
<!-- Seat -->
|
||||
<ellipse cx="65" cy="-30" rx="18" ry="8" fill="#4a3728"/>
|
||||
<ellipse cx="65" cy="-32" rx="15" ry="6" fill="#5d4a3a"/>
|
||||
|
||||
<!-- Handlebars -->
|
||||
<line x1="120" y1="10" x2="115" y2="-15" stroke="#333" stroke-width="4"/>
|
||||
<path d="M100 -20 Q115 -25 130 -20" stroke="#333" stroke-width="5" fill="none" stroke-linecap="round"/>
|
||||
<!-- Handlebar grips -->
|
||||
<ellipse cx="100" cy="-20" rx="8" ry="4" fill="#333"/>
|
||||
<ellipse cx="130" cy="-20" rx="8" ry="4" fill="#333"/>
|
||||
|
||||
<!-- Pedals and crank -->
|
||||
<circle cx="55" cy="60" r="12" fill="#444" stroke="#333" stroke-width="2"/>
|
||||
<!-- Crank arms -->
|
||||
<line x1="55" y1="60" x2="35" y2="75" stroke="#555" stroke-width="4"/>
|
||||
<line x1="55" y1="60" x2="75" y2="45" stroke="#555" stroke-width="4"/>
|
||||
<!-- Pedals -->
|
||||
<rect x="28" y="72" width="15" height="8" rx="2" fill="#333"/>
|
||||
<rect x="68" y="40" width="15" height="8" rx="2" fill="#333"/>
|
||||
|
||||
<!-- Chain -->
|
||||
<ellipse cx="55" cy="60" rx="18" ry="18" fill="none" stroke="#444" stroke-width="3" stroke-dasharray="4 2"/>
|
||||
<path d="M55 78 L0 78 A18 18 0 0 1 0 42 L55 42" fill="none" stroke="#444" stroke-width="3" stroke-dasharray="4 2"/>
|
||||
|
||||
<!-- Pelican -->
|
||||
<g transform="translate(45, -80)">
|
||||
<!-- Body -->
|
||||
<ellipse cx="20" cy="30" rx="35" ry="28" fill="url(#pelicanBodyGradient)"/>
|
||||
<!-- Body feather texture -->
|
||||
<g stroke="#ccc" stroke-width="0.5" fill="none" opacity="0.5">
|
||||
<path d="M-5 25 Q20 20 45 25"/>
|
||||
<path d="M-5 35 Q20 30 45 35"/>
|
||||
<path d="M0 45 Q20 40 40 45"/>
|
||||
</g>
|
||||
|
||||
<!-- Wing (folded) -->
|
||||
<path d="M5 15 Q-15 30 0 50 Q25 55 45 45 Q55 35 50 20 Q40 10 20 12 Z" fill="#E0E0E0" stroke="#bbb" stroke-width="1"/>
|
||||
<!-- Wing feather details -->
|
||||
<g stroke="#aaa" stroke-width="0.8" fill="none">
|
||||
<path d="M10 20 Q25 35 40 40"/>
|
||||
<path d="M5 28 Q20 40 35 45"/>
|
||||
<path d="M2 38 Q15 48 30 50"/>
|
||||
</g>
|
||||
|
||||
<!-- Neck -->
|
||||
<path d="M40 25 Q60 15 70 -20 Q72 -40 60 -55" fill="url(#pelicanBodyGradient)" stroke="#ddd" stroke-width="1"/>
|
||||
|
||||
<!-- Head -->
|
||||
<ellipse cx="55" cy="-60" rx="18" ry="15" fill="url(#pelicanBodyGradient)"/>
|
||||
|
||||
<!-- Eye area -->
|
||||
<ellipse cx="62" cy="-62" rx="8" ry="6" fill="#FFF8DC"/>
|
||||
<!-- Eye -->
|
||||
<circle cx="64" cy="-62" r="4" fill="#1a1a1a"/>
|
||||
<circle cx="65" cy="-63" r="1.5" fill="white"/>
|
||||
|
||||
<!-- Eye ring -->
|
||||
<circle cx="64" cy="-62" r="6" fill="none" stroke="#4169E1" stroke-width="1.5"/>
|
||||
|
||||
<!-- Beak (upper) -->
|
||||
<path d="M70 -58 L130 -55 Q135 -52 130 -50 L70 -52 Z" fill="url(#beakGradient)" stroke="#D2691E" stroke-width="1"/>
|
||||
<!-- Beak ridge -->
|
||||
<line x1="70" y1="-55" x2="125" y2="-52.5" stroke="#E8C4A0" stroke-width="1"/>
|
||||
|
||||
<!-- Beak (lower) with pouch -->
|
||||
<path d="M70 -52 L120 -50 Q125 -48 120 -45 Q100 -25 70 -40 Z" fill="url(#pouchGradient)" stroke="#D2691E" stroke-width="1"/>
|
||||
<!-- Pouch texture lines -->
|
||||
<g stroke="#E8A030" stroke-width="0.5" opacity="0.6">
|
||||
<path d="M75 -48 Q95 -35 115 -46"/>
|
||||
<path d="M78 -45 Q95 -32 110 -44"/>
|
||||
</g>
|
||||
|
||||
<!-- Hook at beak tip -->
|
||||
<path d="M128 -52 Q132 -50 130 -47" fill="none" stroke="#D2691E" stroke-width="2" stroke-linecap="round"/>
|
||||
|
||||
<!-- Crest feathers -->
|
||||
<g fill="#E8E8E8" stroke="#ccc" stroke-width="0.5">
|
||||
<path d="M45 -70 Q42 -80 48 -78 Q52 -72 50 -68 Z"/>
|
||||
<path d="M50 -72 Q48 -82 54 -80 Q58 -74 55 -70 Z"/>
|
||||
<path d="M55 -70 Q55 -78 60 -76 Q62 -72 58 -68 Z"/>
|
||||
</g>
|
||||
|
||||
<!-- Legs -->
|
||||
<g stroke="#FF8C00" stroke-width="3" fill="none" stroke-linecap="round">
|
||||
<!-- Left leg on pedal -->
|
||||
<path d="M10 55 Q5 70 -25 95"/>
|
||||
<!-- Right leg on other pedal -->
|
||||
<path d="M25 55 Q35 70 45 65"/>
|
||||
</g>
|
||||
|
||||
<!-- Feet -->
|
||||
<g fill="#FF8C00" stroke="#E07000" stroke-width="1">
|
||||
<!-- Left foot (on pedal) -->
|
||||
<path d="M-30 92 L-40 100 L-30 98 L-25 105 L-25 95 L-18 100 L-25 92 Z"/>
|
||||
<!-- Right foot -->
|
||||
<path d="M42 62 L35 70 L42 68 L45 75 L47 65 L52 70 L47 62 Z"/>
|
||||
</g>
|
||||
|
||||
<!-- Wing tip showing grip on handlebar -->
|
||||
<path d="M48 25 Q65 15 85 5 Q90 8 85 12 Q70 18 55 28" fill="#D8D8D8" stroke="#bbb" stroke-width="1"/>
|
||||
</g>
|
||||
|
||||
<!-- Basket on front -->
|
||||
<g transform="translate(125, -30)">
|
||||
<path d="M-15 0 L-20 25 L20 25 L15 0 Z" fill="none" stroke="#8B4513" stroke-width="2"/>
|
||||
<line x1="-18" y1="8" x2="18" y2="8" stroke="#8B4513" stroke-width="1.5"/>
|
||||
<line x1="-19" y1="16" x2="19" y2="16" stroke="#8B4513" stroke-width="1.5"/>
|
||||
<!-- Fish in basket -->
|
||||
<g transform="translate(0, 12)">
|
||||
<ellipse cx="0" cy="0" rx="12" ry="5" fill="#87CEEB"/>
|
||||
<path d="M10 0 L18 -5 L18 5 Z" fill="#87CEEB"/>
|
||||
<circle cx="-5" cy="-1" r="1.5" fill="#1a1a1a"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Foreground wave foam -->
|
||||
<g fill="rgba(255,255,255,0.7)">
|
||||
<ellipse cx="100" cy="445" rx="60" ry="8"/>
|
||||
<ellipse cx="300" cy="450" rx="80" ry="10"/>
|
||||
<ellipse cx="550" cy="448" rx="70" ry="9"/>
|
||||
<ellipse cx="750" cy="452" rx="50" ry="7"/>
|
||||
</g>
|
||||
|
||||
<!-- Beach grass -->
|
||||
<g stroke="#556B2F" stroke-width="2" fill="none" stroke-linecap="round">
|
||||
<path d="M50 480 Q55 450 45 420"/>
|
||||
<path d="M55 480 Q60 455 50 430"/>
|
||||
<path d="M60 480 Q58 460 65 425"/>
|
||||
|
||||
<path d="M750 490 Q755 460 745 430"/>
|
||||
<path d="M755 490 Q760 465 750 440"/>
|
||||
<path d="M760 490 Q758 470 765 435"/>
|
||||
</g>
|
||||
|
||||
<!-- Small starfish -->
|
||||
<g transform="translate(680, 530)" fill="#FF6B6B" stroke="#E05555" stroke-width="1">
|
||||
<path d="M0 -10 L2 -3 L10 -3 L4 2 L6 10 L0 5 L-6 10 L-4 2 L-10 -3 L-2 -3 Z"/>
|
||||
</g>
|
||||
|
||||
<!-- Seashell -->
|
||||
<g transform="translate(180, 545)">
|
||||
<path d="M0 0 Q5 -10 15 -8 Q20 -5 18 0 Q15 5 5 5 Q0 3 0 0" fill="#FFF5EE" stroke="#DEB887" stroke-width="1"/>
|
||||
<path d="M2 0 Q7 -6 12 -5" fill="none" stroke="#DEB887" stroke-width="0.5"/>
|
||||
<path d="M3 2 Q8 -2 13 -1" fill="none" stroke="#DEB887" stroke-width="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,465 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 650" width="900" height="650">
|
||||
<defs>
|
||||
<!-- Sky gradient - golden hour -->
|
||||
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#1a1a4e"/>
|
||||
<stop offset="25%" stop-color="#3d2b6b"/>
|
||||
<stop offset="45%" stop-color="#c75b39"/>
|
||||
<stop offset="60%" stop-color="#e8945a"/>
|
||||
<stop offset="75%" stop-color="#f5c882"/>
|
||||
<stop offset="100%" stop-color="#fde8c4"/>
|
||||
</linearGradient>
|
||||
<!-- Sun glow -->
|
||||
<radialGradient id="sunGlow" cx="0.75" cy="0.52" r="0.35">
|
||||
<stop offset="0%" stop-color="#fff7e0" stop-opacity="0.9"/>
|
||||
<stop offset="30%" stop-color="#f5c882" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#e8945a" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<!-- Ocean gradient -->
|
||||
<linearGradient id="ocean" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#2a6e8f"/>
|
||||
<stop offset="40%" stop-color="#1e5a7a"/>
|
||||
<stop offset="100%" stop-color="#0f3d5c"/>
|
||||
</linearGradient>
|
||||
<!-- Wet sand -->
|
||||
<linearGradient id="wetSand" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#8a7a5e"/>
|
||||
<stop offset="100%" stop-color="#c4a96a"/>
|
||||
</linearGradient>
|
||||
<!-- Dry sand -->
|
||||
<linearGradient id="drySand" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#d4bc82"/>
|
||||
<stop offset="100%" stop-color="#e8d5a0"/>
|
||||
</linearGradient>
|
||||
<!-- Pelican body feather texture -->
|
||||
<filter id="featherTex">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" seed="5"/>
|
||||
<feColorMatrix type="saturate" values="0"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.15"/>
|
||||
</feComponentTransfer>
|
||||
<feComposite in="SourceGraphic" operator="over"/>
|
||||
</filter>
|
||||
<!-- Water shimmer -->
|
||||
<filter id="shimmer">
|
||||
<feTurbulence type="turbulence" baseFrequency="0.02 0.06" numOctaves="3" seed="2">
|
||||
<animate attributeName="baseFrequency" values="0.02 0.06;0.025 0.065;0.02 0.06" dur="4s" repeatCount="indefinite"/>
|
||||
</feTurbulence>
|
||||
<feDisplacementMap in="SourceGraphic" scale="6"/>
|
||||
</filter>
|
||||
<!-- Sun reflection on water -->
|
||||
<linearGradient id="sunReflect" x1="0.6" y1="0" x2="0.8" y2="1">
|
||||
<stop offset="0%" stop-color="#f5c882" stop-opacity="0.6"/>
|
||||
<stop offset="50%" stop-color="#e8a050" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#2a6e8f" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<!-- Tire rubber -->
|
||||
<radialGradient id="tire" cx="0.45" cy="0.4" r="0.55">
|
||||
<stop offset="0%" stop-color="#3a3a3a"/>
|
||||
<stop offset="80%" stop-color="#1a1a1a"/>
|
||||
<stop offset="100%" stop-color="#111"/>
|
||||
</radialGradient>
|
||||
<!-- Chrome -->
|
||||
<linearGradient id="chrome" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#e8e8e8"/>
|
||||
<stop offset="30%" stop-color="#b0b0b0"/>
|
||||
<stop offset="60%" stop-color="#d8d8d8"/>
|
||||
<stop offset="100%" stop-color="#909090"/>
|
||||
</linearGradient>
|
||||
<!-- Pelican beak -->
|
||||
<linearGradient id="beakTop" x1="0" y1="0" x2="1" y2="0.3">
|
||||
<stop offset="0%" stop-color="#d4a050"/>
|
||||
<stop offset="40%" stop-color="#c88a3a"/>
|
||||
<stop offset="100%" stop-color="#a06828"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="beakPouch" x1="0" y1="0" x2="0.5" y2="1">
|
||||
<stop offset="0%" stop-color="#e8a060"/>
|
||||
<stop offset="50%" stop-color="#d4703a"/>
|
||||
<stop offset="100%" stop-color="#c85a2a"/>
|
||||
</linearGradient>
|
||||
<!-- Cloud filter -->
|
||||
<filter id="cloudSoft">
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
</filter>
|
||||
<!-- Shadow -->
|
||||
<filter id="shadow">
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feOffset dx="2" dy="3"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.3"/>
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
<!-- Spoke pattern -->
|
||||
<clipPath id="wheelClip1">
|
||||
<circle cx="340" cy="480" r="52"/>
|
||||
</clipPath>
|
||||
<clipPath id="wheelClip2">
|
||||
<circle cx="540" cy="480" r="52"/>
|
||||
</clipPath>
|
||||
<!-- Wing feather gradient -->
|
||||
<linearGradient id="wingFeath" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#f0ece0"/>
|
||||
<stop offset="40%" stop-color="#e0d8c8"/>
|
||||
<stop offset="70%" stop-color="#c8c0b0"/>
|
||||
<stop offset="100%" stop-color="#2a2a2a"/>
|
||||
</linearGradient>
|
||||
<!-- Animate wheel rotation -->
|
||||
<animateTransform id="spin1" attributeName="transform" type="rotate" from="0 340 480" to="360 340 480" dur="1.2s" repeatCount="indefinite"/>
|
||||
<animateTransform id="spin2" attributeName="transform" type="rotate" from="0 540 480" to="360 540 480" dur="1.2s" repeatCount="indefinite"/>
|
||||
</defs>
|
||||
|
||||
<!-- SKY -->
|
||||
<rect width="900" height="650" fill="url(#sky)"/>
|
||||
<rect width="900" height="650" fill="url(#sunGlow)"/>
|
||||
|
||||
<!-- SUN -->
|
||||
<circle cx="680" cy="320" r="38" fill="#fff5d0" opacity="0.95"/>
|
||||
<circle cx="680" cy="320" r="50" fill="#ffe8a0" opacity="0.3"/>
|
||||
<circle cx="680" cy="320" r="70" fill="#f5c882" opacity="0.12"/>
|
||||
|
||||
<!-- CLOUDS -->
|
||||
<g opacity="0.35">
|
||||
<ellipse cx="150" cy="120" rx="90" ry="22" fill="#e8c0a0" filter="url(#cloudSoft)"/>
|
||||
<ellipse cx="200" cy="110" rx="60" ry="18" fill="#e8c8b0" filter="url(#cloudSoft)"/>
|
||||
<ellipse cx="550" cy="150" rx="100" ry="20" fill="#d4a888" filter="url(#cloudSoft)"/>
|
||||
<ellipse cx="600" cy="140" rx="55" ry="15" fill="#d4b898" filter="url(#cloudSoft)"/>
|
||||
<ellipse cx="780" cy="200" rx="70" ry="16" fill="#c8a080" filter="url(#cloudSoft)"/>
|
||||
</g>
|
||||
|
||||
<!-- Distant birds -->
|
||||
<g stroke="#5a3a2a" stroke-width="1.2" fill="none" opacity="0.3">
|
||||
<path d="M120,180 Q125,174 130,180 Q135,174 140,180"/>
|
||||
<path d="M160,160 Q164,155 168,160 Q172,155 176,160"/>
|
||||
<path d="M300,130 Q305,124 310,130 Q315,124 320,130"/>
|
||||
<path d="M750,240 Q754,235 758,240 Q762,235 766,240"/>
|
||||
</g>
|
||||
|
||||
<!-- OCEAN -->
|
||||
<path d="M0,370 Q150,355 300,365 Q500,380 700,360 Q800,355 900,368 L900,520 L0,520 Z" fill="url(#ocean)" filter="url(#shimmer)"/>
|
||||
|
||||
<!-- Sun reflection on water -->
|
||||
<path d="M620,370 Q650,390 680,375 Q710,390 740,370 L740,500 Q710,490 680,500 Q650,490 620,500 Z" fill="url(#sunReflect)" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.5;0.7;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Wave details -->
|
||||
<g fill="none" stroke="#5a9ab5" stroke-width="1" opacity="0.4">
|
||||
<path d="M0,385 Q80,378 160,387 Q250,395 340,383 Q440,375 540,388 Q650,398 750,382 Q830,375 900,385">
|
||||
<animate attributeName="d" values="M0,385 Q80,378 160,387 Q250,395 340,383 Q440,375 540,388 Q650,398 750,382 Q830,375 900,385;M0,387 Q80,395 160,384 Q250,378 340,390 Q440,398 540,383 Q650,375 750,388 Q830,395 900,383;M0,385 Q80,378 160,387 Q250,395 340,383 Q440,375 540,388 Q650,398 750,382 Q830,375 900,385" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M0,400 Q100,394 200,403 Q350,412 450,398 Q550,390 700,405 Q800,412 900,400">
|
||||
<animate attributeName="d" values="M0,400 Q100,394 200,403 Q350,412 450,398 Q550,390 700,405 Q800,412 900,400;M0,403 Q100,410 200,398 Q350,392 450,406 Q550,414 700,398 Q800,392 900,403;M0,400 Q100,394 200,403 Q350,412 450,398 Q550,390 700,405 Q800,412 900,400" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Foam line -->
|
||||
<path d="M0,430 Q60,425 120,432 Q200,438 280,428 Q380,420 480,434 Q580,442 680,426 Q780,418 900,430" fill="none" stroke="#f0e8d8" stroke-width="2.5" opacity="0.5">
|
||||
<animate attributeName="d" values="M0,430 Q60,425 120,432 Q200,438 280,428 Q380,420 480,434 Q580,442 680,426 Q780,418 900,430;M0,432 Q60,438 120,428 Q200,422 280,435 Q380,442 480,428 Q580,420 680,434 Q780,440 900,428;M0,430 Q60,425 120,432 Q200,438 280,428 Q380,420 480,434 Q580,442 680,426 Q780,418 900,430" dur="6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- WET SAND -->
|
||||
<path d="M0,435 Q150,428 300,438 Q500,448 700,432 Q800,428 900,436 L900,520 L0,520 Z" fill="url(#wetSand)"/>
|
||||
|
||||
<!-- DRY SAND -->
|
||||
<path d="M0,490 Q200,484 400,492 Q600,498 900,488 L900,650 L0,650 Z" fill="url(#drySand)"/>
|
||||
|
||||
<!-- Sand texture dots -->
|
||||
<g fill="#b8a070" opacity="0.25">
|
||||
<circle cx="50" cy="530" r="1"/><circle cx="120" cy="545" r="0.8"/>
|
||||
<circle cx="200" cy="520" r="1.2"/><circle cx="280" cy="555" r="0.7"/>
|
||||
<circle cx="350" cy="535" r="1"/><circle cx="430" cy="550" r="0.9"/>
|
||||
<circle cx="500" cy="525" r="1.1"/><circle cx="580" cy="560" r="0.8"/>
|
||||
<circle cx="650" cy="540" r="1"/><circle cx="720" cy="555" r="0.9"/>
|
||||
<circle cx="800" cy="530" r="1.2"/><circle cx="860" cy="548" r="0.7"/>
|
||||
<circle cx="100" cy="580" r="0.9"/><circle cx="300" cy="590" r="1"/>
|
||||
<circle cx="500" cy="585" r="0.8"/><circle cx="700" cy="595" r="1.1"/>
|
||||
<circle cx="150" cy="610" r="0.7"/><circle cx="400" cy="620" r="0.9"/>
|
||||
<circle cx="600" cy="615" r="1"/><circle cx="800" cy="605" r="0.8"/>
|
||||
</g>
|
||||
|
||||
<!-- Small shells on sand -->
|
||||
<g opacity="0.3">
|
||||
<path d="M180,540 Q183,535 188,538 Q185,542 180,540Z" fill="#d8c8a8"/>
|
||||
<path d="M620,560 Q624,554 630,557 Q626,562 620,560Z" fill="#c8b898"/>
|
||||
<path d="M770,545 Q774,540 778,544 Q775,548 770,545Z" fill="#d0c0a0"/>
|
||||
</g>
|
||||
|
||||
<!-- ====== BICYCLE + PELICAN GROUP (slight tilt for motion feel) ====== -->
|
||||
<g transform="translate(0,-12)">
|
||||
|
||||
<!-- Ground shadow of bicycle+pelican -->
|
||||
<ellipse cx="445" cy="540" rx="130" ry="12" fill="#7a6a4e" opacity="0.25" filter="url(#shadow)"/>
|
||||
|
||||
<!-- ====== BICYCLE ====== -->
|
||||
<g>
|
||||
<!-- Rear wheel -->
|
||||
<g>
|
||||
<!-- Tire -->
|
||||
<circle cx="340" cy="480" r="55" fill="none" stroke="#1a1a1a" stroke-width="10"/>
|
||||
<circle cx="340" cy="480" r="55" fill="none" stroke="#2a2a2a" stroke-width="8"/>
|
||||
<circle cx="340" cy="480" r="50" fill="none" stroke="#333" stroke-width="1.5" opacity="0.3"/>
|
||||
<!-- Tire tread -->
|
||||
<circle cx="340" cy="480" r="55" fill="none" stroke="#222" stroke-width="10" stroke-dasharray="3 5" opacity="0.3"/>
|
||||
<!-- Spokes -->
|
||||
<g stroke="#b8b8b8" stroke-width="0.8" opacity="0.7">
|
||||
<line x1="340" y1="480" x2="340" y2="428"/>
|
||||
<line x1="340" y1="480" x2="340" y2="532"/>
|
||||
<line x1="340" y1="480" x2="288" y2="480"/>
|
||||
<line x1="340" y1="480" x2="392" y2="480"/>
|
||||
<line x1="340" y1="480" x2="303" y2="443"/>
|
||||
<line x1="340" y1="480" x2="377" y2="517"/>
|
||||
<line x1="340" y1="480" x2="377" y2="443"/>
|
||||
<line x1="340" y1="480" x2="303" y2="517"/>
|
||||
<line x1="340" y1="480" x2="318" y2="433"/>
|
||||
<line x1="340" y1="480" x2="362" y2="527"/>
|
||||
<line x1="340" y1="480" x2="293" y2="458"/>
|
||||
<line x1="340" y1="480" x2="387" y2="502"/>
|
||||
<line x1="340" y1="480" x2="293" y2="502"/>
|
||||
<line x1="340" y1="480" x2="387" y2="458"/>
|
||||
<line x1="340" y1="480" x2="318" y2="527"/>
|
||||
<line x1="340" y1="480" x2="362" y2="433"/>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 340 480" to="360 340 480" dur="1.2s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Hub -->
|
||||
<circle cx="340" cy="480" r="6" fill="url(#chrome)"/>
|
||||
<circle cx="340" cy="480" r="3" fill="#888"/>
|
||||
</g>
|
||||
|
||||
<!-- Front wheel -->
|
||||
<g>
|
||||
<circle cx="540" cy="480" r="55" fill="none" stroke="#1a1a1a" stroke-width="10"/>
|
||||
<circle cx="540" cy="480" r="55" fill="none" stroke="#2a2a2a" stroke-width="8"/>
|
||||
<circle cx="540" cy="480" r="50" fill="none" stroke="#333" stroke-width="1.5" opacity="0.3"/>
|
||||
<circle cx="540" cy="480" r="55" fill="none" stroke="#222" stroke-width="10" stroke-dasharray="3 5" opacity="0.3"/>
|
||||
<g stroke="#b8b8b8" stroke-width="0.8" opacity="0.7">
|
||||
<line x1="540" y1="480" x2="540" y2="428"/>
|
||||
<line x1="540" y1="480" x2="540" y2="532"/>
|
||||
<line x1="540" y1="480" x2="488" y2="480"/>
|
||||
<line x1="540" y1="480" x2="592" y2="480"/>
|
||||
<line x1="540" y1="480" x2="503" y2="443"/>
|
||||
<line x1="540" y1="480" x2="577" y2="517"/>
|
||||
<line x1="540" y1="480" x2="577" y2="443"/>
|
||||
<line x1="540" y1="480" x2="503" y2="517"/>
|
||||
<line x1="540" y1="480" x2="518" y2="433"/>
|
||||
<line x1="540" y1="480" x2="562" y2="527"/>
|
||||
<line x1="540" y1="480" x2="493" y2="458"/>
|
||||
<line x1="540" y1="480" x2="587" y2="502"/>
|
||||
<line x1="540" y1="480" x2="493" y2="502"/>
|
||||
<line x1="540" y1="480" x2="587" y2="458"/>
|
||||
<line x1="540" y1="480" x2="518" y2="527"/>
|
||||
<line x1="540" y1="480" x2="562" y2="433"/>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 540 480" to="360 540 480" dur="1.2s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<circle cx="540" cy="480" r="6" fill="url(#chrome)"/>
|
||||
<circle cx="540" cy="480" r="3" fill="#888"/>
|
||||
</g>
|
||||
|
||||
<!-- Frame -->
|
||||
<g stroke="#cc3030" stroke-width="5" stroke-linecap="round" fill="none">
|
||||
<!-- Seat tube -->
|
||||
<line x1="410" y1="395" x2="395" y2="475"/>
|
||||
<!-- Top tube -->
|
||||
<line x1="410" y1="395" x2="505" y2="402"/>
|
||||
<!-- Down tube -->
|
||||
<line x1="505" y1="402" x2="395" y2="475"/>
|
||||
<!-- Chain stay -->
|
||||
<line x1="395" y1="475" x2="340" y2="480"/>
|
||||
<!-- Seat stay -->
|
||||
<line x1="410" y1="395" x2="340" y2="480"/>
|
||||
</g>
|
||||
|
||||
<!-- Fork -->
|
||||
<g stroke="#cc3030" stroke-width="4.5" stroke-linecap="round" fill="none">
|
||||
<line x1="505" y1="402" x2="520" y2="388"/>
|
||||
<path d="M520,388 Q528,420 540,480"/>
|
||||
</g>
|
||||
|
||||
<!-- Chain ring -->
|
||||
<circle cx="395" cy="475" r="14" fill="none" stroke="#888" stroke-width="2"/>
|
||||
<circle cx="395" cy="475" r="10" fill="none" stroke="#aaa" stroke-width="1"/>
|
||||
<!-- Chain -->
|
||||
<path d="M395,475 L340,480" stroke="#666" stroke-width="1.5" fill="none" stroke-dasharray="3 2"/>
|
||||
|
||||
<!-- Seat post -->
|
||||
<line x1="410" y1="395" x2="415" y2="378" stroke="#555" stroke-width="4" stroke-linecap="round"/>
|
||||
<!-- Saddle -->
|
||||
<path d="M398,377 Q415,370 432,377 Q425,382 405,382 Z" fill="#3a2a1a"/>
|
||||
<path d="M400,377 Q415,372 430,377" fill="none" stroke="#4a3a2a" stroke-width="1"/>
|
||||
|
||||
<!-- Handlebars -->
|
||||
<line x1="520" y1="388" x2="522" y2="370" stroke="#555" stroke-width="3.5" stroke-linecap="round"/>
|
||||
<!-- Handle bar -->
|
||||
<path d="M508,365 Q522,358 536,365" stroke="#333" stroke-width="4" stroke-linecap="round" fill="none"/>
|
||||
<!-- Grips -->
|
||||
<line x1="506" y1="365" x2="500" y2="368" stroke="#2a2a2a" stroke-width="5" stroke-linecap="round"/>
|
||||
<line x1="538" y1="365" x2="544" y2="368" stroke="#2a2a2a" stroke-width="5" stroke-linecap="round"/>
|
||||
|
||||
<!-- Pedals -->
|
||||
<g>
|
||||
<rect x="383" y="488" width="18" height="5" rx="1" fill="#666" stroke="#555" stroke-width="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 395 475" to="360 395 475" dur="1.2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
|
||||
<!-- Fender accents -->
|
||||
<path d="M305,435 Q340,418 375,435" fill="none" stroke="#a82828" stroke-width="2.5" opacity="0.6"/>
|
||||
<path d="M505,435 Q540,418 575,435" fill="none" stroke="#a82828" stroke-width="2.5" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- ====== PELICAN ====== -->
|
||||
<g>
|
||||
<!-- Tail feathers -->
|
||||
<g opacity="0.9">
|
||||
<path d="M365,390 Q340,375 330,355 Q338,365 345,370 Q340,360 335,345 Q342,358 350,365 Q348,352 345,338 Q352,355 358,368" fill="#e8e0d0" stroke="#c8c0b0" stroke-width="0.5"/>
|
||||
<path d="M368,388 Q350,370 345,348 Q352,362 360,370" fill="#d8d0c0" stroke="#b8b0a0" stroke-width="0.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Body -->
|
||||
<path d="M370,400 Q360,380 370,360 Q385,340 420,335 Q455,330 480,340 Q500,348 505,365 Q508,380 500,398 Q490,415 465,420 Q440,425 415,420 Q390,415 375,408 Z" fill="#f2ece0"/>
|
||||
<path d="M370,400 Q360,380 370,360 Q385,340 420,335 Q455,330 480,340 Q500,348 505,365 Q508,380 500,398 Q490,415 465,420 Q440,425 415,420 Q390,415 375,408 Z" fill="#ede5d5" filter="url(#featherTex)"/>
|
||||
|
||||
<!-- Belly shading -->
|
||||
<path d="M390,405 Q410,418 440,420 Q465,418 480,408 Q475,415 455,422 Q430,426 410,420 Z" fill="#d8d0c0" opacity="0.5"/>
|
||||
|
||||
<!-- Wing (back) -->
|
||||
<path d="M385,365 Q395,345 425,340 Q445,338 458,345 Q465,350 462,362 Q458,372 445,378 Q430,382 415,380 Q398,377 388,370 Z" fill="#e0d8c8" stroke="#c8c0b0" stroke-width="0.5"/>
|
||||
|
||||
<!-- Wing feather details -->
|
||||
<g stroke="#b8b0a0" stroke-width="0.6" fill="none" opacity="0.5">
|
||||
<path d="M400,370 Q410,358 425,355"/>
|
||||
<path d="M408,374 Q418,362 435,358"/>
|
||||
<path d="M395,366 Q405,354 418,350"/>
|
||||
<path d="M415,376 Q425,365 442,362"/>
|
||||
</g>
|
||||
|
||||
<!-- Wing (front, slightly raised for cycling posture) -->
|
||||
<path d="M420,355 Q435,340 460,338 Q478,337 488,345 Q494,352 490,365 Q485,375 472,380 Q458,384 442,382 Q428,380 422,372 Z" fill="#eae2d2" stroke="#c8c0b0" stroke-width="0.5"/>
|
||||
|
||||
<!-- Primary flight feather tips (black/dark) -->
|
||||
<path d="M455,340 Q470,335 485,340 Q492,344 490,352 Q486,345 475,340 Q465,338 458,342 Z" fill="#3a3a3a" opacity="0.6"/>
|
||||
|
||||
<!-- Breast feathers texture -->
|
||||
<g stroke="#c8c0b0" stroke-width="0.4" fill="none" opacity="0.4">
|
||||
<path d="M400,385 Q410,380 420,385"/>
|
||||
<path d="M408,392 Q418,387 428,392"/>
|
||||
<path d="M415,398 Q425,393 435,398"/>
|
||||
<path d="M395,390 Q405,385 415,390"/>
|
||||
<path d="M425,402 Q435,397 445,402"/>
|
||||
<path d="M430,395 Q440,390 450,395"/>
|
||||
<path d="M440,388 Q450,383 460,388"/>
|
||||
</g>
|
||||
|
||||
<!-- Neck -->
|
||||
<path d="M475,350 Q490,335 498,318 Q505,300 500,280 Q496,268 492,262" fill="none" stroke="#f0e8d8" stroke-width="18" stroke-linecap="round"/>
|
||||
<path d="M475,350 Q490,335 498,318 Q505,300 500,280 Q496,268 492,262" fill="none" stroke="#ede5d5" stroke-width="16" stroke-linecap="round"/>
|
||||
|
||||
<!-- Neck feather texture -->
|
||||
<g stroke="#d8d0c0" stroke-width="0.5" fill="none" opacity="0.35">
|
||||
<path d="M484,340 Q490,335 496,340"/>
|
||||
<path d="M488,328 Q494,323 500,328"/>
|
||||
<path d="M492,315 Q498,310 504,315"/>
|
||||
<path d="M494,302 Q500,297 505,302"/>
|
||||
<path d="M496,290 Q501,285 504,290"/>
|
||||
</g>
|
||||
|
||||
<!-- Head -->
|
||||
<ellipse cx="490" cy="257" rx="20" ry="17" fill="#f2ece0"/>
|
||||
<ellipse cx="490" cy="257" rx="19" ry="16" fill="#eee6d6"/>
|
||||
|
||||
<!-- Head crest feathers -->
|
||||
<path d="M478,245 Q475,238 480,232 Q484,228 488,232 Q485,240 482,245" fill="#e0d8c8" opacity="0.7"/>
|
||||
<path d="M483,243 Q482,235 486,230 Q490,226 492,230 Q489,238 486,243" fill="#ddd5c5" opacity="0.6"/>
|
||||
|
||||
<!-- Eye ring -->
|
||||
<ellipse cx="497" cy="252" rx="6" ry="5.5" fill="#e8e0d0"/>
|
||||
<!-- Eye white -->
|
||||
<ellipse cx="498" cy="252" rx="4.5" ry="4" fill="#f8f5f0"/>
|
||||
<!-- Iris -->
|
||||
<circle cx="499" cy="252" r="2.8" fill="#c8a040"/>
|
||||
<!-- Pupil -->
|
||||
<circle cx="499.5" cy="252" r="1.5" fill="#1a1a1a"/>
|
||||
<!-- Eye highlight -->
|
||||
<circle cx="500.5" cy="250.5" r="0.8" fill="white" opacity="0.8"/>
|
||||
<!-- Eye detail ring -->
|
||||
<ellipse cx="498" cy="252" rx="4.5" ry="4" fill="none" stroke="#a08050" stroke-width="0.5" opacity="0.4"/>
|
||||
|
||||
<!-- Beak - upper mandible -->
|
||||
<path d="M508,252 Q530,245 555,248 Q568,250 575,255 Q570,252 555,250 Q530,248 510,254 Z" fill="url(#beakTop)"/>
|
||||
<path d="M508,252 Q530,245 555,248 Q568,250 575,255" fill="none" stroke="#a06828" stroke-width="0.8"/>
|
||||
<!-- Beak ridge -->
|
||||
<path d="M510,253 Q540,248 570,253" fill="none" stroke="#b87830" stroke-width="0.8" opacity="0.6"/>
|
||||
<!-- Beak hook -->
|
||||
<path d="M573,254 Q576,256 575,259 Q574,260 572,258" fill="#c88838" stroke="#a06828" stroke-width="0.5"/>
|
||||
|
||||
<!-- Beak - lower mandible and pouch -->
|
||||
<path d="M508,256 Q520,262 540,265 Q555,267 570,260 Q575,258 575,256" fill="none" stroke="#a06030" stroke-width="1"/>
|
||||
<!-- Gular pouch -->
|
||||
<path d="M510,258 Q515,275 530,282 Q545,285 558,278 Q568,270 572,258 Q560,268 540,270 Q520,268 512,260 Z" fill="url(#beakPouch)" opacity="0.8"/>
|
||||
<path d="M515,265 Q530,275 550,272 Q562,268 568,260" fill="none" stroke="#b85a28" stroke-width="0.5" opacity="0.5"/>
|
||||
<!-- Pouch texture lines -->
|
||||
<g stroke="#c06030" stroke-width="0.3" fill="none" opacity="0.35">
|
||||
<path d="M518,268 Q535,278 555,274"/>
|
||||
<path d="M520,272 Q537,280 552,276"/>
|
||||
</g>
|
||||
|
||||
<!-- Nostril -->
|
||||
<ellipse cx="530" cy="250" rx="2" ry="0.8" fill="#8a5a28" opacity="0.5"/>
|
||||
|
||||
<!-- Legs (one on pedal, one reaching forward) -->
|
||||
<!-- Back leg on pedal -->
|
||||
<path d="M420,415 Q415,435 405,455 Q398,468 392,478" stroke="#d4a050" stroke-width="4" fill="none" stroke-linecap="round"/>
|
||||
<path d="M420,415 Q415,435 405,455 Q398,468 392,478" stroke="#c89040" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
<!-- Back foot on pedal -->
|
||||
<path d="M385,480 Q392,476 400,480 Q395,482 385,480Z" fill="#d4a050"/>
|
||||
|
||||
<!-- Front foot reaching to handlebar area (webbed feet gripping) -->
|
||||
<path d="M465,418 Q475,435 485,450 Q495,460 502,468" stroke="#d4a050" stroke-width="4" fill="none" stroke-linecap="round"/>
|
||||
<path d="M465,418 Q475,435 485,450 Q495,460 502,468" stroke="#c89040" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
<!-- Webbed foot detail -->
|
||||
<path d="M498,470 L508,466 L505,472 L512,470 L508,475 L514,474 L506,480 L498,476 Z" fill="#d4a050" stroke="#b88040" stroke-width="0.5"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Foreground water splash near wheels -->
|
||||
<g opacity="0.3">
|
||||
<circle cx="310" cy="510" r="2" fill="#a0c8d8">
|
||||
<animate attributeName="cy" values="510;504;510" dur="0.8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.5;0.3" dur="0.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="320" cy="508" r="1.5" fill="#a0c8d8">
|
||||
<animate attributeName="cy" values="508;500;508" dur="0.7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="560" cy="512" r="2" fill="#a0c8d8">
|
||||
<animate attributeName="cy" values="512;505;512" dur="0.9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="550" cy="506" r="1.5" fill="#a0c8d8">
|
||||
<animate attributeName="cy" values="506;498;506" dur="0.75s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Small footprints in sand (behind the bike) -->
|
||||
<g fill="#b8a070" opacity="0.15">
|
||||
<ellipse cx="220" cy="520" rx="4" ry="2.5" transform="rotate(-10,220,520)"/>
|
||||
<ellipse cx="245" cy="525" rx="4" ry="2.5" transform="rotate(5,245,525)"/>
|
||||
<ellipse cx="200" cy="528" rx="3.5" ry="2" transform="rotate(-15,200,528)"/>
|
||||
</g>
|
||||
|
||||
<!-- Seagulls in mid-distance -->
|
||||
<g stroke="#eee" stroke-width="1.5" fill="none" opacity="0.4">
|
||||
<path d="M100,280 Q106,272 112,280 Q118,272 124,280"/>
|
||||
<path d="M140,260 Q145,254 150,260 Q155,254 160,260"/>
|
||||
</g>
|
||||
|
||||
<!-- Motion lines behind pelican -->
|
||||
<g stroke="#c8c0b0" stroke-width="0.8" opacity="0.2">
|
||||
<line x1="280" y1="360" x2="320" y2="362">
|
||||
<animate attributeName="x1" values="280;270;280" dur="0.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="270" y1="375" x2="315" y2="377">
|
||||
<animate attributeName="x1" values="270;258;270" dur="0.6s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="285" y1="390" x2="325" y2="392">
|
||||
<animate attributeName="x1" values="285;275;285" dur="0.55s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 23 KiB |
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,390 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="800" viewBox="0 0 1400 800">
|
||||
<title>Pelican Cycling by the Sea</title>
|
||||
<desc>A vivid, realistic pelican riding a bicycle along a seaside beach at golden hour.</desc>
|
||||
<defs>
|
||||
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#4ea7ff"/>
|
||||
<stop offset="0.45" stop-color="#bfe9ff"/>
|
||||
<stop offset="0.75" stop-color="#f6fbff"/>
|
||||
<stop offset="1" stop-color="#fff3dc"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0" stop-color="#fffbe6" stop-opacity="1"/>
|
||||
<stop offset="0.55" stop-color="#ffe19a" stop-opacity="0.95"/>
|
||||
<stop offset="1" stop-color="#ffb35c" stop-opacity="0.25"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="seaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#0a4d78"/>
|
||||
<stop offset="0.55" stop-color="#0f6f9b"/>
|
||||
<stop offset="0.85" stop-color="#17a8b0"/>
|
||||
<stop offset="1" stop-color="#7fe6d8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sandGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#f3d4a7"/>
|
||||
<stop offset="0.55" stop-color="#e2bf91"/>
|
||||
<stop offset="1" stop-color="#caa076"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wetSandGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#caa17a" stop-opacity="0.15"/>
|
||||
<stop offset="0.3" stop-color="#7bbdc2" stop-opacity="0.28"/>
|
||||
<stop offset="1" stop-color="#2f6a77" stop-opacity="0.08"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="rimGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#dfe8ef"/>
|
||||
<stop offset="0.35" stop-color="#aab6c1"/>
|
||||
<stop offset="1" stop-color="#eef4f9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="frameGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#1f9aa0"/>
|
||||
<stop offset="0.55" stop-color="#176f7a"/>
|
||||
<stop offset="1" stop-color="#0e4f5f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="pelicanBodyGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fbfdff"/>
|
||||
<stop offset="0.55" stop-color="#e6edf3"/>
|
||||
<stop offset="1" stop-color="#c9d3dc"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="pelicanWingGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#eef4fa"/>
|
||||
<stop offset="0.6" stop-color="#c8d4df"/>
|
||||
<stop offset="1" stop-color="#aab6c1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="beakGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0" stop-color="#f3d24c"/>
|
||||
<stop offset="0.55" stop-color="#f0b32e"/>
|
||||
<stop offset="1" stop-color="#d9861d"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="pouchGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#ffd8bf"/>
|
||||
<stop offset="0.65" stop-color="#ffb8a8"/>
|
||||
<stop offset="1" stop-color="#e28b7e"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="sunGlow" x="-40%" y="-40%" width="180%" height="180%">
|
||||
<feGaussianBlur stdDeviation="10" result="b"/>
|
||||
<feColorMatrix in="b" type="matrix"
|
||||
values="1 0 0 0 0
|
||||
0 0.9 0 0 0
|
||||
0 0 0.7 0 0
|
||||
0 0 0 0.75 0" result="c"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="c"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="softShadow" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feOffset dx="14" dy="18" in="SourceAlpha" result="o"/>
|
||||
<feGaussianBlur stdDeviation="14" in="o" result="b"/>
|
||||
<feColorMatrix in="b" type="matrix"
|
||||
values="0 0 0 0 0
|
||||
0 0 0 0 0
|
||||
0 0 0 0 0
|
||||
0 0 0 0.38 0" result="s"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="s"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="grain" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="8" result="n"/>
|
||||
<feColorMatrix in="n" type="matrix"
|
||||
values="0 0 0 0 0.55
|
||||
0 0 0 0 0.55
|
||||
0 0 0 0 0.55
|
||||
0 0 0 0.14 0" result="g"/>
|
||||
<feBlend in="SourceGraphic" in2="g" mode="soft-light"/>
|
||||
</filter>
|
||||
|
||||
<filter id="seaShimmer" x="-20%" y="-30%" width="140%" height="170%">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" seed="3" result="t"/>
|
||||
<feDisplacementMap in="SourceGraphic" in2="t" scale="18" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
|
||||
<radialGradient id="vigGrad" cx="50%" cy="45%" r="68%">
|
||||
<stop offset="0" stop-color="black" stop-opacity="1"/>
|
||||
<stop offset="0.72" stop-color="black" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="1"/>
|
||||
</radialGradient>
|
||||
|
||||
<mask id="vignette">
|
||||
<rect x="0" y="0" width="1400" height="800" fill="white"/>
|
||||
<rect x="0" y="0" width="1400" height="800" fill="url(#vigGrad)"/>
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<!-- Sky -->
|
||||
<rect x="0" y="0" width="1400" height="800" fill="url(#skyGrad)"/>
|
||||
|
||||
<!-- Sun -->
|
||||
<g filter="url(#sunGlow)">
|
||||
<circle cx="270" cy="135" r="98" fill="url(#sunGrad)"/>
|
||||
<circle cx="270" cy="135" r="38" fill="#fffce9" opacity="0.9"/>
|
||||
</g>
|
||||
|
||||
<!-- Distant haze at horizon -->
|
||||
<rect x="0" y="235" width="1400" height="95" fill="#ffffff" opacity="0.22"/>
|
||||
|
||||
<!-- Soft clouds -->
|
||||
<g opacity="0.55" filter="url(#grain)">
|
||||
<g transform="translate(110,72)">
|
||||
<ellipse cx="210" cy="90" rx="130" ry="52" fill="#ffffff" opacity="0.85"/>
|
||||
<ellipse cx="310" cy="84" rx="98" ry="40" fill="#ffffff" opacity="0.85"/>
|
||||
<ellipse cx="130" cy="98" rx="90" ry="38" fill="#ffffff" opacity="0.82"/>
|
||||
<ellipse cx="250" cy="112" rx="150" ry="48" fill="#ffffff" opacity="0.58"/>
|
||||
</g>
|
||||
<g transform="translate(880,88) scale(0.95)">
|
||||
<ellipse cx="160" cy="90" rx="112" ry="42" fill="#ffffff" opacity="0.82"/>
|
||||
<ellipse cx="250" cy="82" rx="92" ry="36" fill="#ffffff" opacity="0.82"/>
|
||||
<ellipse cx="95" cy="103" rx="78" ry="30" fill="#ffffff" opacity="0.8"/>
|
||||
<ellipse cx="190" cy="112" rx="130" ry="44" fill="#ffffff" opacity="0.55"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Tiny distant birds -->
|
||||
<g fill="none" stroke="#2b4c67" stroke-opacity="0.55" stroke-width="3" stroke-linecap="round">
|
||||
<path d="M 1040 165 C 1050 158 1060 158 1070 165"/>
|
||||
<path d="M 1075 165 C 1085 158 1095 158 1105 165"/>
|
||||
<path d="M 980 200 C 990 194 1000 194 1010 200"/>
|
||||
</g>
|
||||
|
||||
<!-- Sea -->
|
||||
<g filter="url(#seaShimmer)">
|
||||
<rect x="0" y="280" width="1400" height="360" fill="url(#seaGrad)"/>
|
||||
</g>
|
||||
|
||||
<!-- Wave highlights -->
|
||||
<g fill="none" stroke="#e8fbff" stroke-linecap="round" stroke-opacity="0.28">
|
||||
<path d="M 70 380 C 170 355 270 355 370 380 S 570 405 670 380 S 870 355 970 380 S 1170 405 1270 380" stroke-width="4"/>
|
||||
<path d="M 0 430 C 120 410 240 410 360 430 S 600 450 720 430 S 960 410 1080 430 S 1320 450 1440 430" stroke-width="3"/>
|
||||
<path d="M 60 482 C 200 465 340 465 480 482 S 760 505 900 482 S 1180 465 1320 482" stroke-width="3"/>
|
||||
<path d="M 110 535 C 250 520 390 520 530 535 S 810 555 950 535 S 1230 520 1370 535" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- Beach + shoreline -->
|
||||
<path d="M 0 560 C 240 515 520 540 760 560 C 1010 580 1190 560 1400 520 L 1400 800 L 0 800 Z" fill="url(#sandGrad)" filter="url(#grain)"/>
|
||||
<path d="M 0 560 C 240 520 520 545 760 565 C 1010 585 1190 565 1400 525 L 1400 615 C 1180 650 980 660 760 650 C 510 640 260 640 0 690 Z" fill="url(#wetSandGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Foamy waterline -->
|
||||
<g fill="none" stroke="#ffffff" stroke-opacity="0.55" stroke-linecap="round">
|
||||
<path d="M 0 568 C 230 523 520 548 760 568 C 1015 589 1210 568 1400 529" stroke-width="7"/>
|
||||
<path d="M 20 592 C 255 555 520 575 760 592 C 1015 610 1190 600 1380 565" stroke-width="3" stroke-opacity="0.28"/>
|
||||
</g>
|
||||
|
||||
<!-- Foreground details: shells + pebbles -->
|
||||
<g opacity="0.5" filter="url(#grain)">
|
||||
<circle cx="128" cy="736" r="6" fill="#8a6a4d"/>
|
||||
<circle cx="152" cy="748" r="4" fill="#7b5c42"/>
|
||||
<path d="M 206 742 C 212 732 224 732 230 742 C 225 752 211 752 206 742 Z" fill="#a98563"/>
|
||||
<path d="M 1040 728 C 1050 712 1070 714 1080 730 C 1068 748 1048 746 1040 728 Z" fill="#a47f5b" opacity="0.75"/>
|
||||
<circle cx="1108" cy="748" r="5" fill="#7a5a40"/>
|
||||
<circle cx="1134" cy="760" r="3" fill="#6a4c35"/>
|
||||
</g>
|
||||
|
||||
<!-- Bicycle + pelican -->
|
||||
<g transform="translate(0,0)" filter="url(#softShadow)">
|
||||
<!-- Ground shadow -->
|
||||
<ellipse cx="710" cy="770" rx="430" ry="58" fill="#1b1a1a" opacity="0.22"/>
|
||||
|
||||
<!-- Bicycle -->
|
||||
<g id="bike" transform="translate(0,0)">
|
||||
<!-- Wheels -->
|
||||
<g id="wheelLeft" transform="translate(520,650)">
|
||||
<circle r="118" fill="#151515"/>
|
||||
<circle r="102" fill="url(#rimGrad)" opacity="0.95"/>
|
||||
<circle r="84" fill="#232a2f" opacity="0.95"/>
|
||||
<circle r="12" fill="#e9eff5"/>
|
||||
<circle r="6" fill="#2a2a2a" opacity="0.8"/>
|
||||
<g stroke="#f6fbff" stroke-opacity="0.55" stroke-width="2">
|
||||
<line x1="0" y1="-82" x2="0" y2="82"/>
|
||||
<line x1="-82" y1="0" x2="82" y2="0"/>
|
||||
<line x1="-58" y1="-58" x2="58" y2="58"/>
|
||||
<line x1="-58" y1="58" x2="58" y2="-58"/>
|
||||
<line x1="-22" y1="-82" x2="22" y2="82" opacity="0.55"/>
|
||||
<line x1="22" y1="-82" x2="-22" y2="82" opacity="0.55"/>
|
||||
<line x1="-82" y1="-22" x2="82" y2="22" opacity="0.55"/>
|
||||
<line x1="-82" y1="22" x2="82" y2="-22" opacity="0.55"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="wheelRight" transform="translate(870,650)">
|
||||
<circle r="118" fill="#151515"/>
|
||||
<circle r="102" fill="url(#rimGrad)" opacity="0.95"/>
|
||||
<circle r="84" fill="#232a2f" opacity="0.95"/>
|
||||
<circle r="12" fill="#e9eff5"/>
|
||||
<circle r="6" fill="#2a2a2a" opacity="0.8"/>
|
||||
<g stroke="#f6fbff" stroke-opacity="0.55" stroke-width="2">
|
||||
<line x1="0" y1="-82" x2="0" y2="82"/>
|
||||
<line x1="-82" y1="0" x2="82" y2="0"/>
|
||||
<line x1="-58" y1="-58" x2="58" y2="58"/>
|
||||
<line x1="-58" y1="58" x2="58" y2="-58"/>
|
||||
<line x1="-22" y1="-82" x2="22" y2="82" opacity="0.55"/>
|
||||
<line x1="22" y1="-82" x2="-22" y2="82" opacity="0.55"/>
|
||||
<line x1="-82" y1="-22" x2="82" y2="22" opacity="0.55"/>
|
||||
<line x1="-82" y1="22" x2="82" y2="-22" opacity="0.55"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Frame -->
|
||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M 520 650 L 690 520 L 855 520 L 700 650 L 520 650"
|
||||
stroke="url(#frameGrad)" stroke-width="16"/>
|
||||
<path d="M 690 520 L 870 650" stroke="url(#frameGrad)" stroke-width="16"/>
|
||||
<path d="M 700 650 L 855 520" stroke="url(#frameGrad)" stroke-width="16"/>
|
||||
<!-- Highlight stroke -->
|
||||
<path d="M 530 640 L 690 520 L 850 520"
|
||||
stroke="#5cf0f5" stroke-opacity="0.35" stroke-width="5"/>
|
||||
<path d="M 705 640 L 860 525" stroke="#5cf0f5" stroke-opacity="0.28" stroke-width="5"/>
|
||||
</g>
|
||||
|
||||
<!-- Fork + handlebar -->
|
||||
<g fill="none" stroke="#0f3947" stroke-width="12" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M 855 520 L 880 650"/>
|
||||
<path d="M 830 500 C 860 480 900 480 930 500" />
|
||||
</g>
|
||||
<g fill="none" stroke="#dfe8ef" stroke-opacity="0.8" stroke-width="4" stroke-linecap="round">
|
||||
<path d="M 832 498 C 860 484 902 484 928 498" />
|
||||
</g>
|
||||
|
||||
<!-- Seat -->
|
||||
<g transform="translate(690,520)">
|
||||
<path d="M -48 -8 C -14 -28 30 -28 58 -10 C 48 10 10 18 -38 12 C -52 10 -56 0 -48 -8 Z"
|
||||
fill="#1a1a1a"/>
|
||||
<path d="M -12 6 L -2 58" stroke="#2a2a2a" stroke-width="10" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Crank + chain ring -->
|
||||
<g>
|
||||
<circle cx="700" cy="650" r="34" fill="#232a2f"/>
|
||||
<circle cx="700" cy="650" r="22" fill="#e9eff5" opacity="0.92"/>
|
||||
<circle cx="700" cy="650" r="10" fill="#2a2a2a" opacity="0.85"/>
|
||||
<path d="M 700 650 L 758 632" stroke="#232a2f" stroke-width="10" stroke-linecap="round"/>
|
||||
<path d="M 700 650 L 650 680" stroke="#232a2f" stroke-width="10" stroke-linecap="round"/>
|
||||
<g>
|
||||
<rect x="756" y="624" width="44" height="18" rx="6" fill="#31363b"/>
|
||||
<rect x="646" y="672" width="42" height="18" rx="6" fill="#31363b"/>
|
||||
<rect x="760" y="628" width="36" height="10" rx="5" fill="#dfe8ef" opacity="0.35"/>
|
||||
<rect x="650" y="676" width="34" height="10" rx="5" fill="#dfe8ef" opacity="0.35"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Chain hint -->
|
||||
<path d="M 705 670 C 760 680 820 682 870 670" fill="none" stroke="#141414" stroke-opacity="0.35" stroke-width="6" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Pelican -->
|
||||
<g id="pelican" transform="translate(0,0)">
|
||||
<!-- Back wing (behind body) -->
|
||||
<path d="M 570 520
|
||||
C 542 488 546 446 578 426
|
||||
C 610 406 662 412 690 438
|
||||
C 712 458 716 486 706 512
|
||||
C 694 546 642 566 602 560
|
||||
C 586 558 578 548 570 520 Z"
|
||||
fill="url(#pelicanWingGrad)" opacity="0.78"/>
|
||||
|
||||
<!-- Body -->
|
||||
<path d="M 560 520
|
||||
C 548 468 582 420 648 410
|
||||
C 712 400 770 432 792 492
|
||||
C 816 558 768 612 690 618
|
||||
C 614 624 572 586 560 520 Z"
|
||||
fill="url(#pelicanBodyGrad)" stroke="#8f9aa4" stroke-opacity="0.55" stroke-width="3"/>
|
||||
|
||||
<!-- Belly shadow -->
|
||||
<path d="M 592 540
|
||||
C 604 580 638 604 690 604
|
||||
C 742 604 776 576 788 540
|
||||
C 768 596 728 636 680 636
|
||||
C 630 636 604 600 592 540 Z"
|
||||
fill="#5f6b76" opacity="0.12"/>
|
||||
|
||||
<!-- Front wing/arm to handlebar -->
|
||||
<path d="M 640 470
|
||||
C 722 450 792 456 866 496
|
||||
C 898 514 914 530 922 544
|
||||
C 908 556 886 554 858 538
|
||||
C 800 504 742 492 680 506
|
||||
C 656 512 638 504 630 492
|
||||
C 624 482 628 474 640 470 Z"
|
||||
fill="url(#pelicanWingGrad)" stroke="#7f8a95" stroke-opacity="0.38" stroke-width="2"/>
|
||||
<path d="M 690 490 C 754 482 816 496 876 528" fill="none" stroke="#f7fbff" stroke-opacity="0.28" stroke-width="5" stroke-linecap="round"/>
|
||||
|
||||
<!-- Neck -->
|
||||
<path d="M 716 430
|
||||
C 740 410 756 386 764 350
|
||||
C 772 314 760 294 734 296
|
||||
C 704 298 690 328 694 360
|
||||
C 698 392 708 414 716 430 Z"
|
||||
fill="url(#pelicanBodyGrad)" stroke="#8f9aa4" stroke-opacity="0.55" stroke-width="3"/>
|
||||
|
||||
<!-- Head -->
|
||||
<path d="M 722 308
|
||||
C 736 288 764 284 784 298
|
||||
C 804 312 806 340 790 358
|
||||
C 772 378 742 376 726 356
|
||||
C 712 338 710 324 722 308 Z"
|
||||
fill="url(#pelicanBodyGrad)" stroke="#8f9aa4" stroke-opacity="0.55" stroke-width="3"/>
|
||||
|
||||
<!-- Eye -->
|
||||
<circle cx="774" cy="328" r="8" fill="#182128"/>
|
||||
<circle cx="777" cy="325" r="3" fill="#ffffff" opacity="0.85"/>
|
||||
|
||||
<!-- Beak upper -->
|
||||
<path d="M 792 332
|
||||
C 858 314 930 320 998 340
|
||||
C 1022 348 1040 360 1048 370
|
||||
C 1038 380 1018 386 990 386
|
||||
C 918 386 850 374 794 356
|
||||
C 782 352 780 336 792 332 Z"
|
||||
fill="url(#beakGrad)" stroke="#8c5d1c" stroke-opacity="0.35" stroke-width="3"/>
|
||||
<!-- Beak highlight -->
|
||||
<path d="M 804 342
|
||||
C 870 326 935 334 996 352"
|
||||
fill="none" stroke="#fff7d1" stroke-opacity="0.28" stroke-width="6" stroke-linecap="round"/>
|
||||
|
||||
<!-- Pouch -->
|
||||
<path d="M 794 356
|
||||
C 850 382 910 398 978 400
|
||||
C 1010 402 1028 410 1038 424
|
||||
C 1020 448 988 460 952 458
|
||||
C 890 454 834 428 792 392
|
||||
C 770 374 772 362 794 356 Z"
|
||||
fill="url(#pouchGrad)" stroke="#a96a5f" stroke-opacity="0.35" stroke-width="3"/>
|
||||
<path d="M 812 386 C 866 422 916 440 966 440" fill="none" stroke="#ffffff" stroke-opacity="0.18" stroke-width="6" stroke-linecap="round"/>
|
||||
|
||||
<!-- Legs -->
|
||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M 670 614 C 686 640 706 650 728 650" stroke="#5a6470" stroke-width="10" opacity="0.85"/>
|
||||
<path d="M 640 612 C 648 638 660 664 684 680" stroke="#5a6470" stroke-width="10" opacity="0.85"/>
|
||||
</g>
|
||||
|
||||
<!-- Feet on pedals -->
|
||||
<path d="M 716 650 C 734 642 752 642 768 650 C 754 664 734 668 716 662 Z" fill="#2a2f35" opacity="0.9"/>
|
||||
<path d="M 666 678 C 682 668 702 670 714 682 C 700 694 682 698 666 692 Z" fill="#2a2f35" opacity="0.9"/>
|
||||
|
||||
<!-- Subtle feather texture lines -->
|
||||
<g fill="none" stroke="#7b8792" stroke-opacity="0.18" stroke-width="3" stroke-linecap="round">
|
||||
<path d="M 604 474 C 636 458 672 454 708 466"/>
|
||||
<path d="M 596 504 C 632 492 674 490 716 502"/>
|
||||
<path d="M 600 532 C 646 524 692 528 736 544"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Sand kick-up behind back wheel -->
|
||||
<g opacity="0.35" filter="url(#grain)">
|
||||
<path d="M 440 690
|
||||
C 420 680 405 662 410 646
|
||||
C 430 656 450 662 476 664
|
||||
C 458 676 448 684 440 690 Z" fill="#d7b287"/>
|
||||
<path d="M 460 710
|
||||
C 444 704 432 694 432 682
|
||||
C 450 686 468 690 492 690
|
||||
C 478 700 468 706 460 710 Z" fill="#caa076"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Edge vignette -->
|
||||
<rect x="0" y="0" width="1400" height="800" fill="#0b1420" opacity="0.18" mask="url(#vignette)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,276 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Pelican cycling along the seaside</title>
|
||||
<desc id="desc">A realistic and vivid pelican riding a bicycle on a coastal path at golden hour, with moving waves and soft atmospheric motion.</desc>
|
||||
<defs>
|
||||
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#73b9ec"/>
|
||||
<stop offset="34%" stop-color="#b8dcf8"/>
|
||||
<stop offset="62%" stop-color="#f6d7a5"/>
|
||||
<stop offset="100%" stop-color="#d98855"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="sunCore" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#fffde8"/>
|
||||
<stop offset="55%" stop-color="#ffe7a4"/>
|
||||
<stop offset="100%" stop-color="#ffb85d"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="sunAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#fff1c5" stop-opacity="0.75"/>
|
||||
<stop offset="70%" stop-color="#ffd792" stop-opacity="0.2"/>
|
||||
<stop offset="100%" stop-color="#ffd792" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="seaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#2e7fa7"/>
|
||||
<stop offset="45%" stop-color="#1f6187"/>
|
||||
<stop offset="100%" stop-color="#113e5f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="seaReflectGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fff5c2" stop-opacity="0.52"/>
|
||||
<stop offset="100%" stop-color="#fff5c2" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="foamGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#ffffff"/>
|
||||
<stop offset="100%" stop-color="#c6e9f1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sandGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#e5c28d"/>
|
||||
<stop offset="48%" stop-color="#cb955f"/>
|
||||
<stop offset="100%" stop-color="#97552f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wetSandGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#f4dab0" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#8f5330" stop-opacity="0.22"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="frameGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#92b6c8"/>
|
||||
<stop offset="58%" stop-color="#567387"/>
|
||||
<stop offset="100%" stop-color="#304a5e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="chromeGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#edf7fb"/>
|
||||
<stop offset="50%" stop-color="#a5bbc7"/>
|
||||
<stop offset="100%" stop-color="#607989"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="tireGrad" cx="50%" cy="45%" r="60%">
|
||||
<stop offset="0%" stop-color="#474c51"/>
|
||||
<stop offset="100%" stop-color="#171a1f"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="rimGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#f4f9fc"/>
|
||||
<stop offset="55%" stop-color="#b9cdd7"/>
|
||||
<stop offset="100%" stop-color="#748a98"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="hubGrad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#d5e6ee"/>
|
||||
<stop offset="100%" stop-color="#607885"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="spokeGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#f3fbff"/>
|
||||
<stop offset="100%" stop-color="#b3c9d4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bodyGrad" x1="0.15" y1="0.1" x2="0.85" y2="0.95">
|
||||
<stop offset="0%" stop-color="#fff9ee"/>
|
||||
<stop offset="55%" stop-color="#e6dfd2"/>
|
||||
<stop offset="100%" stop-color="#adb6bf"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wingGrad" x1="0.1" y1="0.1" x2="0.9" y2="0.95">
|
||||
<stop offset="0%" stop-color="#e2e4e8"/>
|
||||
<stop offset="65%" stop-color="#8f99a4"/>
|
||||
<stop offset="100%" stop-color="#4f5862"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="neckGrad" x1="0.2" y1="0.1" x2="0.9" y2="1">
|
||||
<stop offset="0%" stop-color="#f6ecd9"/>
|
||||
<stop offset="100%" stop-color="#9da6af"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="headGrad" x1="0.2" y1="0.1" x2="0.9" y2="0.95">
|
||||
<stop offset="0%" stop-color="#fbf3e5"/>
|
||||
<stop offset="62%" stop-color="#ddd4c6"/>
|
||||
<stop offset="100%" stop-color="#a7b0ba"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="beakGrad" x1="0.1" y1="0.2" x2="0.95" y2="0.8">
|
||||
<stop offset="0%" stop-color="#f7bb63"/>
|
||||
<stop offset="58%" stop-color="#de8b3d"/>
|
||||
<stop offset="100%" stop-color="#b6612a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="pouchGrad" x1="0.1" y1="0.2" x2="0.95" y2="0.8">
|
||||
<stop offset="0%" stop-color="#ffe5bb"/>
|
||||
<stop offset="58%" stop-color="#edc188"/>
|
||||
<stop offset="100%" stop-color="#cf9765"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="legGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#ec9e42"/>
|
||||
<stop offset="100%" stop-color="#a95a24"/>
|
||||
</linearGradient>
|
||||
<filter id="cloudBlur" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="7"/>
|
||||
</filter>
|
||||
<filter id="softBlur" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur stdDeviation="14"/>
|
||||
</filter>
|
||||
<filter id="subjectShadow" x="-30%" y="-30%" width="170%" height="180%">
|
||||
<feDropShadow dx="0" dy="18" stdDeviation="14" flood-color="#23323b" flood-opacity="0.28"/>
|
||||
</filter>
|
||||
<clipPath id="seaClip">
|
||||
<path d="M0 358 C216 336 421 361 634 346 C869 329 1110 360 1600 334 L1600 620 L0 620 Z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
<rect width="1600" height="900" fill="url(#skyGrad)"/>
|
||||
|
||||
<g opacity="0.62">
|
||||
<circle cx="1168" cy="174" r="92" fill="url(#sunCore)"/>
|
||||
<ellipse cx="1168" cy="174" rx="258" ry="146" fill="url(#sunAura)">
|
||||
<animate attributeName="opacity" values="0.54;0.72;0.54" dur="8s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
</g>
|
||||
|
||||
<g fill="#ffffff" opacity="0.34" filter="url(#cloudBlur)">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0;28 5;0 0" dur="30s" repeatCount="indefinite"/>
|
||||
<path d="M136 160 C170 116 226 108 274 130 C307 105 357 107 397 131 C448 126 496 152 507 194 C517 232 482 266 429 263 L201 263 C140 263 105 218 121 182 C126 171 132 163 136 160 Z"/>
|
||||
<path d="M1008 133 C1042 106 1090 100 1128 117 C1158 97 1199 96 1233 115 C1282 113 1328 137 1341 170 C1358 214 1327 252 1278 254 L1066 254 C1019 254 980 231 974 194 C970 168 980 146 1008 133 Z"/>
|
||||
<path d="M860 226 C887 194 929 187 966 204 C994 192 1031 194 1060 211 C1097 211 1133 232 1143 261 C1152 293 1126 322 1083 324 L922 324 C882 324 850 304 846 276 C844 252 848 235 860 226 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M0 370 C100 348 183 347 257 352 C338 357 432 365 526 359 C650 350 767 333 878 334 C1006 335 1124 352 1240 356 C1378 362 1497 343 1600 334 L1600 620 L0 620 Z" fill="url(#seaGrad)"/>
|
||||
<path d="M0 382 C146 354 293 373 442 356 C596 337 711 328 837 334 C959 340 1075 363 1214 364 C1374 365 1498 342 1600 332" fill="none" stroke="#f9eab7" stroke-opacity="0.2" stroke-width="6"/>
|
||||
|
||||
<g clip-path="url(#seaClip)">
|
||||
<rect x="880" y="208" width="348" height="470" fill="url(#seaReflectGrad)" opacity="0.36">
|
||||
<animate attributeName="opacity" values="0.24;0.42;0.24" dur="7s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<g stroke-linecap="round" fill="none" stroke="#d8f0fb" opacity="0.56">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="translate" values="-80 0;0 0;-80 0" dur="18s" repeatCount="indefinite"/>
|
||||
<path d="M-120 426 C-14 408 90 434 195 416 C302 398 392 427 496 412 C592 399 699 428 809 416 C910 405 1009 434 1116 417 C1224 399 1311 428 1421 411 C1514 398 1612 421 1718 407" stroke-width="4"/>
|
||||
<path d="M-94 470 C8 452 102 474 196 462 C304 447 389 478 488 468 C594 456 704 481 816 469 C916 459 1009 481 1113 470 C1215 459 1320 480 1424 470 C1512 463 1606 479 1708 470" stroke-width="3.2" stroke-opacity="0.82"/>
|
||||
<path d="M-70 512 C26 501 117 521 211 512 C317 500 409 526 512 519 C609 514 706 533 814 526 C922 520 1016 540 1124 531 C1234 521 1333 539 1435 529 C1532 521 1621 532 1712 525" stroke-width="2.8" stroke-opacity="0.66"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M0 595 C101 574 181 591 266 578 C366 564 454 607 554 588 C655 568 759 622 869 602 C952 587 1042 610 1131 600 C1231 589 1326 561 1431 570 C1490 575 1548 594 1600 591 L1600 664 L0 664 Z" fill="url(#foamGrad)" opacity="0.95"/>
|
||||
<path d="M0 608 C121 589 230 618 337 609 C434 600 515 636 617 631 C718 626 813 664 915 653 C1022 641 1125 671 1226 649 C1328 629 1446 616 1600 626 L1600 712 L0 712 Z" fill="url(#wetSandGrad)" opacity="0.62"/>
|
||||
<path d="M0 629 C180 593 345 644 523 627 C671 613 825 676 976 662 C1121 650 1239 618 1393 628 C1469 633 1537 649 1600 643 L1600 900 L0 900 Z" fill="url(#sandGrad)"/>
|
||||
<path d="M0 733 C220 708 414 756 637 747 C850 738 1060 698 1264 719 C1385 732 1494 748 1600 724 L1600 900 L0 900 Z" fill="#af673d" opacity="0.3"/>
|
||||
|
||||
<path d="M216 708 C271 694 335 708 415 739" fill="none" stroke="#8f5a38" stroke-width="4" stroke-opacity="0.34" stroke-linecap="round"/>
|
||||
<path d="M338 721 C391 709 454 724 535 758" fill="none" stroke="#8f5a38" stroke-width="4" stroke-opacity="0.28" stroke-linecap="round"/>
|
||||
<path d="M462 706 C526 689 598 699 688 731" fill="none" stroke="#8f5a38" stroke-width="4" stroke-opacity="0.22" stroke-linecap="round"/>
|
||||
|
||||
<ellipse cx="818" cy="726" rx="300" ry="48" fill="#65412d" opacity="0.26" filter="url(#softBlur)"/>
|
||||
|
||||
<g filter="url(#subjectShadow)">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0;0 -3;0 0" dur="3.6s" repeatCount="indefinite"/>
|
||||
<g id="bike" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="rearWheel">
|
||||
<circle cx="646" cy="650" r="120" fill="url(#tireGrad)" stroke="#161a1f" stroke-width="8"/>
|
||||
<circle cx="646" cy="650" r="97" fill="none" stroke="url(#rimGrad)" stroke-width="10"/>
|
||||
<circle cx="646" cy="650" r="79" fill="none" stroke="#dcedf7" stroke-width="2" stroke-opacity="0.35"/>
|
||||
<circle cx="646" cy="650" r="18" fill="url(#hubGrad)"/>
|
||||
<g stroke="url(#spokeGrad)" stroke-opacity="0.78" stroke-width="3" transform-origin="646px 650px">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0 646 650;360 646 650" dur="2.7s" repeatCount="indefinite"/>
|
||||
<line x1="646" y1="650" x2="646" y2="556"/>
|
||||
<line x1="646" y1="650" x2="712" y2="584"/>
|
||||
<line x1="646" y1="650" x2="740" y2="650"/>
|
||||
<line x1="646" y1="650" x2="712" y2="716"/>
|
||||
<line x1="646" y1="650" x2="646" y2="744"/>
|
||||
<line x1="646" y1="650" x2="580" y2="716"/>
|
||||
<line x1="646" y1="650" x2="552" y2="650"/>
|
||||
<line x1="646" y1="650" x2="580" y2="584"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="frontWheel">
|
||||
<circle cx="990" cy="646" r="122" fill="url(#tireGrad)" stroke="#161a1f" stroke-width="8"/>
|
||||
<circle cx="990" cy="646" r="99" fill="none" stroke="url(#rimGrad)" stroke-width="10"/>
|
||||
<circle cx="990" cy="646" r="81" fill="none" stroke="#dcedf7" stroke-width="2" stroke-opacity="0.35"/>
|
||||
<circle cx="990" cy="646" r="18" fill="url(#hubGrad)"/>
|
||||
<g stroke="url(#spokeGrad)" stroke-opacity="0.78" stroke-width="3" transform-origin="990px 646px">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0 990 646;360 990 646" dur="2.65s" repeatCount="indefinite"/>
|
||||
<line x1="990" y1="646" x2="990" y2="550"/>
|
||||
<line x1="990" y1="646" x2="1058" y2="578"/>
|
||||
<line x1="990" y1="646" x2="1086" y2="646"/>
|
||||
<line x1="990" y1="646" x2="1058" y2="714"/>
|
||||
<line x1="990" y1="646" x2="990" y2="742"/>
|
||||
<line x1="990" y1="646" x2="922" y2="714"/>
|
||||
<line x1="990" y1="646" x2="894" y2="646"/>
|
||||
<line x1="990" y1="646" x2="922" y2="578"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M646 650 L760 494 L945 508 L922 548 L782 622 L646 650" stroke="url(#frameGrad)" stroke-width="18"/>
|
||||
<path d="M760 494 L782 622" stroke="url(#frameGrad)" stroke-width="17"/>
|
||||
<path d="M922 548 L990 646" stroke="url(#frameGrad)" stroke-width="17"/>
|
||||
<path d="M760 494 L646 650" stroke="url(#frameGrad)" stroke-width="14"/>
|
||||
<path d="M782 622 L646 650" stroke="url(#frameGrad)" stroke-width="14"/>
|
||||
<path d="M945 508 L990 646" stroke="url(#chromeGrad)" stroke-width="12"/>
|
||||
<path d="M945 508 L1018 470" stroke="url(#chromeGrad)" stroke-width="12"/>
|
||||
<path d="M1002 472 C1020 464 1038 464 1048 474 C1057 482 1057 494 1048 501 C1036 512 1014 512 998 501" stroke="url(#chromeGrad)" stroke-width="10"/>
|
||||
<path d="M704 479 C734 468 768 468 800 478 C790 493 775 500 748 500 C724 500 710 492 704 479 Z" fill="#323a41" stroke="#20262b" stroke-width="3"/>
|
||||
<path d="M752 486 L760 494" stroke="#39434b" stroke-width="10"/>
|
||||
<path d="M1015 478 C986 489 956 518 931 567" stroke="#24313a" stroke-width="3" stroke-opacity="0.45"/>
|
||||
|
||||
<circle cx="782" cy="622" r="34" stroke="#6e8795" stroke-width="10"/>
|
||||
<circle cx="646" cy="650" r="25" stroke="#738997" stroke-width="8"/>
|
||||
<g transform-origin="782px 622px">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0 782 622;360 782 622" dur="2.9s" repeatCount="indefinite"/>
|
||||
<path d="M756 604 C725 600 694 607 662 628" stroke="#4a555f" stroke-width="6"/>
|
||||
<path d="M756 640 C724 646 693 645 662 639" stroke="#4a555f" stroke-width="6"/>
|
||||
<path d="M782 622 L756 602" stroke="#d2e2eb" stroke-width="7"/>
|
||||
<path d="M782 622 L808 642" stroke="#d2e2eb" stroke-width="7"/>
|
||||
<rect x="741" y="596" width="28" height="9" rx="4.5" fill="#495762" stroke="#dce9f0" stroke-width="2"/>
|
||||
<rect x="795" y="637" width="28" height="9" rx="4.5" fill="#495762" stroke="#dce9f0" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="pelican">
|
||||
<path d="M646 548 C605 532 568 539 540 563 C560 592 604 616 651 617 C672 618 688 611 695 598 C676 583 660 566 646 548 Z" fill="#808a95" opacity="0.62"/>
|
||||
<path d="M664 518 C671 462 699 422 746 399 C796 376 864 371 924 388 C985 406 1032 452 1043 508 C1054 563 1030 617 975 650 C924 681 852 689 779 678 C713 667 664 632 647 583 C641 563 642 539 664 518 Z" fill="url(#bodyGrad)"/>
|
||||
<path d="M693 516 C710 455 768 418 832 419 C896 420 950 454 972 501 C988 536 980 579 946 609 C909 641 852 653 789 647 C742 642 707 621 685 589 C736 583 792 564 846 528 C893 496 919 468 920 447 C876 445 821 465 765 501 C737 520 712 526 693 516 Z" fill="url(#wingGrad)"/>
|
||||
<path d="M684 590 C733 585 786 566 841 532 C887 503 918 473 938 448 C960 459 973 479 977 502 C953 544 917 581 870 610 C818 641 752 654 701 639 C688 634 682 624 684 590 Z" fill="#3f4a54" opacity="0.86"/>
|
||||
<path d="M896 456 C916 406 944 369 983 337 C1008 317 1031 304 1049 299 C1042 329 1048 357 1066 383 C1026 402 988 439 949 491 C935 510 914 516 896 506 C884 499 882 478 896 456 Z" fill="url(#neckGrad)"/>
|
||||
<path d="M936 491 C955 444 992 404 1046 374 C1063 364 1079 359 1091 359 C1088 388 1078 412 1065 437 C1033 486 997 531 959 561 C941 575 920 577 904 563 C891 552 892 531 908 518 C919 510 928 502 936 491 Z" fill="#d8c5a8" opacity="0.72"/>
|
||||
<path d="M1034 289 C1068 281 1102 294 1125 320 C1147 348 1150 386 1134 414 C1115 444 1082 460 1046 455 C1009 451 981 428 972 394 C963 360 972 327 993 306 C1005 296 1018 290 1034 289 Z" fill="url(#headGrad)"/>
|
||||
<path d="M1095 339 C1162 312 1236 307 1312 322 C1342 328 1362 340 1364 355 C1366 370 1354 383 1330 388 C1266 400 1199 403 1121 396 Z" fill="url(#beakGrad)"/>
|
||||
<path d="M1093 384 C1165 391 1237 393 1307 387 C1328 386 1341 393 1346 408 C1351 430 1336 450 1303 465 C1250 488 1186 502 1113 506 C1048 510 996 496 971 469 C953 448 951 424 966 405 C991 382 1034 374 1093 384 Z" fill="url(#pouchGrad)" opacity="0.97"/>
|
||||
<path d="M1104 349 C1171 336 1234 339 1284 355" fill="none" stroke="#fff0cf" stroke-width="4" stroke-linecap="round" stroke-opacity="0.54"/>
|
||||
<circle cx="1050" cy="352" r="7.3" fill="#fffdf8"/>
|
||||
<circle cx="1051" cy="352" r="3.4" fill="#1f1d1c"/>
|
||||
<path d="M1038 341 C1047 335 1058 334 1068 338" fill="none" stroke="#7d746a" stroke-width="2.8" stroke-linecap="round"/>
|
||||
<ellipse cx="1148" cy="412" rx="114" ry="22" fill="#fff7ea" opacity="0.18"/>
|
||||
<path d="M792 581 C785 589 775 596 764 602 C758 605 754 613 754 621 C752 632 752 641 753 649" fill="none" stroke="url(#legGrad)" stroke-width="11" stroke-linecap="round"/>
|
||||
<path d="M828 578 C835 589 841 601 844 613 C848 624 850 635 851 645" fill="none" stroke="url(#legGrad)" stroke-width="11" stroke-linecap="round"/>
|
||||
<path d="M748 619 C758 613 768 613 778 619 C774 627 766 633 755 636 C746 635 742 628 748 619 Z" fill="url(#legGrad)"/>
|
||||
<path d="M843 647 C852 640 863 639 873 646 C868 653 859 658 847 660 C839 658 836 652 843 647 Z" fill="url(#legGrad)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g opacity="0.44" stroke-linecap="round">
|
||||
<path d="M1295 762 C1300 736 1307 719 1317 708 C1322 701 1328 696 1334 698 C1341 701 1343 710 1341 723 C1337 742 1330 757 1322 770" fill="none" stroke="#5e7c53" stroke-width="4"/>
|
||||
<path d="M1325 768 C1333 740 1348 723 1365 713 C1373 709 1381 709 1385 716 C1388 724 1385 735 1374 748 C1360 766 1345 777 1336 782" fill="none" stroke="#537049" stroke-width="4"/>
|
||||
<path d="M240 774 C250 749 263 731 280 720 C288 715 297 715 301 721 C307 730 304 744 293 757 C278 775 266 785 254 792" fill="none" stroke="#68885c" stroke-width="3.6"/>
|
||||
<path d="M264 782 C274 755 289 736 309 726 C316 722 325 721 330 727 C335 734 332 746 321 758 C305 776 290 789 275 798" fill="none" stroke="#516f47" stroke-width="3.6"/>
|
||||
</g>
|
||||
|
||||
<g opacity="0.42">
|
||||
<g fill="#e9f8ff">
|
||||
<ellipse cx="579" cy="672" rx="3.2" ry="1.6"/>
|
||||
<ellipse cx="601" cy="664" rx="2.8" ry="1.4"/>
|
||||
<ellipse cx="1024" cy="662" rx="3" ry="1.5"/>
|
||||
<ellipse cx="1043" cy="670" rx="2.6" ry="1.3"/>
|
||||
</g>
|
||||
<g fill="none" stroke="#effbff" stroke-linecap="round">
|
||||
<path d="M570 680 C578 674 590 674 600 680" stroke-width="2" stroke-opacity="0.52">
|
||||
<animate attributeName="d" values="M570 680 C578 674 590 674 600 680;M570 680 C579 672 591 672 600 680;M570 680 C578 674 590 674 600 680" dur="2.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M1014 672 C1024 666 1037 666 1048 672" stroke-width="2" stroke-opacity="0.5">
|
||||
<animate attributeName="d" values="M1014 672 C1024 666 1037 666 1048 672;M1014 672 C1025 664 1038 664 1048 672;M1014 672 C1024 666 1037 666 1048 672" dur="2.4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M0 691 C74 673 168 699 281 719 C394 740 524 747 655 736 C795 724 934 689 1078 692 C1242 696 1397 744 1600 719" fill="none" stroke="#ffffff" stroke-opacity="0.08" stroke-width="12"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,276 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Pelican riding a bicycle by the sea</title>
|
||||
<desc id="desc">A vivid seaside illustration of a realistic pelican riding a bicycle along a glowing beach at sunset.</desc>
|
||||
<defs>
|
||||
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#8fd6ff"/>
|
||||
<stop offset="42%" stop-color="#d7efff"/>
|
||||
<stop offset="72%" stop-color="#fde8bf"/>
|
||||
<stop offset="100%" stop-color="#f7b772"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="sunCore" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#fffce8"/>
|
||||
<stop offset="45%" stop-color="#ffe7a0"/>
|
||||
<stop offset="100%" stop-color="#ffb348"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="sunHalo" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#fff4cc" stop-opacity="0.9"/>
|
||||
<stop offset="65%" stop-color="#ffd38f" stop-opacity="0.28"/>
|
||||
<stop offset="100%" stop-color="#ffd38f" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="seaGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#2d7aa0"/>
|
||||
<stop offset="48%" stop-color="#1d6288"/>
|
||||
<stop offset="100%" stop-color="#0f4669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="waterGlow" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fff7c8" stop-opacity="0.65"/>
|
||||
<stop offset="100%" stop-color="#fff7c8" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="foamGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#ffffff"/>
|
||||
<stop offset="100%" stop-color="#bfe6ef"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sandGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#e9c895"/>
|
||||
<stop offset="42%" stop-color="#dfb07a"/>
|
||||
<stop offset="100%" stop-color="#be7846"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wetSandGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#f2d6ac" stop-opacity="0.82"/>
|
||||
<stop offset="100%" stop-color="#9e633e" stop-opacity="0.2"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="framePaint" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#96bfce"/>
|
||||
<stop offset="55%" stop-color="#5f7f91"/>
|
||||
<stop offset="100%" stop-color="#365162"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="chromeStroke" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#eef7fb"/>
|
||||
<stop offset="40%" stop-color="#a6bac4"/>
|
||||
<stop offset="100%" stop-color="#5d7684"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="tireFill" cx="50%" cy="45%" r="60%">
|
||||
<stop offset="0%" stop-color="#484c50"/>
|
||||
<stop offset="100%" stop-color="#191d21"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="rimFill" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#f1f7fb"/>
|
||||
<stop offset="50%" stop-color="#c5d6de"/>
|
||||
<stop offset="100%" stop-color="#7a909d"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="hubFill" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#cadce4"/>
|
||||
<stop offset="100%" stop-color="#6c8490"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="bodyGradient" x1="0.15" y1="0.1" x2="0.85" y2="0.95">
|
||||
<stop offset="0%" stop-color="#fff8ee"/>
|
||||
<stop offset="48%" stop-color="#e9e2d5"/>
|
||||
<stop offset="100%" stop-color="#b7c0c9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bodyHighlight" x1="0.2" y1="0.2" x2="0.9" y2="1">
|
||||
<stop offset="0%" stop-color="#fffefc"/>
|
||||
<stop offset="100%" stop-color="#f2eadf" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wingGradient" x1="0.1" y1="0.1" x2="0.9" y2="0.95">
|
||||
<stop offset="0%" stop-color="#e4e6ea"/>
|
||||
<stop offset="65%" stop-color="#9aa3ad"/>
|
||||
<stop offset="100%" stop-color="#525d69"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wingTipGradient" x1="0.1" y1="0.1" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#77818d"/>
|
||||
<stop offset="100%" stop-color="#28303a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="neckBackGradient" x1="0.15" y1="0.1" x2="0.85" y2="1">
|
||||
<stop offset="0%" stop-color="#faf4e8"/>
|
||||
<stop offset="100%" stop-color="#959fa9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="neckFrontGradient" x1="0.15" y1="0.1" x2="0.85" y2="1">
|
||||
<stop offset="0%" stop-color="#efddbf"/>
|
||||
<stop offset="100%" stop-color="#a8a7a5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="headGradient" x1="0.2" y1="0.1" x2="0.9" y2="0.95">
|
||||
<stop offset="0%" stop-color="#faf3e7"/>
|
||||
<stop offset="62%" stop-color="#ddd6ca"/>
|
||||
<stop offset="100%" stop-color="#a6b0ba"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="crestGradient" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#d8c297"/>
|
||||
<stop offset="100%" stop-color="#8e7b58"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="beakGradient" x1="0.1" y1="0.2" x2="0.95" y2="0.8">
|
||||
<stop offset="0%" stop-color="#f8bd64"/>
|
||||
<stop offset="55%" stop-color="#e6903f"/>
|
||||
<stop offset="100%" stop-color="#bf6327"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="pouchGradient" x1="0.15" y1="0.2" x2="1" y2="0.8">
|
||||
<stop offset="0%" stop-color="#ffe3b8"/>
|
||||
<stop offset="55%" stop-color="#efc690"/>
|
||||
<stop offset="100%" stop-color="#d79f6f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="legGradient" x1="0" y1="0" x2="0.95" y2="1">
|
||||
<stop offset="0%" stop-color="#f0a044"/>
|
||||
<stop offset="100%" stop-color="#af5f24"/>
|
||||
</linearGradient>
|
||||
<filter id="cloudBlur" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="8"/>
|
||||
</filter>
|
||||
<filter id="softBlur" x="-20%" y="-20%" width="140%" height="160%">
|
||||
<feGaussianBlur stdDeviation="18"/>
|
||||
</filter>
|
||||
<filter id="subjectShadow" x="-20%" y="-20%" width="140%" height="160%">
|
||||
<feDropShadow dx="0" dy="20" stdDeviation="16" flood-color="#28353c" flood-opacity="0.28"/>
|
||||
</filter>
|
||||
<clipPath id="seaClip">
|
||||
<path d="M0 350 C235 330 460 350 692 341 C955 330 1230 356 1600 334 L1600 612 L0 612 Z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
<rect width="1600" height="900" fill="url(#skyGradient)"/>
|
||||
|
||||
<g opacity="0.6">
|
||||
<circle cx="1185" cy="170" r="88" fill="url(#sunCore)"/>
|
||||
<ellipse cx="1185" cy="170" rx="250" ry="140" fill="url(#sunHalo)"/>
|
||||
</g>
|
||||
|
||||
<g fill="#ffffff" opacity="0.38" filter="url(#cloudBlur)">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0;24 6;0 0" dur="28s" repeatCount="indefinite"/>
|
||||
<path d="M150 156 C186 114 240 108 287 129 C319 102 372 104 410 130 C459 124 508 149 519 191 C530 231 491 267 435 263 L210 263 C148 263 112 217 128 181 C133 170 141 161 150 156 Z"/>
|
||||
<path d="M1050 130 C1085 102 1135 98 1172 117 C1201 97 1241 97 1274 114 C1323 112 1369 137 1382 171 C1398 213 1367 251 1317 254 L1111 254 C1064 254 1025 230 1018 192 C1014 167 1024 145 1050 130 Z"/>
|
||||
<path d="M900 218 C925 192 965 187 1000 204 C1029 192 1067 194 1094 211 C1133 211 1168 232 1176 262 C1185 293 1160 322 1116 324 L958 324 C919 324 887 303 883 275 C880 252 884 235 900 218 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M0 367 C80 348 170 344 247 349 C332 355 430 366 524 360 C649 351 767 334 878 335 C1005 336 1121 353 1236 356 C1378 361 1496 343 1600 334 L1600 612 L0 612 Z" fill="url(#seaGradient)"/>
|
||||
<path d="M0 380 C153 353 293 371 447 354 C598 336 714 327 839 334 C958 341 1073 363 1211 364 C1372 365 1497 341 1600 332" fill="none" stroke="#f9eec0" stroke-opacity="0.18" stroke-width="6"/>
|
||||
|
||||
<g clip-path="url(#seaClip)">
|
||||
<rect x="880" y="210" width="340" height="450" fill="url(#waterGlow)" opacity="0.36">
|
||||
<animate attributeName="opacity" values="0.26;0.42;0.26" dur="7s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<g opacity="0.55" stroke="#d8f0fb" fill="none" stroke-linecap="round">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="translate" values="-75 0;0 0;-75 0" dur="18s" repeatCount="indefinite"/>
|
||||
<path d="M-120 428 C-14 409 91 434 194 416 C301 398 392 427 494 413 C593 399 699 429 808 417 C912 405 1010 434 1116 417 C1225 399 1312 428 1421 412 C1515 398 1611 421 1718 408" stroke-width="4"/>
|
||||
<path d="M-90 470 C9 452 101 474 196 462 C304 448 389 478 487 468 C595 456 704 482 815 470 C917 459 1008 481 1112 470 C1216 458 1319 480 1424 470 C1510 462 1605 479 1708 470" stroke-width="3.2" stroke-opacity="0.8"/>
|
||||
<path d="M-70 514 C26 502 116 521 210 512 C316 501 409 526 511 520 C609 514 706 533 813 527 C923 520 1015 540 1123 531 C1234 522 1333 539 1434 530 C1534 521 1621 532 1712 525" stroke-width="2.8" stroke-opacity="0.65"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M0 594 C102 574 182 591 266 579 C365 565 453 607 552 588 C656 568 758 622 867 602 C953 587 1041 610 1129 600 C1230 589 1326 561 1430 570 C1490 575 1547 595 1600 591 L1600 663 L0 663 Z" fill="url(#foamGradient)" opacity="0.95"/>
|
||||
<path d="M0 607 C121 589 231 618 338 609 C434 600 516 637 616 631 C718 626 812 664 913 653 C1022 641 1124 671 1225 649 C1328 628 1445 616 1600 626 L1600 710 L0 710 Z" fill="url(#wetSandGradient)" opacity="0.6"/>
|
||||
<path d="M0 628 C181 592 345 644 523 627 C671 613 824 676 974 663 C1120 651 1238 618 1391 628 C1468 633 1537 649 1600 643 L1600 900 L0 900 Z" fill="url(#sandGradient)"/>
|
||||
<path d="M0 731 C222 708 414 756 636 747 C849 738 1059 698 1262 719 C1383 732 1493 749 1600 724 L1600 900 L0 900 Z" fill="#b76f42" opacity="0.28"/>
|
||||
<path d="M204 706 C258 694 322 708 402 739" fill="none" stroke="#99613b" stroke-width="4" stroke-opacity="0.35" stroke-linecap="round"/>
|
||||
<path d="M332 720 C386 708 448 724 530 758" fill="none" stroke="#99613b" stroke-width="4" stroke-opacity="0.28" stroke-linecap="round"/>
|
||||
<path d="M455 704 C520 688 591 698 684 731" fill="none" stroke="#99613b" stroke-width="4" stroke-opacity="0.22" stroke-linecap="round"/>
|
||||
|
||||
<ellipse cx="812" cy="724" rx="286" ry="46" fill="#6c442e" opacity="0.24" filter="url(#softBlur)"/>
|
||||
|
||||
<g filter="url(#subjectShadow)">
|
||||
<g id="bike" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g>
|
||||
<circle cx="650" cy="650" r="118" fill="url(#tireFill)" stroke="#161a1e" stroke-width="8"/>
|
||||
<circle cx="650" cy="650" r="95" fill="none" stroke="url(#rimFill)" stroke-width="10"/>
|
||||
<circle cx="650" cy="650" r="77" fill="none" stroke="#dcebfa" stroke-width="2" stroke-opacity="0.35"/>
|
||||
<circle cx="650" cy="650" r="18" fill="url(#hubFill)"/>
|
||||
<g stroke="#e9f4fb" stroke-opacity="0.72" stroke-width="3">
|
||||
<line x1="650" y1="650" x2="650" y2="556"/>
|
||||
<line x1="650" y1="650" x2="716" y2="584"/>
|
||||
<line x1="650" y1="650" x2="744" y2="650"/>
|
||||
<line x1="650" y1="650" x2="716" y2="716"/>
|
||||
<line x1="650" y1="650" x2="650" y2="744"/>
|
||||
<line x1="650" y1="650" x2="584" y2="716"/>
|
||||
<line x1="650" y1="650" x2="556" y2="650"/>
|
||||
<line x1="650" y1="650" x2="584" y2="584"/>
|
||||
<line x1="650" y1="650" x2="700" y2="570"/>
|
||||
<line x1="650" y1="650" x2="730" y2="600"/>
|
||||
<line x1="650" y1="650" x2="730" y2="700"/>
|
||||
<line x1="650" y1="650" x2="700" y2="730"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="985" cy="645" r="122" fill="url(#tireFill)" stroke="#161a1e" stroke-width="8"/>
|
||||
<circle cx="985" cy="645" r="98" fill="none" stroke="url(#rimFill)" stroke-width="10"/>
|
||||
<circle cx="985" cy="645" r="80" fill="none" stroke="#dcebfa" stroke-width="2" stroke-opacity="0.35"/>
|
||||
<circle cx="985" cy="645" r="18" fill="url(#hubFill)"/>
|
||||
<g stroke="#e9f4fb" stroke-opacity="0.72" stroke-width="3">
|
||||
<line x1="985" y1="645" x2="985" y2="548"/>
|
||||
<line x1="985" y1="645" x2="1054" y2="576"/>
|
||||
<line x1="985" y1="645" x2="1082" y2="645"/>
|
||||
<line x1="985" y1="645" x2="1054" y2="714"/>
|
||||
<line x1="985" y1="645" x2="985" y2="742"/>
|
||||
<line x1="985" y1="645" x2="916" y2="714"/>
|
||||
<line x1="985" y1="645" x2="888" y2="645"/>
|
||||
<line x1="985" y1="645" x2="916" y2="576"/>
|
||||
<line x1="985" y1="645" x2="1036" y2="563"/>
|
||||
<line x1="985" y1="645" x2="1068" y2="595"/>
|
||||
<line x1="985" y1="645" x2="1068" y2="695"/>
|
||||
<line x1="985" y1="645" x2="1036" y2="727"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M650 650 L760 495 L943 507 L920 548 L782 622 L650 650" stroke="url(#framePaint)" stroke-width="18"/>
|
||||
<path d="M760 495 L782 622" stroke="url(#framePaint)" stroke-width="17"/>
|
||||
<path d="M920 548 L985 645" stroke="url(#framePaint)" stroke-width="17"/>
|
||||
<path d="M760 495 L650 650" stroke="url(#framePaint)" stroke-width="14"/>
|
||||
<path d="M782 622 L650 650" stroke="url(#framePaint)" stroke-width="14"/>
|
||||
<path d="M943 507 L985 645" stroke="url(#chromeStroke)" stroke-width="12"/>
|
||||
<path d="M754 486 L760 495" stroke="#3d474f" stroke-width="10"/>
|
||||
<path d="M706 478 C735 468 768 468 798 478 C789 492 774 499 748 499 C725 499 712 491 706 478 Z" fill="#333a42" stroke="#20262b" stroke-width="3"/>
|
||||
<path d="M943 507 L1016 470" stroke="url(#chromeStroke)" stroke-width="12"/>
|
||||
<path d="M1000 471 C1018 463 1036 464 1046 474 C1054 482 1054 493 1046 500 C1034 511 1012 511 995 500" stroke="url(#chromeStroke)" stroke-width="10"/>
|
||||
<path d="M1013 478 C983 490 955 518 931 565" stroke="#23313a" stroke-width="3" stroke-opacity="0.45"/>
|
||||
|
||||
<circle cx="782" cy="622" r="34" stroke="#6d8695" stroke-width="10"/>
|
||||
<circle cx="650" cy="650" r="25" stroke="#738896" stroke-width="8"/>
|
||||
<path d="M755 606 C725 603 696 609 665 628" stroke="#4a555f" stroke-width="6"/>
|
||||
<path d="M755 638 C724 645 694 644 664 639" stroke="#4a555f" stroke-width="6"/>
|
||||
<path d="M782 622 L754 602" stroke="#cddde7" stroke-width="7"/>
|
||||
<path d="M782 622 L810 642" stroke="#cddde7" stroke-width="7"/>
|
||||
<rect x="739" y="596" width="28" height="9" rx="4.5" fill="#4b5862" stroke="#dce8f0" stroke-width="2"/>
|
||||
<rect x="797" y="637" width="28" height="9" rx="4.5" fill="#4b5862" stroke="#dce8f0" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<g id="pelican">
|
||||
<path d="M643 548 C603 532 567 539 538 562 C559 590 603 614 650 616 C672 617 687 610 694 598 C674 583 658 566 643 548 Z" fill="#808993" opacity="0.6"/>
|
||||
|
||||
<path d="M659 517 C666 462 694 421 742 399 C792 376 861 371 921 388 C983 406 1030 451 1041 507 C1052 563 1027 617 972 650 C921 681 850 688 776 677 C710 666 660 631 644 582 C638 562 638 538 659 517 Z" fill="url(#bodyGradient)"/>
|
||||
<path d="M716 528 C741 485 794 458 854 454 C920 450 976 478 998 527 C1009 552 1004 581 987 607 C945 633 857 637 778 606 C740 591 714 567 706 539 C728 545 757 548 792 544 C852 538 906 516 940 487 C877 474 790 489 716 528 Z" fill="url(#bodyHighlight)" opacity="0.72"/>
|
||||
<path d="M689 514 C707 454 767 417 830 418 C894 420 949 453 970 501 C986 536 978 578 944 608 C907 641 849 652 787 646 C739 641 705 621 682 589 C734 583 789 564 844 527 C892 495 918 467 918 446 C874 445 818 464 763 500 C734 519 710 525 689 514 Z" fill="url(#wingGradient)"/>
|
||||
<path d="M681 590 C731 585 784 566 839 532 C885 503 917 472 936 448 C958 458 972 478 975 502 C951 543 915 580 868 609 C815 641 750 653 699 639 C687 634 680 624 681 590 Z" fill="url(#wingTipGradient)" opacity="0.92"/>
|
||||
<path d="M834 508 C882 492 928 490 968 502 C997 511 1017 523 1031 523 C1044 523 1056 515 1064 503 C1074 488 1087 483 1100 488 C1111 492 1117 503 1115 516 C1111 536 1098 548 1080 553 C1049 563 1013 558 972 542 C930 525 882 519 834 531 Z" fill="#cdd3d8" opacity="0.9"/>
|
||||
|
||||
<path d="M891 456 C912 406 940 368 980 336 C1004 317 1028 304 1047 298 C1039 328 1045 356 1063 383 C1023 401 985 438 946 491 C932 509 911 515 893 505 C880 498 878 477 891 456 Z" fill="url(#neckBackGradient)"/>
|
||||
<path d="M931 491 C950 444 988 404 1041 374 C1059 364 1075 359 1088 359 C1084 387 1075 411 1061 436 C1029 486 993 530 956 560 C937 575 916 576 900 562 C888 551 888 531 904 518 C915 509 924 501 931 491 Z" fill="url(#neckFrontGradient)"/>
|
||||
|
||||
<path d="M1032 288 C1066 281 1100 294 1123 320 C1145 347 1148 386 1131 414 C1112 444 1079 459 1043 455 C1006 450 978 427 969 393 C960 360 969 326 991 306 C1002 296 1016 290 1032 288 Z" fill="url(#headGradient)"/>
|
||||
<path d="M987 309 C974 280 982 252 1010 239 C1035 227 1060 229 1079 241 C1054 254 1035 273 1022 299 C1011 291 999 294 987 309 Z" fill="url(#crestGradient)" opacity="0.85"/>
|
||||
<path d="M1092 338 C1159 311 1233 306 1309 321 C1340 327 1359 339 1362 354 C1364 370 1351 382 1328 387 C1264 399 1197 402 1118 395 Z" fill="url(#beakGradient)"/>
|
||||
<path d="M1090 383 C1163 391 1234 392 1304 386 C1325 385 1339 392 1343 407 C1349 430 1334 450 1300 464 C1247 487 1183 501 1110 505 C1045 509 993 495 968 468 C950 447 948 423 964 404 C987 381 1031 373 1090 383 Z" fill="url(#pouchGradient)" opacity="0.96"/>
|
||||
<path d="M1101 348 C1168 335 1231 338 1282 354" fill="none" stroke="#fff0cf" stroke-width="4" stroke-linecap="round" stroke-opacity="0.52"/>
|
||||
<circle cx="1048" cy="352" r="7.5" fill="#fffdf8"/>
|
||||
<circle cx="1049" cy="352" r="3.5" fill="#211e1d"/>
|
||||
<path d="M1036 341 C1045 335 1056 334 1066 338" fill="none" stroke="#7f766b" stroke-width="2.8" stroke-linecap="round"/>
|
||||
<ellipse cx="1146" cy="411" rx="112" ry="22" fill="#fff7ea" opacity="0.18"/>
|
||||
<circle cx="1172" cy="349" r="5" fill="#8f4e23" opacity="0.55"/>
|
||||
|
||||
<path d="M788 581 C781 589 771 595 760 601 C754 604 751 612 750 620 C748 631 748 640 749 648" fill="none" stroke="url(#legGradient)" stroke-width="11" stroke-linecap="round"/>
|
||||
<path d="M825 578 C832 589 838 601 841 613 C844 623 846 634 847 644" fill="none" stroke="url(#legGradient)" stroke-width="11" stroke-linecap="round"/>
|
||||
<path d="M744 618 C754 612 764 612 774 618 C770 626 762 632 751 635 C742 634 738 628 744 618 Z" fill="url(#legGradient)"/>
|
||||
<path d="M839 646 C848 639 859 638 869 645 C864 652 855 657 843 659 C835 657 832 651 839 646 Z" fill="url(#legGradient)"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g opacity="0.46" stroke-linecap="round">
|
||||
<path d="M1293 760 C1298 734 1305 717 1315 706 C1320 699 1327 694 1332 696 C1339 699 1342 709 1339 721 C1335 740 1328 755 1320 768" fill="none" stroke="#67865b" stroke-width="4"/>
|
||||
<path d="M1322 766 C1331 739 1345 721 1362 712 C1370 708 1378 709 1381 715 C1385 723 1382 734 1371 746 C1356 764 1342 775 1333 780" fill="none" stroke="#5c794f" stroke-width="4"/>
|
||||
<path d="M1347 772 C1362 742 1380 721 1403 705 C1412 699 1422 699 1427 705 C1434 714 1430 727 1415 742 C1393 764 1371 781 1356 789" fill="none" stroke="#6d8d60" stroke-width="4"/>
|
||||
<path d="M239 772 C249 747 261 730 278 719 C286 714 295 714 299 720 C305 729 303 742 292 755 C277 773 264 783 252 790" fill="none" stroke="#6b8a5c" stroke-width="3.6"/>
|
||||
<path d="M262 780 C272 753 287 734 307 724 C314 720 323 719 328 725 C333 733 330 744 319 756 C303 774 287 787 272 796" fill="none" stroke="#58734d" stroke-width="3.6"/>
|
||||
</g>
|
||||
|
||||
<path d="M0 690 C73 672 167 699 280 719 C394 740 523 747 653 736 C794 724 932 689 1075 692 C1240 696 1395 744 1600 719" fill="none" stroke="#ffffff" stroke-opacity="0.08" stroke-width="12"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
@@ -0,0 +1,540 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>神话工艺 · MythosCraft</title>
|
||||
<style>
|
||||
body{margin:0;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;background:#000;color:#fff}
|
||||
#ui{position:absolute;inset:0;pointer-events:none;z-index:10}
|
||||
#crosshair{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,0.8);border-radius:50%}
|
||||
#crosshair::before,#crosshair::after{content:'';position:absolute;background:rgba(255,255,255,0.8)}
|
||||
#crosshair::before{left:50%;top:4px;bottom:4px;width:2px;transform:translateX(-50%)}
|
||||
#crosshair::after{top:50%;left:4px;right:4px;height:2px;transform:translateY(-50%)}
|
||||
#hotbar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:4px;pointer-events:auto}
|
||||
.slot{width:48px;height:48px;background:rgba(0,0,0,0.6);border:3px solid #555;border-radius:4px;position:relative;cursor:pointer}
|
||||
.slot.active{border-color:#fff}
|
||||
.slot .icon{width:100%;height:100%;image-rendering:pixelated}
|
||||
#info{position:absolute;top:20px;left:20px;background:rgba(0,0,0,0.5);padding:12px 16px;border-radius:8px;font-size:13px;line-height:1.5}
|
||||
#info kbd{background:#333;padding:1px 6px;border-radius:3px;font-size:11px}
|
||||
#legend{position:absolute;top:20px;right:20px;background:rgba(0,0,0,0.5);padding:12px 16px;border-radius:8px;font-size:12px}
|
||||
#legend div{display:flex;align-items:center;gap:8px;margin:4px 0}
|
||||
#legend .swatch{width:14px;height:14px;border:1px solid #666}
|
||||
#msg{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);padding:6px 14px;border-radius:4px;font-size:13px;opacity:0;transition:opacity .2s}
|
||||
canvas{display:block}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="ui">
|
||||
<div id="crosshair"></div>
|
||||
<div id="hotbar"></div>
|
||||
<div id="info">
|
||||
<b>神话工艺 MythosCraft</b><br>
|
||||
<kbd>WASD</kbd> 移动 <kbd>空格</kbd> 跳跃 <kbd>鼠标</kbd> 环视<br>
|
||||
<kbd>左键</kbd> 破坏 <kbd>右键</kbd> 放置 <kbd>1-9</kbd> 选择方块<br>
|
||||
<kbd>点击画布</kbd> 开始游戏
|
||||
</div>
|
||||
<div id="legend">
|
||||
<div><div class="swatch" style="background:#5d4037"></div>泥土 Dirt</div>
|
||||
<div><div class="swatch" style="background:#4caf50"></div>草地 Grass</div>
|
||||
<div><div class="swatch" style="background:#607d8b"></div>石头 Stone</div>
|
||||
<div><div class="swatch" style="background:#8d6e63"></div>橡木 Oak</div>
|
||||
<div><div class="swatch" style="background:#81c784"></div>叶片 Leaves</div>
|
||||
<div><div class="swatch" style="background:#7b1fa2"></div>晶石 Crystal</div>
|
||||
<div><div class="swatch" style="background:#e91e63"></div>魔能 Mana</div>
|
||||
</div>
|
||||
<div id="msg"></div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<script>
|
||||
// Perlin Noise Implementation (improved)
|
||||
class Perlin {
|
||||
constructor(seed = 42) {
|
||||
this.p = new Array(512);
|
||||
const perm = [];
|
||||
for (let i = 0; i < 256; i++) perm[i] = i;
|
||||
for (let i = 255; i > 0; i--) {
|
||||
const j = Math.floor((seed * 16807 + i * 48271) % (i + 1));
|
||||
[perm[i], perm[j]] = [perm[j], perm[i]];
|
||||
}
|
||||
for (let i = 0; i < 512; i++) this.p[i] = perm[i % 256];
|
||||
}
|
||||
fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
|
||||
lerp(t, a, b) { return a + t * (b - a); }
|
||||
grad(hash, x, y, z) {
|
||||
const h = hash & 15;
|
||||
const u = h < 8 ? x : y;
|
||||
const v = h < 4 ? y : h === 12 || h === 14 ? x : z;
|
||||
return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
|
||||
}
|
||||
noise(x, y, z) {
|
||||
const X = Math.floor(x) & 255, Y = Math.floor(y) & 255, Z = Math.floor(z) & 255;
|
||||
x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
|
||||
const u = this.fade(x), v = this.fade(y), w = this.fade(z);
|
||||
const A = this.p[X] + Y, AA = this.p[A] + Z, AB = this.p[A + 1] + Z;
|
||||
const B = this.p[X + 1] + Y, BA = this.p[B] + Z, BB = this.p[B + 1] + Z;
|
||||
return this.lerp(w,
|
||||
this.lerp(v, this.lerp(u, this.grad(this.p[AA], x, y, z), this.grad(this.p[BA], x - 1, y, z)),
|
||||
this.lerp(u, this.grad(this.p[AB], x, y - 1, z), this.grad(this.p[BB], x - 1, y - 1, z))),
|
||||
this.lerp(v, this.lerp(u, this.grad(this.p[AA + 1], x, y, z - 1), this.grad(this.p[BA + 1], x - 1, y, z - 1)),
|
||||
this.lerp(u, this.grad(this.p[AB + 1], x, y - 1, z - 1), this.grad(this.p[BB + 1], x - 1, y - 1, z - 1))));
|
||||
}
|
||||
octave(x, y, z, oct = 4, pers = 0.5) {
|
||||
let total = 0, freq = 1, amp = 1, max = 0;
|
||||
for (let i = 0; i < oct; i++) {
|
||||
total += this.noise(x * freq, y * freq, z * freq) * amp;
|
||||
max += amp; freq *= 2; amp *= pers;
|
||||
}
|
||||
return total / max;
|
||||
}
|
||||
}
|
||||
|
||||
// Block types
|
||||
const BLOCKS = {
|
||||
1: { name: 'stone', color: 0x607d8b, tex: null },
|
||||
2: { name: 'dirt', color: 0x5d4037, tex: null },
|
||||
3: { name: 'grass', color: 0x4caf50, tex: null },
|
||||
4: { name: 'oak', color: 0x8d6e63, tex: null },
|
||||
5: { name: 'leaves', color: 0x81c784, tex: null },
|
||||
6: { name: 'crystal', color: 0x7b1fa2, tex: null, emissive: 0x4a148c },
|
||||
7: { name: 'mana', color: 0xe91e63, tex: null, emissive: 0x880e4f }
|
||||
};
|
||||
const BLOCK_NAMES = {1:'石头',2:'泥土',3:'草地',4:'橡木',5:'叶片',6:'晶石',7:'魔能'};
|
||||
|
||||
// Procedural texture generator
|
||||
function createTexture(type) {
|
||||
const c = document.createElement('canvas'); c.width = c.height = 64;
|
||||
const ctx = c.getContext('2d', {alpha:false});
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
if (type === 1) { // stone
|
||||
ctx.fillStyle = '#607d8b'; ctx.fillRect(0,0,64,64);
|
||||
ctx.fillStyle = '#546e7a'; for (let i=0;i<120;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1+Math.random()*2,1+Math.random()*2);}
|
||||
ctx.fillStyle = '#78909c'; for (let i=0;i<40;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1,1);}
|
||||
} else if (type === 2) { // dirt
|
||||
ctx.fillStyle = '#5d4037'; ctx.fillRect(0,0,64,64);
|
||||
ctx.fillStyle = '#4e342e'; for (let i=0;i<200;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1+Math.random()*1.5,1+Math.random()*1.5);}
|
||||
ctx.fillStyle = '#6d4c41'; for (let i=0;i<60;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1,1);}
|
||||
} else if (type === 3) { // grass
|
||||
ctx.fillStyle = '#4caf50'; ctx.fillRect(0,0,64,64);
|
||||
ctx.fillStyle = '#388e3c'; for (let i=0;i<180;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1+Math.random()*2,1+Math.random()*2);}
|
||||
ctx.fillStyle = '#66bb6a'; for (let i=0;i<50;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1,1);}
|
||||
// top layer hint
|
||||
ctx.fillStyle = '#81c784'; ctx.fillRect(0,0,64,8);
|
||||
} else if (type === 4) { // oak
|
||||
ctx.fillStyle = '#8d6e63'; ctx.fillRect(0,0,64,64);
|
||||
ctx.fillStyle = '#6d4c41'; for (let i=0;i<90;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,2,1+Math.random()*3);}
|
||||
} else if (type === 5) { // leaves
|
||||
ctx.fillStyle = '#81c784'; ctx.fillRect(0,0,64,64);
|
||||
ctx.fillStyle = '#66bb6a'; for (let i=0;i<220;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1+Math.random()*2,1+Math.random()*2);}
|
||||
ctx.fillStyle = '#a5d6a7'; for (let i=0;i<30;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1,1);}
|
||||
} else if (type === 6) { // crystal
|
||||
ctx.fillStyle = '#7b1fa2'; ctx.fillRect(0,0,64,64);
|
||||
ctx.fillStyle = '#9c27b0'; for (let i=0;i<80;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1+Math.random()*2,1+Math.random()*2);}
|
||||
ctx.fillStyle = '#ce93d8'; for (let i=0;i<25;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1,1);}
|
||||
} else if (type === 7) { // mana
|
||||
ctx.fillStyle = '#e91e63'; ctx.fillRect(0,0,64,64);
|
||||
ctx.fillStyle = '#f06292'; for (let i=0;i<70;i++) {ctx.fillRect(Math.random()*64,Math.random()*64,1+Math.random()*2,1+Math.random()*2);}
|
||||
}
|
||||
const tex = new THREE.CanvasTexture(c);
|
||||
tex.magFilter = THREE.NearestFilter; tex.minFilter = THREE.NearestFilter;
|
||||
return tex;
|
||||
}
|
||||
|
||||
// Initialize textures
|
||||
Object.keys(BLOCKS).forEach(k => { BLOCKS[k].tex = createTexture(+k); });
|
||||
|
||||
// Game constants
|
||||
const CHUNK_SIZE = 16;
|
||||
const WORLD_HEIGHT = 48;
|
||||
const RENDER_DISTANCE = 5;
|
||||
|
||||
// Three.js setup
|
||||
const scene = new THREE.Scene();
|
||||
scene.fog = new THREE.Fog(0x87ceeb, 60, 140);
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 200);
|
||||
const renderer = new THREE.WebGLRenderer({antialias:true});
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// Lights
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 0.55));
|
||||
const sun = new THREE.DirectionalLight(0xfff8e1, 0.85);
|
||||
sun.position.set(60, 90, 40);
|
||||
scene.add(sun);
|
||||
|
||||
// World data
|
||||
const chunks = new Map(); // key: "cx,cz" -> {blocks: Uint8Array, mesh: Mesh}
|
||||
const noise = new Perlin(1337);
|
||||
|
||||
// Player
|
||||
const player = {
|
||||
pos: new THREE.Vector3(0, 35, 0),
|
||||
vel: new THREE.Vector3(),
|
||||
yaw: 0, pitch: 0,
|
||||
onGround: false,
|
||||
selected: 3
|
||||
};
|
||||
let keys = {}, pointerLocked = false;
|
||||
|
||||
// Chunk helpers
|
||||
function getChunkKey(cx, cz) { return `${cx},${cz}`; }
|
||||
function worldToChunk(x, z) { return {cx: Math.floor(x/CHUNK_SIZE), cz: Math.floor(z/CHUNK_SIZE)}; }
|
||||
function localPos(wx, wy, wz) {
|
||||
return {lx: ((wx % CHUNK_SIZE) + CHUNK_SIZE) % CHUNK_SIZE, ly: wy, lz: ((wz % CHUNK_SIZE) + CHUNK_SIZE) % CHUNK_SIZE};
|
||||
}
|
||||
|
||||
// Generate terrain + fantasy structures
|
||||
function generateChunk(cx, cz) {
|
||||
const key = getChunkKey(cx, cz);
|
||||
if (chunks.has(key)) return chunks.get(key);
|
||||
const blocks = new Uint8Array(CHUNK_SIZE * WORLD_HEIGHT * CHUNK_SIZE);
|
||||
const idx = (lx, ly, lz) => (ly * CHUNK_SIZE + lz) * CHUNK_SIZE + lx;
|
||||
|
||||
// Base terrain
|
||||
for (let lx = 0; lx < CHUNK_SIZE; lx++) {
|
||||
for (let lz = 0; lz < CHUNK_SIZE; lz++) {
|
||||
const wx = cx * CHUNK_SIZE + lx;
|
||||
const wz = cz * CHUNK_SIZE + lz;
|
||||
const h = Math.floor(18 + noise.octave(wx * 0.03, wz * 0.03, 0, 5, 0.45) * 14 +
|
||||
noise.octave(wx * 0.09, wz * 0.09, 4, 3, 0.6) * 5);
|
||||
const stoneH = Math.max(8, Math.floor(h * 0.65));
|
||||
for (let y = 0; y < WORLD_HEIGHT; y++) {
|
||||
let b = 0;
|
||||
if (y < stoneH) b = 1; // stone
|
||||
else if (y < h - 1) b = 2; // dirt
|
||||
else if (y < h) b = 3; // grass
|
||||
if (y < h) blocks[idx(lx, y, lz)] = b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fantasy structures (rich mythical build)
|
||||
const baseX = cx * CHUNK_SIZE, baseZ = cz * CHUNK_SIZE;
|
||||
|
||||
// Crystal Temple (center area)
|
||||
if (cx >= -2 && cx <= 1 && cz >= -2 && cz <= 1) {
|
||||
const tx = 8, tz = 8; // temple center in world coords relative
|
||||
// Temple base + pillars
|
||||
for (let dx = -7; dx <= 7; dx++) for (let dz = -7; dz <= 7; dz++) {
|
||||
const wx = baseX + tx + dx, wz = baseZ + tz + dz;
|
||||
if (wx < cx*CHUNK_SIZE || wx >= (cx+1)*CHUNK_SIZE || wz < cz*CHUNK_SIZE || wz >= (cz+1)*CHUNK_SIZE) continue;
|
||||
const {lx, lz} = localPos(wx, 0, wz);
|
||||
const ly = 20;
|
||||
if (Math.abs(dx) <= 5 && Math.abs(dz) <= 5) blocks[idx(lx, ly, lz)] = 6; // crystal floor
|
||||
if ((Math.abs(dx) === 5 || Math.abs(dz) === 5) && Math.abs(dx) < 6 && Math.abs(dz) < 6) {
|
||||
for (let y = 21; y < 28; y++) blocks[idx(lx, y, lz)] = 6; // pillars
|
||||
}
|
||||
}
|
||||
// Altar
|
||||
for (let dx=-1;dx<=1;dx++) for (let dz=-1;dz<=1;dz++) {
|
||||
const {lx,lz} = localPos(baseX+tx+dx,0,baseZ+tz+dz);
|
||||
blocks[idx(lx,28,lz)] = 6;
|
||||
}
|
||||
blocks[idx(localPos(baseX+tx,0,baseZ+tz).lx, 29, localPos(baseX+tx,0,baseZ+tz).lz)] = 6; // floating core hint
|
||||
}
|
||||
|
||||
// Mana River (winding)
|
||||
if (cz === 0 || cz === -1) {
|
||||
for (let lx=0;lx<CHUNK_SIZE;lx++) {
|
||||
const wx = cx*CHUNK_SIZE + lx;
|
||||
const wz = cz*CHUNK_SIZE + 3 + Math.sin(wx*0.2)*2 | 0;
|
||||
if (wz >= cz*CHUNK_SIZE && wz < (cz+1)*CHUNK_SIZE) {
|
||||
const {lx:l, lz} = localPos(wx,0,wz);
|
||||
for (let y=15; y<19; y++) blocks[idx(l,y,lz)] = 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dragon's Lair (mountain + cave)
|
||||
if (cx === 3 && cz === 3) {
|
||||
for (let lx=2; lx<14; lx++) for (let lz=2; lz<14; lz++) {
|
||||
const h = 26 + ((lx-8)*(lx-8)+(lz-8)*(lz-8)<16 ? 6 : 0);
|
||||
for (let y=18; y<h; y++) blocks[idx(lx,y,lz)] = 1;
|
||||
}
|
||||
// cave entrance
|
||||
for (let y=19;y<23;y++) for (let dz=6;dz<10;dz++) blocks[idx(12,y,dz)] = 0;
|
||||
// dragon skeleton (bone blocks as oak)
|
||||
blocks[idx(8,22,8)] = 4; blocks[idx(9,22,8)] = 4; blocks[idx(10,22,8)] = 4;
|
||||
blocks[idx(8,23,8)] = 4; blocks[idx(10,23,8)] = 4;
|
||||
}
|
||||
|
||||
// Floating Crystal Island
|
||||
if (cx === -3 && cz === 4) {
|
||||
for (let lx=4;lx<12;lx++) for (let lz=4;lz<12;lz++) {
|
||||
blocks[idx(lx,32,lz)] = 6;
|
||||
if (Math.random()<0.3) blocks[idx(lx,33,lz)] = 6;
|
||||
}
|
||||
// support crystals
|
||||
blocks[idx(6,28,6)] = 6; blocks[idx(9,29,9)] = 6;
|
||||
}
|
||||
|
||||
// Enchanted Oak Grove
|
||||
if (cx === -1 && cz === 3) {
|
||||
for (let i=0;i<5;i++) {
|
||||
const lx = 3 + (i%3)*4, lz = 3 + Math.floor(i/3)*5;
|
||||
const treeH = 5 + (i%2);
|
||||
for (let y=20; y<20+treeH; y++) blocks[idx(lx,y,lz)] = 4;
|
||||
for (let dx=-2;dx<=2;dx++) for (let dz=-2;dz<=2;dz++) {
|
||||
if (dx*dx+dz*dz <= 5) blocks[idx(lx+dx,20+treeH,lz+dz)] = 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const chunk = {blocks, mesh: null, cx, cz};
|
||||
chunks.set(key, chunk);
|
||||
return chunk;
|
||||
}
|
||||
|
||||
// Build chunk mesh with face culling
|
||||
function buildChunkMesh(chunk) {
|
||||
if (chunk.mesh) { scene.remove(chunk.mesh); chunk.mesh.geometry.dispose(); }
|
||||
const {blocks, cx, cz} = chunk;
|
||||
const geo = new THREE.BufferGeometry();
|
||||
const pos = [], uv = [], col = [];
|
||||
const idx = (lx,ly,lz) => (ly*CHUNK_SIZE + lz)*CHUNK_SIZE + lx;
|
||||
const dirs = [[1,0,0],[0,0,1],[-1,0,0],[0,0,-1],[0,1,0],[0,-1,0]];
|
||||
const faceUV = [[1,0],[1,1],[0,1],[0,0]]; // simple
|
||||
|
||||
for (let lx=0; lx<CHUNK_SIZE; lx++) for (let ly=0; ly<WORLD_HEIGHT; ly++) for (let lz=0; lz<CHUNK_SIZE; lz++) {
|
||||
const b = blocks[idx(lx,ly,lz)];
|
||||
if (!b) continue;
|
||||
const wx = cx*CHUNK_SIZE + lx, wy = ly, wz = cz*CHUNK_SIZE + lz;
|
||||
const mat = BLOCKS[b];
|
||||
for (let d=0; d<6; d++) {
|
||||
const [dx,dy,dz] = dirs[d];
|
||||
const nx = lx+dx, ny=ly+dy, nz=lz+dz;
|
||||
let nb = 0;
|
||||
if (nx>=0&&nx<CHUNK_SIZE && nz>=0&&nz<CHUNK_SIZE && ny>=0&&ny<WORLD_HEIGHT) nb = blocks[idx(nx,ny,nz)];
|
||||
else {
|
||||
const nkey = getChunkKey(Math.floor((wx+dx)/CHUNK_SIZE), Math.floor((wz+dz)/CHUNK_SIZE));
|
||||
const nc = chunks.get(nkey);
|
||||
if (nc) {
|
||||
const {lx:nlx,ly:nly,lz:nlz} = localPos(wx+dx, ny, wz+dz);
|
||||
if (nly>=0&&nly<WORLD_HEIGHT) nb = nc.blocks[idx(nlx,nly,nlz)];
|
||||
}
|
||||
}
|
||||
if (nb) continue; // occluded
|
||||
// add face
|
||||
const x0 = wx, y0=wy, z0=wz;
|
||||
const verts = [
|
||||
[x0,y0,z0],[x0+1,y0,z0],[x0+1,y0+1,z0],[x0,y0+1,z0], // -z
|
||||
[x0,y0,z0+1],[x0+1,y0,z0+1],[x0+1,y0+1,z0+1],[x0,y0+1,z0+1] // +z etc
|
||||
];
|
||||
const faces = [[0,1,2,3],[4,5,6,7],[0,4,7,3],[1,5,6,2],[3,2,6,7],[0,1,5,4]];
|
||||
const f = faces[d];
|
||||
const v0=verts[f[0]],v1=verts[f[1]],v2=verts[f[2]],v3=verts[f[3]];
|
||||
pos.push(...v0,...v1,...v2, ...v0,...v2,...v3);
|
||||
const uvs = faceUV; uv.push(...uvs.flat(),...uvs.flat());
|
||||
const c = new THREE.Color(mat.color);
|
||||
col.push(c.r,c.g,c.b, c.r,c.g,c.b, c.r,c.g,c.b, c.r,c.g,c.b, c.r,c.g,c.b, c.r,c.g,c.b);
|
||||
}
|
||||
}
|
||||
geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
|
||||
geo.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2));
|
||||
geo.setAttribute('color', new THREE.Float32BufferAttribute(col, 3));
|
||||
const mat = new THREE.MeshLambertMaterial({vertexColors:true, map:BLOCKS[3].tex, side:THREE.FrontSide});
|
||||
// Use different map per face is complex, so use vertex color + one map as tint
|
||||
const mesh = new THREE.Mesh(geo, mat);
|
||||
scene.add(mesh);
|
||||
chunk.mesh = mesh;
|
||||
}
|
||||
|
||||
// Update visible chunks
|
||||
function updateChunks() {
|
||||
const {cx, cz} = worldToChunk(player.pos.x, player.pos.z);
|
||||
const needed = new Set();
|
||||
for (let dx=-RENDER_DISTANCE; dx<=RENDER_DISTANCE; dx++) for (let dz=-RENDER_DISTANCE; dz<=RENDER_DISTANCE; dz++) {
|
||||
const k = getChunkKey(cx+dx, cz+dz);
|
||||
needed.add(k);
|
||||
if (!chunks.has(k)) {
|
||||
const c = generateChunk(cx+dx, cz+dz);
|
||||
buildChunkMesh(c);
|
||||
}
|
||||
}
|
||||
// unload far chunks
|
||||
for (const [k, c] of chunks) {
|
||||
if (!needed.has(k)) {
|
||||
if (c.mesh) { scene.remove(c.mesh); c.mesh.geometry.dispose(); }
|
||||
chunks.delete(k);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Raycast for block hit
|
||||
function raycast(maxDist=6) {
|
||||
const dir = new THREE.Vector3(0,0,-1).applyEuler(new THREE.Euler(player.pitch, player.yaw, 0, 'YXZ'));
|
||||
const origin = player.pos.clone().add(new THREE.Vector3(0,1.6,0));
|
||||
let hit = null, prev = null;
|
||||
for (let t=0; t<maxDist; t+=0.1) {
|
||||
const p = origin.clone().add(dir.clone().multiplyScalar(t));
|
||||
const bx = Math.floor(p.x), by=Math.floor(p.y), bz=Math.floor(p.z);
|
||||
const key = getChunkKey(Math.floor(bx/CHUNK_SIZE), Math.floor(bz/CHUNK_SIZE));
|
||||
const chunk = chunks.get(key);
|
||||
if (!chunk) continue;
|
||||
const {lx,ly,lz} = localPos(bx,by,bz);
|
||||
if (ly<0||ly>=WORLD_HEIGHT) continue;
|
||||
const b = chunk.blocks[(ly*CHUNK_SIZE + lz)*CHUNK_SIZE + lx];
|
||||
if (b) {
|
||||
hit = {x:bx,y:by,z:bz, block:b, chunk};
|
||||
break;
|
||||
}
|
||||
prev = {x:bx,y:by,z:bz};
|
||||
}
|
||||
return {hit, prev};
|
||||
}
|
||||
|
||||
// Block modify
|
||||
function setBlock(wx, wy, wz, type) {
|
||||
if (wy<0||wy>=WORLD_HEIGHT) return false;
|
||||
const {cx,cz} = worldToChunk(wx,wz);
|
||||
const key = getChunkKey(cx,cz);
|
||||
let chunk = chunks.get(key);
|
||||
if (!chunk) chunk = generateChunk(cx,cz);
|
||||
const {lx,ly,lz} = localPos(wx,wy,wz);
|
||||
const i = (ly*CHUNK_SIZE + lz)*CHUNK_SIZE + lx;
|
||||
chunk.blocks[i] = type;
|
||||
buildChunkMesh(chunk);
|
||||
return true;
|
||||
}
|
||||
|
||||
// Player collision & physics
|
||||
function collideAndMove(dt) {
|
||||
const p = player.pos;
|
||||
const size = 0.3;
|
||||
player.vel.y -= 22 * dt; // gravity
|
||||
if (keys[' ' ] && player.onGround) { player.vel.y = 9.5; player.onGround=false; }
|
||||
// move with collision
|
||||
const move = (axis, v) => {
|
||||
if (!v) return;
|
||||
p[axis] += v * dt;
|
||||
// check 8 points around feet+head
|
||||
for (let dx=-1;dx<=1;dx+=2) for (let dz=-1;dz<=1;dz+=2) for (let dy=0;dy<=1;dy++) {
|
||||
const bx = Math.floor(p.x + dx*size), by = Math.floor(p.y + dy*1.6), bz = Math.floor(p.z + dz*size);
|
||||
const key = getChunkKey(Math.floor(bx/CHUNK_SIZE), Math.floor(bz/CHUNK_SIZE));
|
||||
const ch = chunks.get(key);
|
||||
if (!ch) continue;
|
||||
const {lx,ly,lz} = localPos(bx,by,bz);
|
||||
if (ly>=0&&ly<WORLD_HEIGHT && ch.blocks[(ly*CHUNK_SIZE + lz)*CHUNK_SIZE + lx]) {
|
||||
// push back
|
||||
if (axis==='x') p.x -= v*dt * 1.02;
|
||||
if (axis==='z') p.z -= v*dt * 1.02;
|
||||
if (axis==='y') { p.y -= v*dt * 1.02; player.vel.y = 0; if (v<0) player.onGround=true; }
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
const speed = 12;
|
||||
const fwd = new THREE.Vector3(Math.sin(player.yaw),0,-Math.cos(player.yaw)).multiplyScalar((keys['w']?1:0)-(keys['s']?1:0));
|
||||
const side = new THREE.Vector3(Math.cos(player.yaw),0,Math.sin(player.yaw)).multiplyScalar((keys['d']?1:0)-(keys['a']?1:0));
|
||||
const moveVec = fwd.add(side).normalize().multiplyScalar(speed);
|
||||
move('x', moveVec.x);
|
||||
move('z', moveVec.z);
|
||||
move('y', player.vel.y);
|
||||
if (player.vel.y < 0) player.onGround = false; // will be set true on collision
|
||||
// simple ground clamp
|
||||
if (p.y < 1) { p.y=1; player.vel.y=0; player.onGround=true; }
|
||||
}
|
||||
|
||||
// Input
|
||||
function showMsg(text) {
|
||||
const el = document.getElementById('msg');
|
||||
el.textContent = text; el.style.opacity = '1';
|
||||
setTimeout(() => { el.style.opacity = '0'; }, 1400);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
keys[e.key.toLowerCase()] = true;
|
||||
if (e.key >= '1' && e.key <= '7') {
|
||||
player.selected = +e.key;
|
||||
updateHotbar();
|
||||
}
|
||||
if (e.key.toLowerCase()==='e') {
|
||||
// creative fly toggle hint
|
||||
player.vel.y = 0;
|
||||
showMsg('创造模式已切换 (仅演示)');
|
||||
}
|
||||
});
|
||||
document.addEventListener('keyup', e => { keys[e.key.toLowerCase()] = false; });
|
||||
|
||||
function updateHotbar() {
|
||||
const bar = document.getElementById('hotbar');
|
||||
bar.innerHTML = '';
|
||||
for (let i=1;i<=7;i++) {
|
||||
const s = document.createElement('div');
|
||||
s.className = 'slot' + (i===player.selected?' active':'');
|
||||
s.innerHTML = `<div class="icon" style="background:#${BLOCKS[i].color.toString(16).padStart(6,'0')}"></div>`;
|
||||
s.onclick = () => { player.selected = i; updateHotbar(); };
|
||||
bar.appendChild(s);
|
||||
}
|
||||
}
|
||||
updateHotbar();
|
||||
|
||||
// Mouse lock & look
|
||||
renderer.domElement.addEventListener('click', () => {
|
||||
if (!pointerLocked) renderer.domElement.requestPointerLock();
|
||||
});
|
||||
document.addEventListener('pointerlockchange', () => {
|
||||
pointerLocked = document.pointerLockElement === renderer.domElement;
|
||||
});
|
||||
document.addEventListener('mousemove', e => {
|
||||
if (!pointerLocked) return;
|
||||
player.yaw -= e.movementX * 0.0022;
|
||||
player.pitch -= e.movementY * 0.0022;
|
||||
player.pitch = Math.max(-1.5, Math.min(1.5, player.pitch));
|
||||
});
|
||||
|
||||
// Break / place
|
||||
renderer.domElement.addEventListener('mousedown', e => {
|
||||
if (!pointerLocked) return;
|
||||
const {hit, prev} = raycast();
|
||||
if (e.button === 0 && hit) { // destroy
|
||||
setBlock(hit.x, hit.y, hit.z, 0);
|
||||
showMsg('方块已破坏');
|
||||
} else if (e.button === 2 && prev) { // place
|
||||
if (setBlock(prev.x, prev.y, prev.z, player.selected)) showMsg('方块已放置');
|
||||
}
|
||||
});
|
||||
window.addEventListener('contextmenu', e => e.preventDefault());
|
||||
|
||||
// Resize
|
||||
window.addEventListener('resize', () => {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
|
||||
// Initial world seed
|
||||
for (let dx=-2;dx<=3;dx++) for (let dz=-2;dz<=4;dz++) {
|
||||
const c = generateChunk(dx, dz);
|
||||
buildChunkMesh(c);
|
||||
}
|
||||
player.pos.set(4, 26, 4);
|
||||
|
||||
// Main loop
|
||||
let last = performance.now();
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
const now = performance.now();
|
||||
const dt = Math.min((now - last) / 1000, 0.1);
|
||||
last = now;
|
||||
|
||||
collideAndMove(dt);
|
||||
updateChunks();
|
||||
|
||||
// camera
|
||||
camera.position.copy(player.pos).add(new THREE.Vector3(0, 1.65, 0));
|
||||
camera.rotation.order = 'YXZ';
|
||||
camera.rotation.set(player.pitch, player.yaw, 0);
|
||||
|
||||
// subtle sun movement (day cycle feel)
|
||||
sun.position.x = Math.cos(now/18000)*70 + 20;
|
||||
sun.position.z = Math.sin(now/18000)*40;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
animate();
|
||||
|
||||
console.log('%c[MythosCraft] Single-file Minecraft clone ready. Rich fantasy temple, mana river, dragon lair, floating island, enchanted grove included.', 'color:#666');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user