查看 SVG 源码
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 700" width="100%" height="100%">
<defs>
<linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#bbf2f6"></stop>
<stop offset="60%" stop-color="#e8f9fa"></stop>
<stop offset="100%" stop-color="#fff8eb"></stop>
</linearGradient>
<linearGradient id="groundGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#8093a2"></stop>
<stop offset="8%" stop-color="#4e5b68"></stop>
<stop offset="100%" stop-color="#2d3741"></stop>
</linearGradient>
<linearGradient id="bikeFrame" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#2bd9b6"></stop>
<stop offset="50%" stop-color="#12a89d"></stop>
<stop offset="100%" stop-color="#086b67"></stop>
</linearGradient>
<linearGradient id="chrome" x1="0%" y1="0%" x2="100%" y2="50%">
<stop offset="0%" stop-color="#ffffff"></stop>
<stop offset="35%" stop-color="#cfd9df"></stop>
<stop offset="70%" stop-color="#8695a5"></stop>
<stop offset="100%" stop-color="#e2ebf0"></stop>
</linearGradient>
<linearGradient id="darkMetal" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#434343"></stop>
<stop offset="100%" stop-color="#1a1a1a"></stop>
</linearGradient>
<linearGradient id="beakTop" x1="0%" y1="0%" x2="100%" y2="50%">
<stop offset="0%" stop-color="#ffa726"></stop>
<stop offset="100%" stop-color="#f57c00"></stop>
</linearGradient>
<linearGradient id="pouchGrad" x1="0%" y1="0%" x2="30%" y2="100%">
<stop offset="0%" stop-color="#ffb74d"></stop>
<stop offset="50%" stop-color="#ff9100"></stop>
<stop offset="100%" stop-color="#e65100"></stop>
</linearGradient>
<linearGradient id="featherBase" x1="0%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#ffffff"></stop>
<stop offset="65%" stop-color="#f0f4f8"></stop>
<stop offset="100%" stop-color="#d6e0ea"></stop>
</linearGradient>
<linearGradient id="wingShadow" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#dfe7ee"></stop>
<stop offset="100%" stop-color="#9aaec0"></stop>
</linearGradient>
<linearGradient id="footGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff9800"></stop>
<stop offset="100%" stop-color="#d84315"></stop>
</linearGradient>
<linearGradient id="leather" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8d5b4c"></stop>
<stop offset="60%" stop-color="#5c382a"></stop>
<stop offset="100%" stop-color="#3d1d12"></stop>
</linearGradient>
<filter id="softShadow" x="-10%" y="-10%" width="130%" height="130%">
<feDropShadow dx="3" dy="5" stdDeviation="4" flood-color="#07202b" flood-opacity="0.25"></feDropShadow>
</filter>
<filter id="blurShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="7"></feGaussianBlur>
</filter>
</defs>
<rect width="900" height="700" fill="url(#skyGrad)"></rect>
<g opacity="0.45">
<circle cx="750" cy="140" r="65" fill="#fff9db"></circle>
<path d="M120 180 q25 -30 65 -20 q40 -40 85 -10 q45 -20 80 15 q30 5 40 30 h-285 z" fill="#ffffff"></path>
<path d="M560 210 q30 -25 60 -10 q35 -30 75 -5 q40 -15 65 15 q25 5 35 25 h-245 z" fill="#ffffff"></path>
</g>
<path d="M0 480 Q180 460 360 475 T720 465 Q820 470 900 475 L900 500 L0 500 Z" fill="#c3dedd" opacity="0.6"></path>
<path d="M0 495 L900 495 L900 700 L0 700 Z" fill="url(#groundGrad)"></path>
<line x1="0" y1="497" x2="900" y2="497" stroke="#9bb1c2" stroke-width="4"></line>
<line x1="0" y1="504" x2="900" y2="504" stroke="#d5e3ec" stroke-width="2" opacity="0.7"></line>
<g stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.4">
<line x1="140" y1="590" x2="190" y2="590"></line>
<line x1="90" y1="605" x2="160" y2="605"></line>
<line x1="110" y1="620" x2="175" y2="620"></line>
</g>
<ellipse cx="280" cy="625" rx="75" ry="14" fill="#1b242b" opacity="0.55" filter="url(#blurShadow)"></ellipse>
<ellipse cx="640" cy="625" rx="75" ry="14" fill="#1b242b" opacity="0.55" filter="url(#blurShadow)"></ellipse>
<ellipse cx="460" cy="632" rx="130" ry="17" fill="#131c22" opacity="0.45" filter="url(#blurShadow)"></ellipse>
<g id="rear-wheel">
<circle cx="280" cy="520" r="96" fill="none" stroke="#25272a" stroke-width="16"></circle>
<circle cx="280" cy="520" r="102" fill="none" stroke="#3c4146" stroke-width="1.5" stroke-dasharray="4 6"></circle>
<circle cx="280" cy="520" r="88" fill="none" stroke="url(#chrome)" stroke-width="6"></circle>
<g stroke="#b8c6cf" stroke-width="1.3" opacity="0.85">
<line x1="280" y1="520" x2="280" y2="432"></line>
<line x1="280" y1="520" x2="280" y2="608"></line>
<line x1="280" y1="520" x2="192" y2="520"></line>
<line x1="280" y1="520" x2="368" y2="520"></line>
<line x1="280" y1="520" x2="218" y2="458"></line>
<line x1="280" y1="520" x2="342" y2="582"></line>
<line x1="280" y1="520" x2="218" y2="582"></line>
<line x1="280" y1="520" x2="342" y2="458"></line>
<line x1="280" y1="520" x2="245" y2="439"></line>
<line x1="280" y1="520" x2="315" y2="601"></line>
<line x1="280" y1="520" x2="315" y2="439"></line>
<line x1="280" y1="520" x2="245" y2="601"></line>
<line x1="280" y1="520" x2="199" y2="485"></line>
<line x1="280" y1="520" x2="361" y2="555"></line>
<line x1="280" y1="520" x2="199" y2="555"></line>
<line x1="280" y1="520" x2="361" y2="485"></line>
</g>
<circle cx="280" cy="520" r="19" fill="url(#chrome)" stroke="#525d66" stroke-width="2"></circle>
<circle cx="280" cy="520" r="7" fill="#1b2126"></circle>
</g>
<path d="M190 525 A 98 98 0 0 1 315 425" fill="none" stroke="url(#bikeFrame)" stroke-width="8" stroke-linecap="round"></path>
<path d="M280 520 L235 450 M280 520 L200 522" stroke="url(#chrome)" stroke-width="2.5"></path>
<g id="left-pedal">
<line x1="450" y1="525" x2="405" y2="485" stroke="url(#chrome)" stroke-width="6.5" stroke-linecap="round"></line>
<rect x="388" y="477" width="26" height="10" rx="3" fill="#1a1a1a" stroke="#68737d" stroke-width="1.5" transform="rotate(-10 401 482)"></rect>
</g>
<g id="left-leg">
<path d="M440 435 Q425 455 408 480" stroke="url(#footGrad)" stroke-width="10" stroke-linecap="round" fill="none"></path>
<path d="M408 480 L375 483 Q385 494 402 490 Q410 493 425 486 Z" fill="url(#footGrad)" stroke="#b63809" stroke-width="1"></path>
</g>
<g id="bicycle-frame" filter="url(#softShadow)">
<line x1="450" y1="525" x2="280" y2="520" stroke="url(#bikeFrame)" stroke-width="10" stroke-linecap="round"></line>
<line x1="420" y1="365" x2="280" y2="520" stroke="url(#bikeFrame)" stroke-width="8.5" stroke-linecap="round"></line>
<line x1="420" y1="365" x2="450" y2="525" stroke="url(#bikeFrame)" stroke-width="12" stroke-linecap="round"></line>
<line x1="585" y1="345" x2="450" y2="525" stroke="url(#bikeFrame)" stroke-width="13" stroke-linecap="round"></line>
<path d="M420 380 C480 405, 525 390, 585 345" fill="none" stroke="url(#bikeFrame)" stroke-width="11" stroke-linecap="round"></path>
<path d="M420 405 C480 425, 530 405, 585 355" fill="none" stroke="url(#bikeFrame)" stroke-width="7" stroke-linecap="round" opacity="0.85"></path>
<line x1="595" y1="320" x2="575" y2="375" stroke="url(#bikeFrame)" stroke-width="13" stroke-linecap="round"></line>
<line x1="580" y1="365" x2="640" y2="520" stroke="url(#bikeFrame)" stroke-width="10" stroke-linecap="round"></line>
<path d="M583 360 L577 375" stroke="url(#chrome)" stroke-width="12" stroke-linecap="round"></path>
<path d="M435 505 L510 505 Q525 510 520 535 Q510 550 445 550 C418 550 415 520 435 505 Z" fill="url(#bikeFrame)" stroke="#095551" stroke-width="2"></path>
<path d="M440 525 L508 525" stroke="url(#chrome)" stroke-width="3" stroke-linecap="round"></path>
<circle cx="450" cy="525" r="28" fill="none" stroke="url(#chrome)" stroke-width="5"></circle>
<circle cx="450" cy="525" r="9" fill="url(#darkMetal)"></circle>
<path d="M450 497 L280 508 M450 553 L280 532" stroke="#687782" stroke-width="2.5" stroke-dasharray="4 2.5"></path>
<line x1="420" y1="365" x2="415" y2="330" stroke="url(#chrome)" stroke-width="9" stroke-linecap="round"></line>
<path d="M400 334 Q405 342 413 334 T426 334" fill="none" stroke="url(#chrome)" stroke-width="3.5"></path>
<path d="M380 326 C380 315, 410 312, 442 322 C456 326, 456 333, 446 335 C420 339, 395 340, 380 326 Z" fill="url(#leather)" stroke="#23120b" stroke-width="1.5"></path>
<path d="M592 325 L597 270" stroke="url(#chrome)" stroke-width="9" stroke-linecap="round"></path>
<path d="M597 270 Q585 240 550 250 L532 256" fill="none" stroke="url(#chrome)" stroke-width="7" stroke-linecap="round"></path>
<path d="M545 252 L525 258" stroke="url(#leather)" stroke-width="9.5" stroke-linecap="round"></path>
<circle cx="585" cy="254" r="7.5" fill="#fbc02d" stroke="#f57f17" stroke-width="1.5"></circle>
<path d="M589 248 L593 243" stroke="#f57f17" stroke-width="2" stroke-linecap="round"></path>
</g>
<g id="front-wheel">
<circle cx="640" cy="520" r="96" fill="none" stroke="#25272a" stroke-width="16"></circle>
<circle cx="640" cy="520" r="102" fill="none" stroke="#3c4146" stroke-width="1.5" stroke-dasharray="4 6"></circle>
<circle cx="640" cy="520" r="88" fill="none" stroke="url(#chrome)" stroke-width="6"></circle>
<g stroke="#b8c6cf" stroke-width="1.3" opacity="0.85">
<line x1="640" y1="520" x2="640" y2="432"></line>
<line x1="640" y1="520" x2="640" y2="608"></line>
<line x1="640" y1="520" x2="552" y2="520"></line>
<line x1="640" y1="520" x2="728" y2="520"></line>
<line x1="640" y1="520" x2="578" y2="458"></line>
<line x1="640" y1="520" x2="702" y2="582"></line>
<line x1="640" y1="520" x2="578" y2="582"></line>
<line x1="640" y1="520" x2="702" y2="458"></line>
<line x1="640" y1="520" x2="605" y2="439"></line>
<line x1="640" y1="520" x2="675" y2="601"></line>
<line x1="640" y1="520" x2="675" y2="439"></line>
<line x1="640" y1="520" x2="605" y2="601"></line>
<line x1="640" y1="520" x2="559" y2="485"></line>
<line x1="640" y1="520" x2="721" y2="555"></line>
<line x1="640" y1="520" x2="559" y2="555"></line>
<line x1="640" y1="520" x2="721" y2="485"></line>
</g>
<circle cx="640" cy="520" r="14" fill="url(#chrome)" stroke="#495560" stroke-width="2"></circle>
<circle cx="640" cy="520" r="5" fill="#1b2126"></circle>
</g>
<path d="M580 435 A 98 98 0 0 1 720 475" fill="none" stroke="url(#bikeFrame)" stroke-width="8" stroke-linecap="round"></path>
<path d="M640 520 L615 440 M640 520 L710 470" stroke="url(#chrome)" stroke-width="2.5"></path>
<g id="front-basket" filter="url(#softShadow)">
<path d="M625 255 L690 245 L680 305 L630 305 Z" fill="#d7a15c" stroke="#8d5b28" stroke-width="2.5"></path>
<path d="M635 253 L640 305 M652 250 L655 305 M669 248 L670 305" stroke="#a36b2c" stroke-width="2"></path>
<path d="M628 270 L687 262 M629 288 L683 282" stroke="#a36b2c" stroke-width="2"></path>
<g transform="rotate(-18 655 255)">
<path d="M640 255 Q660 240 680 252 Q665 264 640 255 Z" fill="#78909c" stroke="#37474f" stroke-width="1.5"></path>
<polygon points="635,248 642,255 634,262" fill="#546e7a"></polygon>
<circle cx="672" cy="250" r="1.8" fill="#ffffff"></circle>
<circle cx="673" cy="250" r="0.9" fill="#000000"></circle>
<path d="M657 253 Q661 257 655 260" fill="none" stroke="#37474f" stroke-width="1.2"></path>
</g>
</g>
<g id="tail-feathers" filter="url(#softShadow)">
<path d="M365 330 C330 338, 310 355, 300 375 C318 370, 335 368, 350 365 C335 375, 325 385, 315 400 C335 390, 355 380, 375 375 Z" fill="#c4d3df" stroke="#90a4ae" stroke-width="1.5"></path>
<path d="M355 342 C330 355, 315 375, 310 392" stroke="#78909c" stroke-width="1.5" fill="none"></path>
</g>
<g id="pelican-body" filter="url(#softShadow)">
<path d="M360 340 C370 290, 420 270, 475 285 C520 298, 545 340, 520 395 C495 440, 430 445, 385 415 C360 395, 352 368, 360 340 Z" fill="url(#featherBase)" stroke="#b0bec5" stroke-width="1.5"></path>
<path d="M470 290 C510 310, 530 345, 510 390 C490 430, 440 430, 400 410 C445 418, 480 395, 492 360 C505 325, 485 300, 470 290 Z" fill="url(#wingShadow)" opacity="0.35"></path>
<g fill="none" stroke="#b0bec5" stroke-width="1.3" opacity="0.6">
<path d="M400 360 Q412 368 424 360"></path>
<path d="M422 355 Q434 363 446 355"></path>
<path d="M410 380 Q422 388 434 380"></path>
<path d="M432 375 Q444 383 456 375"></path>
<path d="M425 400 Q437 408 449 400"></path>
</g>
</g>
<g id="right-leg">
<ellipse cx="445" cy="425" rx="18" ry="12" transform="rotate(35 445 425)" fill="#e2ebf0" stroke="#b0bec5" stroke-width="1"></ellipse>
<path d="M450 430 L475 495 L472 555" fill="none" stroke="url(#footGrad)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="475" cy="495" r="5.5" fill="#f57c00"></circle>
<line x1="450" y1="525" x2="472" y2="560" stroke="url(#chrome)" stroke-width="7" stroke-linecap="round"></line>
<g id="right-webbed-foot">
<polygon points="460,562 498,552 506,564 485,572 458,568" fill="url(#footGrad)" stroke="#c63f17" stroke-width="1.2"></polygon>
<path d="M465 560 L496 552 M468 563 L503 562 M465 566 L486 571" stroke="#ffb74d" stroke-width="1.2"></path>
<polygon points="498,552 504,551 500,554" fill="#37474f"></polygon>
<polygon points="506,563 512,563 507,566" fill="#37474f"></polygon>
<polygon points="485,571 490,573 484,574" fill="#37474f"></polygon>
<rect x="458" y="563" width="34" height="8" rx="2.5" fill="#1a1a1a" stroke="#78909c" stroke-width="1.2" transform="rotate(12 475 567)"></rect>
</g>
</g>
<g id="pelican-neck-head" filter="url(#softShadow)">
<path d="M485 305 C495 240, 530 170, 505 130 C490 105, 455 105, 448 135 C442 165, 465 195, 460 230 C455 255, 442 275, 435 290 Z" fill="url(#featherBase)" stroke="#b0bec5" stroke-width="1.2"></path>
<path d="M448 135 C443 100, 480 82, 515 95 C540 104, 555 125, 550 148 C540 170, 500 170, 475 160 Z" fill="url(#featherBase)"></path>
<path d="M455 100 C438 82, 425 88, 412 85 C422 98, 432 106, 444 112 C428 112, 418 118, 410 126 C425 127, 438 124, 449 122 Z" fill="#e2ebf0" stroke="#90a4ae" stroke-width="1.2"></path>
<path d="M495 110 Q515 105, 528 118 Q518 132, 498 126 Z" fill="#ffe0b2" stroke="#ffb74d" stroke-width="1"></path>
<circle cx="512" cy="118" r="8" fill="#ffffff" stroke="#e0a96d" stroke-width="1"></circle>
<circle cx="514" cy="118" r="4.8" fill="#212121"></circle>
<circle cx="516" cy="116" r="1.8" fill="#ffffff"></circle>
<path d="M504 111 Q515 107, 526 112" fill="none" stroke="#546e7a" stroke-width="2.2" stroke-linecap="round"></path>
<path d="M525 155 C540 190, 565 240, 620 240 C675 240, 715 190, 725 165 C680 185, 600 195, 532 152 Z" fill="url(#pouchGrad)" stroke="#d84315" stroke-width="1.8"></path>
<g fill="none" stroke="#ffcc80" stroke-width="1.4" opacity="0.7">
<path d="M545 165 C565 200, 595 225, 630 226"></path>
<path d="M575 168 C595 200, 625 220, 660 216"></path>
<path d="M615 168 C640 195, 668 205, 695 190"></path>
</g>
<path d="M518 126 L735 152 C755 155, 755 163, 742 165 L525 155 Z" fill="url(#beakTop)" stroke="#e65100" stroke-width="1.5"></path>
<path d="M520 128 L740 154" stroke="#ffe082" stroke-width="2.5" stroke-linecap="round"></path>
<path d="M738 152 Q752 154, 748 168 Q741 170, 735 160 Z" fill="#bf360c" stroke="#d84315" stroke-width="1"></path>
<path d="M532 135 L555 138" stroke="#d84315" stroke-width="1.8" stroke-linecap="round"></path>
<path d="M525 155 L738 164" stroke="#e65100" stroke-width="3" stroke-linecap="round"></path>
</g>
<g id="pelican-hat" filter="url(#softShadow)">
<path d="M472 96 C495 86, 528 89, 545 98 C530 92, 495 90, 472 96 Z" fill="#212121"></path>
<path d="M495 92 L548 95 C556 95, 558 100, 550 102 L498 96 Z" fill="#1565c0" stroke="#0d47a1" stroke-width="1"></path>
<path d="M475 94 C472 70, 510 65, 532 75 C542 80, 540 92, 538 95 Z" fill="#1976d2" stroke="#0d47a1" stroke-width="1.5"></path>
<circle cx="510" cy="72" r="3.5" fill="#fbc02d" stroke="#f57f17" stroke-width="1"></circle>
</g>
<g id="scarf" filter="url(#softShadow)">
<path d="M455 240 C475 235, 495 242, 502 258 C485 265, 460 262, 455 240 Z" fill="#e53935" stroke="#b71c1c" stroke-width="1.5"></path>
<path d="M465 240 L470 260 M480 238 L487 261 M495 245 L498 259" stroke="#ffffff" stroke-width="2.5"></path>
<path d="M460 248 C435 245, 400 230, 370 242 C395 252, 420 255, 452 260 Z" fill="#e53935" stroke="#b71c1c" stroke-width="1.5"></path>
<path d="M455 256 C430 260, 395 252, 360 268 C390 275, 420 270, 452 265 Z" fill="#d32f2f" stroke="#b71c1c" stroke-width="1.5"></path>
<path d="M420 239 L425 252 M390 239 L394 249" stroke="#ffffff" stroke-width="2.5"></path>
<path d="M410 261 L413 272 M380 264 L383 272" stroke="#ffffff" stroke-width="2.5"></path>
<line x1="370" y1="242" x2="362" y2="244" stroke="#ffffff" stroke-width="2"></line>
<line x1="360" y1="268" x2="352" y2="270" stroke="#ffffff" stroke-width="2"></line>
</g>
<g id="pelican-wing" filter="url(#softShadow)">
<path d="M410 325 C415 285, 465 285, 505 275 C535 268, 550 260, 542 265 C515 285, 480 320, 460 365 C440 405, 415 410, 400 395 C390 380, 405 350, 410 325 Z" fill="url(#featherBase)" stroke="#90a4ae" stroke-width="1.5"></path>
<path d="M500 278 Q535 260, 545 258 Q532 275, 495 295 Z" fill="#37474f" stroke="#263238" stroke-width="1"></path>
<path d="M495 278 L535 262" stroke="#78909c" stroke-width="1"></path>
<path d="M485 292 Q522 280, 538 275 Q520 295, 475 315 Z" fill="#455a64" stroke="#263238" stroke-width="1"></path>
<path d="M470 310 Q508 302, 525 298 Q502 320, 455 340 Z" fill="#37474f" stroke="#263238" stroke-width="1"></path>
<path d="M450 335 Q485 330, 502 328 Q480 350, 435 368 Z" fill="#546e7a" stroke="#263238" stroke-width="1"></path>
<path d="M430 360 Q465 358, 478 358 Q455 380, 415 390 Z" fill="#607d8b" stroke="#263238" stroke-width="1"></path>
<path d="M420 320 C435 305, 465 305, 485 315 C470 340, 445 360, 425 365 Z" fill="#ffffff" opacity="0.9"></path>
<path d="M435 330 Q445 340, 458 335" fill="none" stroke="#cfd8dc" stroke-width="1.5"></path>
<path d="M445 345 Q455 355, 468 350" fill="none" stroke="#cfd8dc" stroke-width="1.5"></path>
<path d="M532 254 C540 250, 548 255, 545 264 C540 270, 532 268, 528 260 Z" fill="#37474f"></path>
</g>
<g stroke="#00acc1" stroke-width="2" stroke-linecap="round" opacity="0.3">
<line x1="760" y1="145" x2="785" y2="145"></line>
<line x1="775" y1="160" x2="810" y2="160"></line>
<line x1="280" y1="290" x2="330" y2="290"></line>
<line x1="260" y1="310" x2="305" y2="310"></line>
<g transform="translate(735, 105) scale(0.8)" stroke="#f57c00" fill="#f57c00" opacity="0.7">
<path d="M10 15 A 4 3 0 1 1 6 12 L 6 2 L 18 0 L 18 10 A 4 3 0 1 1 14 7 L 14 4 L 8 5 L 8 13" stroke-width="1.2"></path>
</g>
</g>
</svg>