323 lines
15 KiB
XML
323 lines
15 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="1200" height="800">
|
|
<defs>
|
|
<!-- Sky gradient -->
|
|
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#4facfe"/>
|
|
<stop offset="55%" stop-color="#b2f0ff"/>
|
|
<stop offset="100%" stop-color="#dff9fb"/>
|
|
</linearGradient>
|
|
|
|
<!-- Ocean gradient -->
|
|
<linearGradient id="seaGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#006994"/>
|
|
<stop offset="40%" stop-color="#0096c7"/>
|
|
<stop offset="100%" stop-color="#48cae4"/>
|
|
</linearGradient>
|
|
|
|
<!-- Sand gradient -->
|
|
<linearGradient id="sandGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#f6e0b5"/>
|
|
<stop offset="100%" stop-color="#e6c88a"/>
|
|
</linearGradient>
|
|
|
|
<!-- Pelican body gradient -->
|
|
<radialGradient id="bodyGrad" cx="45%" cy="40%" r="65%">
|
|
<stop offset="0%" stop-color="#fffdf5"/>
|
|
<stop offset="70%" stop-color="#f3e8cf"/>
|
|
<stop offset="100%" stop-color="#dccba6"/>
|
|
</radialGradient>
|
|
|
|
<!-- Wing gradient -->
|
|
<linearGradient id="wingGrad" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#ffffff"/>
|
|
<stop offset="60%" stop-color="#eaddc5"/>
|
|
<stop offset="100%" stop-color="#c7b795"/>
|
|
</linearGradient>
|
|
|
|
<!-- Beak gradient -->
|
|
<linearGradient id="beakGrad" x1="0" y1="0" x2="1" y2="0.3">
|
|
<stop offset="0%" stop-color="#ff8c42"/>
|
|
<stop offset="50%" stop-color="#ff7043"/>
|
|
<stop offset="100%" stop-color="#ff5722"/>
|
|
</linearGradient>
|
|
|
|
<!-- Pouch gradient -->
|
|
<radialGradient id="pouchGrad" cx="40%" cy="35%" r="60%">
|
|
<stop offset="0%" stop-color="#ffe082"/>
|
|
<stop offset="60%" stop-color="#ffcc80"/>
|
|
<stop offset="100%" stop-color="#ffab91"/>
|
|
</radialGradient>
|
|
|
|
<!-- Sun gradient -->
|
|
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#fff9c4"/>
|
|
<stop offset="55%" stop-color="#ffeb3b"/>
|
|
<stop offset="100%" stop-color="#fdd835" stop-opacity="0.85"/>
|
|
</radialGradient>
|
|
|
|
<!-- Bike frame gradient -->
|
|
<linearGradient id="bikeGrad" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#26c6da"/>
|
|
<stop offset="50%" stop-color="#00acc1"/>
|
|
<stop offset="100%" stop-color="#00838f"/>
|
|
</linearGradient>
|
|
|
|
<!-- Chrome gradient -->
|
|
<linearGradient id="chromeGrad" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#cfd8dc"/>
|
|
<stop offset="30%" stop-color="#ffffff"/>
|
|
<stop offset="60%" stop-color="#90a4ae"/>
|
|
<stop offset="100%" stop-color="#607d8b"/>
|
|
</linearGradient>
|
|
|
|
<!-- Soft drop shadow -->
|
|
<filter id="softShadow" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
|
|
<feOffset dx="3" dy="5" result="offsetblur"/>
|
|
<feComponentTransfer>
|
|
<feFuncA type="linear" slope="0.25"/>
|
|
</feComponentTransfer>
|
|
<feMerge>
|
|
<feMergeNode in="offsetblur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<!-- Wheel shadow -->
|
|
<filter id="wheelBlur" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
|
|
<feOffset dx="2" dy="3"/>
|
|
<feComponentTransfer>
|
|
<feFuncA type="linear" slope="0.2"/>
|
|
</feComponentTransfer>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Sky -->
|
|
<rect width="1200" height="800" fill="url(#skyGrad)"/>
|
|
|
|
<!-- Sun -->
|
|
<circle cx="980" cy="120" r="70" fill="url(#sunGrad)">
|
|
<animate attributeName="r" values="70;74;70" dur="5s" repeatCount="indefinite"/>
|
|
<animate attributeName="opacity" values="0.95;1;0.95" dur="5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- Clouds drifting -->
|
|
<g opacity="0.9" fill="#ffffff">
|
|
<path d="M160,140 Q185,100 230,120 Q260,95 300,125 Q340,110 370,145 Q395,170 360,175 L190,175 Q150,175 160,140 Z">
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;40,0;0,0" dur="18s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M680,90 Q705,60 745,75 Q775,55 810,80 Q845,70 870,100 Q890,125 855,130 L695,130 Q665,130 680,90 Z" opacity="0.85">
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;-30,0;0,0" dur="22s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M90,260 Q115,230 155,245 Q185,225 220,250 Q255,240 280,270 Q300,295 265,300 L105,300 Q75,300 90,260 Z" opacity="0.75">
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;25,0;0,0" dur="25s" repeatCount="indefinite"/>
|
|
</path>
|
|
</g>
|
|
|
|
<!-- Distant sea -->
|
|
<rect x="0" y="340" width="1200" height="260" fill="url(#seaGrad)"/>
|
|
|
|
<!-- Horizon shimmer -->
|
|
<line x1="0" y1="340" x2="1200" y2="340" stroke="#ffffff" stroke-opacity="0.4" stroke-width="2"/>
|
|
|
|
<!-- Animated waves -->
|
|
<g fill="none" stroke="#ffffff" stroke-linecap="round" opacity="0.7">
|
|
<path d="M80,390 Q120,375 160,390 T240,390 T320,390" stroke-width="3">
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;60,0;0,0" dur="4s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M420,430 Q460,415 500,430 T580,430 T660,430" stroke-width="3.5">
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;-50,0;0,0" dur="5s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M780,400 Q820,385 860,400 T940,400 T1020,400" stroke-width="3">
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;70,0;0,0" dur="4.5s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M250,480 Q290,465 330,480 T410,480 T490,480" stroke-width="2.5" opacity="0.5">
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;-40,0;0,0" dur="6s" repeatCount="indefinite"/>
|
|
</path>
|
|
<path d="M880,460 Q920,445 960,460 T1040,460 T1120,460" stroke-width="2.5" opacity="0.55">
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;55,0;0,0" dur="5.5s" repeatCount="indefinite"/>
|
|
</path>
|
|
</g>
|
|
|
|
<!-- Beach / sand -->
|
|
<path d="M0,520 C300,500 700,500 1200,540 L1200,800 L0,800 Z" fill="url(#sandGrad)"/>
|
|
|
|
<!-- Wet sand edge -->
|
|
<path d="M0,540 C300,520 700,520 1200,560 L1200,590 C700,550 300,550 0,570 Z" fill="#d4b483" opacity="0.6"/>
|
|
|
|
<!-- Small shells -->
|
|
<g fill="#fff8e1" stroke="#d7ccc8" stroke-width="1">
|
|
<ellipse cx="210" cy="680" rx="10" ry="6" transform="rotate(-15 210 680)"/>
|
|
<path d="M200,680 L220,680 M205,674 L215,686 M215,674 L205,686" stroke="#bcaaa4"/>
|
|
<ellipse cx="950" cy="720" rx="8" ry="5" transform="rotate(20 950 720)"/>
|
|
</g>
|
|
|
|
<!-- Bike and pelican shadow -->
|
|
<ellipse cx="590" cy="665" rx="180" ry="22" fill="#8d6e63" opacity="0.35"/>
|
|
|
|
<!-- ================= BICYCLE ================= -->
|
|
<g id="bicycle">
|
|
<!-- Rear wheel -->
|
|
<g transform="translate(430,620)">
|
|
<circle r="90" fill="none" stroke="#263238" stroke-width="12" filter="url(#wheelBlur)"/>
|
|
<circle r="90" fill="none" stroke="#37474f" stroke-width="10"/>
|
|
<circle r="80" fill="none" stroke="url(#chromeGrad)" stroke-width="4"/>
|
|
<circle r="8" fill="#455a64"/>
|
|
<!-- Spokes / rim pattern (simplified) -->
|
|
<g stroke="#cfd8dc" stroke-width="1.5" opacity="0.85">
|
|
<line x1="0" y1="-80" x2="0" y2="80"/>
|
|
<line x1="-69" y1="-40" x2="69" y2="40"/>
|
|
<line x1="-69" y1="40" x2="69" y2="-40"/>
|
|
<line x1="-40" y1="-69" x2="40" y2="69"/>
|
|
<line x1="-40" y1="69" x2="40" y2="-69"/>
|
|
</g>
|
|
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="-360 0 0" dur="1.2s" repeatCount="indefinite" additive="sum"/>
|
|
</g>
|
|
|
|
<!-- Front wheel -->
|
|
<g transform="translate(750,620)">
|
|
<circle r="90" fill="none" stroke="#263238" stroke-width="12" filter="url(#wheelBlur)"/>
|
|
<circle r="90" fill="none" stroke="#37474f" stroke-width="10"/>
|
|
<circle r="80" fill="none" stroke="url(#chromeGrad)" stroke-width="4"/>
|
|
<circle r="8" fill="#455a64"/>
|
|
<g stroke="#cfd8dc" stroke-width="1.5" opacity="0.85">
|
|
<line x1="0" y1="-80" x2="0" y2="80"/>
|
|
<line x1="-69" y1="-40" x2="69" y2="40"/>
|
|
<line x1="-69" y1="40" x2="69" y2="-40"/>
|
|
<line x1="-40" y1="-69" x2="40" y2="69"/>
|
|
<line x1="-40" y1="69" x2="40" y2="-69"/>
|
|
</g>
|
|
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="-360 0 0" dur="1.2s" repeatCount="indefinite" additive="sum"/>
|
|
</g>
|
|
|
|
<!-- Frame -->
|
|
<g stroke-linecap="round" stroke-linejoin="round" filter="url(#softShadow)">
|
|
<!-- Chain stays -->
|
|
<line x1="430" y1="620" x2="520" y2="510" stroke="#00838f" stroke-width="8"/>
|
|
<!-- Seat stays -->
|
|
<line x1="430" y1="620" x2="505" y2="495" stroke="#00838f" stroke-width="8"/>
|
|
<!-- Seat tube -->
|
|
<line x1="520" y1="620" x2="505" y2="495" stroke="url(#bikeGrad)" stroke-width="10"/>
|
|
<!-- Down tube -->
|
|
<line x1="520" y1="620" x2="700" y2="500" stroke="url(#bikeGrad)" stroke-width="11"/>
|
|
<!-- Top tube -->
|
|
<line x1="505" y1="495" x2="700" y2="500" stroke="url(#bikeGrad)" stroke-width="10"/>
|
|
<!-- Head tube -->
|
|
<line x1="685" y1="470" x2="715" y2="530" stroke="#006064" stroke-width="12"/>
|
|
<!-- Fork -->
|
|
<line x1="700" y1="500" x2="750" y2="620" stroke="url(#bikeGrad)" stroke-width="9"/>
|
|
<!-- Chain ring / crank area -->
|
|
<circle cx="520" cy="620" r="18" fill="#455a64" stroke="#263238" stroke-width="3"/>
|
|
<circle cx="520" cy="620" r="7" fill="#90a4ae"/>
|
|
</g>
|
|
|
|
<!-- Seat -->
|
|
<path d="M470,495 Q470,480 500,482 L540,485 Q555,488 550,500 L500,505 Q475,505 470,495 Z" fill="#5d4037" stroke="#3e2723" stroke-width="2"/>
|
|
<line x1="510" y1="500" x2="520" y2="555" stroke="#78909c" stroke-width="7"/>
|
|
|
|
<!-- Handlebar -->
|
|
<path d="M705,485 Q740,470 770,470 Q790,470 790,490 L790,505" fill="none" stroke="#37474f" stroke-width="8" stroke-linecap="round"/>
|
|
<circle cx="790" cy="505" r="6" fill="#263238"/>
|
|
|
|
<!-- Pedals and crank arms -->
|
|
<g>
|
|
<!-- Right crank (forward pedal) -->
|
|
<line x1="520" y1="620" x2="575" y2="650" stroke="#78909c" stroke-width="7" stroke-linecap="round"/>
|
|
<rect x="560" y="640" width="30" height="12" rx="3" fill="#37474f"/>
|
|
<!-- Left crank (rear pedal) -->
|
|
<line x1="520" y1="620" x2="465" y2="590" stroke="#78909c" stroke-width="7" stroke-linecap="round"/>
|
|
<rect x="450" y="580" width="30" height="12" rx="3" fill="#37474f"/>
|
|
<animateTransform attributeName="transform" type="rotate" from="0 520 620" to="360 520 620" dur="1.2s" repeatCount="indefinite"/>
|
|
</g>
|
|
|
|
<!-- Chain -->
|
|
<path d="M430,620 Q460,655 520,655 Q580,655 520,620" fill="none" stroke="#455a64" stroke-width="3" opacity="0.9"/>
|
|
</g>
|
|
|
|
<!-- ================= PELICAN ================= -->
|
|
<g id="pelican" filter="url(#softShadow)">
|
|
<!-- Left leg (behind body, reaching rear pedal) -->
|
|
<path d="M505,560 Q470,585 465,590 L455,600" fill="none" stroke="#ffab91" stroke-width="14" stroke-linecap="round"/>
|
|
<!-- Webbed left foot on pedal -->
|
|
<path d="M450,585 L485,585 L480,600 L445,600 Z" fill="#ff8a65" stroke="#e64a19" stroke-width="2"/>
|
|
|
|
<!-- Tail feathers -->
|
|
<path d="M470,520 Q440,530 435,555 Q460,560 490,550 Z" fill="#c7b795"/>
|
|
|
|
<!-- Main body -->
|
|
<ellipse cx="540" cy="520" rx="90" ry="70" fill="url(#bodyGrad)" transform="rotate(-10 540 520)"/>
|
|
|
|
<!-- Neck and head -->
|
|
<path d="M585,470 Q600,430 605,390 Q610,350 640,340 Q670,335 685,360 Q695,380 690,400 Q680,420 650,425 Q630,428 615,450 Q600,480 585,470 Z" fill="url(#bodyGrad)"/>
|
|
|
|
<!-- Crest feathers -->
|
|
<path d="M645,338 Q640,320 650,310 Q660,325 665,340" fill="#d7ccc8" stroke="#a1887f" stroke-width="1"/>
|
|
<path d="M660,340 Q665,318 678,315 Q680,332 675,345" fill="#d7ccc8" stroke="#a1887f" stroke-width="1"/>
|
|
|
|
<!-- Beak -->
|
|
<g>
|
|
<!-- Upper mandible -->
|
|
<path d="M675,370 Q740,375 790,390 Q800,395 790,405 Q730,405 675,395 Z" fill="url(#beakGrad)"/>
|
|
<!-- Lower mandible / pouch -->
|
|
<path d="M675,395 Q730,405 790,405 Q800,425 765,440 Q720,450 675,420 Z" fill="url(#pouchGrad)"/>
|
|
<!-- Beak ridge detail -->
|
|
<path d="M685,382 Q730,385 775,395" fill="none" stroke="#d84315" stroke-width="2" opacity="0.6"/>
|
|
</g>
|
|
|
|
<!-- Eye -->
|
|
<circle cx="655" cy="365" r="7" fill="#212121"/>
|
|
<circle cx="657" cy="363" r="2.5" fill="#ffffff"/>
|
|
<!-- Eyelid / brow -->
|
|
<path d="M646,358 Q655,352 665,358" fill="none" stroke="#8d6e63" stroke-width="2" stroke-linecap="round"/>
|
|
|
|
<!-- Wing (folded, holding handlebar) -->
|
|
<path d="M540,470 Q500,490 500,530 Q530,560 590,545 Q630,535 620,500 Q600,470 540,470 Z" fill="url(#wingGrad)" stroke="#c7b795" stroke-width="1"/>
|
|
<!-- Wing feather details -->
|
|
<g fill="none" stroke="#b0a080" stroke-width="1.5" opacity="0.7">
|
|
<path d="M525,500 Q560,510 595,505"/>
|
|
<path d="M520,515 Q560,525 600,520"/>
|
|
<path d="M525,530 Q565,540 605,535"/>
|
|
</g>
|
|
|
|
<!-- Right wing/arm reaching to handlebar -->
|
|
<path d="M610,470 Q660,465 700,475 Q745,480 785,490" fill="none" stroke="#f3e8cf" stroke-width="18" stroke-linecap="round"/>
|
|
<!-- Wing tip feathers on handlebar -->
|
|
<path d="M775,485 L800,500 L790,515 Z" fill="#eaddc5"/>
|
|
|
|
<!-- Right leg (forward pedal) -->
|
|
<path d="M545,565 Q560,600 575,640" fill="none" stroke="#ffab91" stroke-width="14" stroke-linecap="round"/>
|
|
<!-- Webbed right foot on pedal -->
|
|
<path d="M560,635 L595,635 L590,650 L555,650 Z" fill="#ff8a65" stroke="#e64a19" stroke-width="2"/>
|
|
|
|
<!-- Soft body shading -->
|
|
<ellipse cx="515" cy="505" rx="35" ry="20" fill="#ffffff" opacity="0.35" transform="rotate(-20 515 505)"/>
|
|
</g>
|
|
|
|
<!-- Speed / motion lines -->
|
|
<g stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.45">
|
|
<line x1="150" y1="620" x2="280" y2="620">
|
|
<animate attributeName="x1" values="150;220;150" dur="0.8s" repeatCount="indefinite"/>
|
|
<animate attributeName="x2" values="280;350;280" dur="0.8s" repeatCount="indefinite"/>
|
|
</line>
|
|
<line x1="120" y1="660" x2="250" y2="660" stroke-width="2">
|
|
<animate attributeName="x1" values="120;190;120" dur="0.9s" repeatCount="indefinite"/>
|
|
<animate attributeName="x2" values="250;320;250" dur="0.9s" repeatCount="indefinite"/>
|
|
</line>
|
|
<line x1="180" y1="580" x2="260" y2="580" stroke-width="2.5">
|
|
<animate attributeName="x1" values="180;240;180" dur="0.7s" repeatCount="indefinite"/>
|
|
<animate attributeName="x2" values="260;320;260" dur="0.7s" repeatCount="indefinite"/>
|
|
</line>
|
|
</g>
|
|
|
|
<!-- Seagulls in distance -->
|
|
<g stroke="#546e7a" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.7">
|
|
<path d="M180,220 Q195,210 210,220" transform="scale(0.8) translate(40,60)">
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;15,-5;0,0" dur="8s" repeatCount="indefinite" additive="sum"/>
|
|
</path>
|
|
<path d="M260,180 Q275,170 290,180" transform="scale(0.6) translate(120,40)">
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;20,-8;0,0" dur="10s" repeatCount="indefinite" additive="sum"/>
|
|
</path>
|
|
</g>
|
|
</svg>
|