Files
nagi-bench/outputs/inkling/tinker-web-xhigh/pelican-cycling.svg
2026-07-16 15:54:23 +01:00

172 lines
7.5 KiB
XML

<svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" style="background-color:#87CEEB; width:100%; height:auto; display:block;">
<defs>
<!-- 太阳渐变 -->
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#FFF5B0" />
<stop offset="60%" stop-color="#FFD166" />
<stop offset="100%" stop-color="#FF9F6A" stop-opacity="0.6"/>
</radialGradient>
<!-- 海水渐变 -->
<linearGradient id="oceanGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#4FC3F7" />
<stop offset="50%" stop-color="#2B9EDB" />
<stop offset="100%" stop-color="#1A6B99" />
</linearGradient>
<!-- 沙滩渐变 -->
<linearGradient id="sandGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FCE2B6" />
<stop offset="100%" stop-color="#E8C494" />
</linearGradient>
<!-- 自行车金属 -->
<linearGradient id="metalGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#B0BEC5" />
<stop offset="50%" stop-color="#ECEFF1" />
<stop offset="100%" stop-color="#78909C" />
</linearGradient>
</defs>
<!-- 背景天空 -->
<rect x="0" y="0" width="800" height="500" fill="#87CEEB" />
<!-- 远处的云 -->
<g fill="#FFFFFF" opacity="0.9">
<ellipse cx="150" cy="80" rx="60" ry="25" />
<ellipse cx="200" cy="90" rx="50" ry="20" />
<ellipse cx="120" cy="70" rx="40" ry="18" />
<ellipse cx="650" cy="110" rx="70" ry="30" />
<ellipse cx="720" cy="100" rx="50" ry="22" />
</g>
<!-- 太阳 -->
<circle cx="680" cy="90" r="45" fill="url(#sunGrad)" />
<!-- 海洋 -->
<rect x="0" y="320" width="800" height="180" fill="url(#oceanGrad)" />
<!-- 远处海浪线 -->
<path d="M0 340 Q100 320 200 340 T400 340 T600 340 T800 340" stroke="#FFFFFF" stroke-width="3" fill="none" opacity="0.6" />
<path d="M0 370 Q150 350 300 370 T600 370 T800 370" stroke="#FFFFFF" stroke-width="4" fill="none" opacity="0.4" />
<!-- 沙滩 -->
<path d="M0 420 Q200 390 400 420 T800 410 L800 500 L0 500 Z" fill="url(#sandGrad)" />
<!-- 沙滩纹理点 -->
<g fill="#D7BF94" opacity="0.3">
<circle cx="100" cy="450" r="3"/><circle cx="250" cy="430" r="4"/><circle cx="400" cy="445" r="3"/>
<circle cx="550" cy="425" r="5"/><circle cx="700" cy="440" r="3"/><circle cx="750" cy="435" r="4"/>
</g>
<!-- 海鸟剪影 -->
<g stroke="#1A3A52" stroke-width="2" fill="none" stroke-linecap="round">
<path d="M500 70 Q510 50 520 70 Q530 50 540 70" />
<path d="M530 60 Q540 40 550 60 Q560 40 570 60" />
</g>
<!-- 自行车 -->
<g id="bike">
<!-- 前轮 -->
<circle cx="420" cy="360" r="55" stroke="#2C3E50" stroke-width="6" fill="none" />
<circle cx="420" cy="360" r="48" stroke="#34495E" stroke-width="2" fill="none" />
<!-- 前轮辐条 -->
<g stroke="#BDC3C7" stroke-width="1">
<line x1="420" y1="305" x2="420" y2="415" />
<line x1="365" y1="360" x2="475" y2="360" />
<line x1="380" y1="320" x2="460" y2="400" />
<line x1="380" y1="400" x2="460" y2="320" />
</g>
<!-- 后轮 -->
<circle cx="220" cy="360" r="55" stroke="#2C3E50" stroke-width="6" fill="none" />
<circle cx="220" cy="360" r="48" stroke="#34495E" stroke-width="2" fill="none" />
<g stroke="#BDC3C7" stroke-width="1">
<line x1="220" y1="305" x2="220" y2="415" />
<line x1="165" y1="360" x2="275" y2="360" />
<line x1="180" y1="320" x2="260" y2="400" />
<line x1="180" y1="400" x2="260" y2="320" />
</g>
<!-- 车架 -->
<line x1="220" y1="360" x2="420" y2="360" stroke="#2C3E50" stroke-width="5" stroke-linecap="round" />
<line x1="220" y1="360" x2="320" y2="240" stroke="#2C3E50" stroke-width="4" stroke-linecap="round" />
<line x1="320" y1="240" x2="420" y2="360" stroke="#2C3E50" stroke-width="4" stroke-linecap="round" />
<line x1="320" y1="240" x2="280" y2="300" stroke="#2C3E50" stroke-width="3" stroke-linecap="round" />
<!-- 车把 -->
<line x1="420" y1="320" x2="380" y2="250" stroke="#78909C" stroke-width="4" stroke-linecap="round" />
<line x1="380" y1="250" x2="400" y2="240" stroke="#78909C" stroke-width="3" stroke-linecap="round" />
<!-- 把手 -->
<line x1="370" y1="245" x2="390" y2="245" stroke="#2C3E50" stroke-width="3" stroke-linecap="round" />
<!-- 座椅 -->
<path d="M270 300 Q290 280 310 300 L305 310 Q280 315 270 305 Z" fill="#5D4037" stroke="#3E2723" stroke-width="2" />
<!-- 脚踏板 -->
<circle cx="320" cy="340" r="8" fill="#95A5A6" stroke="#7F8C8D" stroke-width="2" />
<line x1="320" y1="340" x2="360" y2="340" stroke="#7F8C8D" stroke-width="3" />
</g>
<!-- 鹈鹕身体 -->
<g id="pelican">
<!-- 身体 -->
<ellipse cx="340" cy="300" rx="45" ry="35" fill="#F8F9FA" stroke="#E9ECEF" stroke-width="1" />
<path d="M300 280 Q330 250 370 270 Q390 300 360 320 Q330 340 300 310 Z" fill="#FFFFFF" stroke="#DDE2E6" stroke-width="2" />
<!-- 头部 -->
<ellipse cx="390" cy="260" rx="22" ry="18" fill="#F0F0F0" stroke="#D5D8DC" stroke-width="1" />
<!-- 大嘴/喙 -->
<path d="M405 255 Q450 230 480 240 L470 280 Q430 290 400 270 Z" fill="#FFA726" stroke="#FF8F00" stroke-width="2" />
<!-- 嘴下袋 -->
<path d="M430 245 Q460 270 450 290 Q420 280 410 255 Z" fill="#FFE082" stroke="#FFCA28" stroke-width="1" opacity="0.8" />
<!-- 眼睛 -->
<circle cx="398" cy="252" r="3" fill="#2C3E50" />
<circle cx="399" cy="251" r="0.8" fill="#FFFFFF" />
<!-- 颈部羽毛纹理 -->
<path d="M380 275 Q395 285 390 300" stroke="#E9ECEF" stroke-width="2" fill="none" stroke-linecap="round" />
<!-- 翅膀(微微张开,骑车姿势) -->
<path d="M340 290 Q300 270 310 240 Q330 250 350 280 Z" fill="#F5F5F5" stroke="#DDE2E6" stroke-width="2" />
<path d="M370 300 Q410 280 420 310 Q400 320 370 310 Z" fill="#F5F5F5" stroke="#DDE2E6" stroke-width="2" />
<!-- 腿部(踩踏板) -->
<path d="M330 320 L325 350" stroke="#FFCA28" stroke-width="6" stroke-linecap="round" />
<path d="M325 350 L330 360" stroke="#FF9800" stroke-width="4" stroke-linecap="round" />
<circle cx="332" cy="355" r="5" fill="#FFB300" />
<!-- 尾巴 -->
<path d="M300 310 Q270 325 280 340 Q300 335 310 320 Z" fill="#EEEEEE" stroke="#DDE2E6" stroke-width="2" />
</g>
<!-- 自行车阴影 -->
<ellipse cx="320" cy="420" rx="120" ry="15" fill="#000000" opacity="0.1" />
<!-- 前景海浪细节 -->
<path d="M0 400 Q150 380 300 400 T600 390 T800 400" stroke="#FFFFFF" stroke-width="4" fill="none" opacity="0.7" stroke-linecap="round" />
<path d="M800 410 Q650 395 500 415 T200 405 L0 415" stroke="#FFFFFF" stroke-width="3" fill="none" opacity="0.5" stroke-linecap="round" />
<!-- 沙滩上的小贝壳 -->
<path d="M180 445 Q190 435 200 445 Q190 455 180 445 Z" fill="#FFE4B5" stroke="#D2B48C" stroke-width="1" />
<circle cx="620" cy="435" r="4" fill="#F5DEB3" stroke="#DEB887" stroke-width="1" />
<!-- 动画:微风吹动(简单CSS动画嵌入) -->
<style>
@keyframes floatBird {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(2px, -3px); }
}
#pelican { animation: floatBird 4s ease-in-out infinite; }
@keyframes wave {
0% { transform: translateX(0); }
100% { transform: translateX(-50px); }
}
.wave-anim { animation: wave 6s linear infinite; }
</style>
<!-- 动画波浪 -->
<g class="wave-anim">
<path d="M-100 350 Q50 330 200 350 T500 350 T900 350" stroke="#FFFFFF" stroke-width="3" fill="none" opacity="0.5" />
</g>
</svg>