465 lines
23 KiB
XML
465 lines
23 KiB
XML
<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> |