203 lines
12 KiB
XML
203 lines
12 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
|
<title>Realistic Pelican Riding Bicycle on Beach</title>
|
|
<desc>A realistic, lively illustration of a pelican riding a bicycle along the coastal beach</desc>
|
|
<metadata type="keywords">pelican, bicycle, beach, coastal, realistic, animation</metadata>
|
|
|
|
<defs>
|
|
<!-- Gradients for realistic shading -->
|
|
<linearGradient id="oceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#87CEEB" />
|
|
<stop offset="100%" stop-color="#1E90FF" />
|
|
</linearGradient>
|
|
<linearGradient id="pelicanBodyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#FFFFFF" />
|
|
<stop offset="100%" stop-color="#F0F0F0" />
|
|
</linearGradient>
|
|
<linearGradient id="pelicanWingGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#FFFFFF" />
|
|
<stop offset="100%" stop-color="#E0E0E0" />
|
|
</linearGradient>
|
|
<linearGradient id="pelicanPouchGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#FFA500" />
|
|
<stop offset="100%" stop-color="#FF8C00" />
|
|
</linearGradient>
|
|
<linearGradient id="bikeFrameGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#1E90FF" />
|
|
<stop offset="100%" stop-color="#1C86EE" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Sky background -->
|
|
<rect id="sky" class="sky" x="0" y="0" width="512" height="250" fill="#87CEEB" />
|
|
|
|
<!-- Sun with subtle pulsing animation -->
|
|
<circle id="sun" class="sun" cx="430" cy="80" r="40" fill="#FFD700">
|
|
<animate attributeName="r" values="40;42;40" dur="5s" repeatCount="indefinite" />
|
|
</circle>
|
|
|
|
<!-- Moving clouds -->
|
|
<g id="cloud1" class="cloud">
|
|
<ellipse cx="100" cy="90" rx="30" ry="20" fill="white" />
|
|
<ellipse cx="70" cy="90" rx="20" ry="15" fill="white" />
|
|
<ellipse cx="130" cy="90" rx="20" ry="15" fill="white" />
|
|
<animate attributeName="transform" type="translate" values="0,0; 20,0; 0,0" dur="10s" repeatCount="indefinite" />
|
|
</g>
|
|
|
|
<g id="cloud2" class="cloud">
|
|
<ellipse cx="350" cy="120" rx="35" ry="22" fill="white" />
|
|
<ellipse cx="320" cy="120" rx="22" ry="17" fill="white" />
|
|
<ellipse cx="380" cy="120" rx="22" ry="17" fill="white" />
|
|
<animate attributeName="transform" type="translate" values="0,0; -15,0; 0,0" dur="12s" repeatCount="indefinite" />
|
|
</g>
|
|
|
|
<!-- Ocean with depth gradient -->
|
|
<rect id="ocean" class="ocean" x="0" y="250" width="512" height="100" fill="url(#oceanGradient)" />
|
|
|
|
<!-- Animated waves at the shore -->
|
|
<g id="waves" class="waves">
|
|
<path d="M0,350 Q50,340 100,350 T200,350 T300,350 T400,350 T512,350 L512,360 L0,360 Z" fill="#87CEEB" opacity="0.7">
|
|
<animate attributeName="d" values="M0,350 Q50,340 100,350 T200,350 T300,350 T400,350 T512,350 L512,360 L0,360 Z; M0,350 Q50,360 100,350 T200,350 T300,350 T400,350 T512,350 L512,360 L0,360 Z; M0,350 Q50,340 100,350 T200,350 T300,350 T400,350 T512,350 L512,360 L0,360 Z" dur="3s" repeatCount="indefinite" />
|
|
</path>
|
|
</g>
|
|
|
|
<!-- Beach/Sand background -->
|
|
<rect id="beach" class="beach" x="0" y="350" width="512" height="162" fill="#F5DEB3" />
|
|
|
|
<!-- Shadow of the pelican and bike on the sand -->
|
|
<g id="shadow" opacity="0.3">
|
|
<ellipse cx="230" cy="430" rx="60" ry="10" fill="black" />
|
|
</g>
|
|
|
|
<!-- Bicycle with subtle movement and rotating wheels -->
|
|
<g id="bicycle" class="bicycle">
|
|
<animate attributeName="transform" type="translate" values="0,0; 2,0; 0,0" dur="0.5s" repeatCount="indefinite" />
|
|
|
|
<!-- Wheels -->
|
|
<circle id="backWheel" class="wheel" cx="180" cy="410" r="30" fill="none" stroke="black" stroke-width="3">
|
|
<animate attributeName="transform" attributeType="XML" type="rotate" from="0 180 410" to="360 180 410" dur="1s" repeatCount="indefinite" />
|
|
</circle>
|
|
<circle id="frontWheel" class="wheel" cx="280" cy="410" r="30" fill="none" stroke="black" stroke-width="3">
|
|
<animate attributeName="transform" attributeType="XML" type="rotate" from="0 280 410" to="360 280 410" dur="1s" repeatCount="indefinite" />
|
|
</circle>
|
|
|
|
<!-- Spokes -->
|
|
<g id="backSpokes" class="spokes">
|
|
<line x1="180" y1="380" x2="180" y2="440" stroke="black" stroke-width="1" />
|
|
<line x1="150" y1="410" x2="210" y2="410" stroke="black" stroke-width="1" />
|
|
<line x1="159" y1="389" x2="201" y2="431" stroke="black" stroke-width="1" />
|
|
<line x1="159" y1="431" x2="201" y2="389" stroke="black" stroke-width="1" />
|
|
<animate attributeName="transform" attributeType="XML" type="rotate" from="0 180 410" to="360 180 410" dur="1s" repeatCount="indefinite" />
|
|
</g>
|
|
|
|
<g id="frontSpokes" class="spokes">
|
|
<line x1="280" y1="380" x2="280" y2="440" stroke="black" stroke-width="1" />
|
|
<line x1="250" y1="410" x2="310" y2="410" stroke="black" stroke-width="1" />
|
|
<line x1="259" y1="389" x2="301" y2="431" stroke="black" stroke-width="1" />
|
|
<line x1="259" y1="431" x2="301" y2="389" stroke="black" stroke-width="1" />
|
|
<animate attributeName="transform" attributeType="XML" type="rotate" from="0 280 410" to="360 280 410" dur="1s" repeatCount="indefinite" />
|
|
</g>
|
|
|
|
<!-- Frame with gradient shading -->
|
|
<path id="bikeFrame" class="frame" d="M180,410 L230,350 L280,410 M230,350 L250,330 L290,370 L280,410" fill="none" stroke="url(#bikeFrameGradient)" stroke-width="5" />
|
|
|
|
<!-- Handlebars -->
|
|
<path id="handlebars" class="handlebars" d="M290,370 C300,360 310,370 305,380" fill="none" stroke="url(#bikeFrameGradient)" stroke-width="4" />
|
|
|
|
<!-- Seat -->
|
|
<ellipse id="seat" class="seat" cx="230" cy="350" rx="10" ry="5" fill="black" />
|
|
|
|
<!-- Pedals with rotation -->
|
|
<circle id="pedalCenter" class="pedalCenter" cx="230" cy="380" r="5" fill="url(#bikeFrameGradient)" />
|
|
<g id="pedals" class="pedals">
|
|
<line id="pedalArm1" x1="230" y1="380" x2="250" y2="395" stroke="url(#bikeFrameGradient)" stroke-width="3" />
|
|
<rect id="pedalFoot1" x="250" y="390" width="10" height="5" fill="black" />
|
|
<line id="pedalArm2" x1="230" y1="380" x2="210" y2="365" stroke="url(#bikeFrameGradient)" stroke-width="3" />
|
|
<rect id="pedalFoot2" x="200" y="360" width="10" height="5" fill="black" />
|
|
<animate attributeName="transform" attributeType="XML" type="rotate" from="0 230 380" to="360 230 380" dur="1s" repeatCount="indefinite" />
|
|
</g>
|
|
|
|
<!-- Chain -->
|
|
<path id="chain" class="chain" d="M180,410 C195,405 215,395 230,380 C215,365 195,395 180,410" fill="none" stroke="black" stroke-width="1" />
|
|
</g>
|
|
|
|
<!-- Pelican with realistic shading and animations -->
|
|
<g id="pelican" class="pelican">
|
|
<animate attributeName="transform" type="translate" values="0,0; 2,0; 0,0" dur="0.5s" repeatCount="indefinite" />
|
|
|
|
<!-- Body with gradient -->
|
|
<ellipse id="body" class="body" cx="230" cy="310" rx="40" ry="30" fill="url(#pelicanBodyGradient)" stroke="#333" stroke-width="1" />
|
|
|
|
<!-- Neck -->
|
|
<path id="neck" class="neck" d="M260,300 C270,290 275,280 270,270" fill="url(#pelicanBodyGradient)" stroke="#333" stroke-width="1" />
|
|
|
|
<!-- Head with subtle nodding animation -->
|
|
<ellipse id="head" class="head" cx="270" cy="265" rx="15" ry="12" fill="url(#pelicanBodyGradient)" stroke="#333" stroke-width="1">
|
|
<animate attributeName="transform" type="rotate" values="0,270,265; 10,270,265; 0,270,265; -10,270,265; 0,270,265" dur="5s" repeatCount="indefinite" />
|
|
</ellipse>
|
|
|
|
<!-- Beak -->
|
|
<path id="beak" class="beak" d="M270,265 L320,270 L270,275 Z" fill="url(#pelicanPouchGradient)" stroke="#333" stroke-width="1">
|
|
<animate attributeName="transform" type="rotate" values="0,270,265; 5,270,265; 0,270,265; -5,270,265; 0,270,265" dur="5s" repeatCount="indefinite" />
|
|
</path>
|
|
|
|
<!-- Eye with blinking animation -->
|
|
<circle id="eye" class="eye" cx="275" cy="262" r="3" fill="black">
|
|
<animate attributeName="r" values="3;2;3" dur="5s" repeatCount="indefinite" />
|
|
</circle>
|
|
|
|
<!-- Wing with flapping animation -->
|
|
<path id="wing" class="wing" d="M230,290 C220,270 200,260 190,270 C200,290 210,300 230,290" fill="url(#pelicanWingGradient)" stroke="#333" stroke-width="1">
|
|
<animate attributeName="d" values="M230,290 C220,270 200,260 190,270 C200,290 210,300 230,290; M230,290 C220,265 195,255 185,265 C195,285 210,300 230,290; M230,290 C220,270 200,260 190,270 C200,290 210,300 230,290" dur="5s" repeatCount="indefinite" />
|
|
</path>
|
|
|
|
<!-- Legs with pedaling animation -->
|
|
<path id="leftLeg" class="leg" d="M210,340 L210,380 L250,395" fill="none" stroke="url(#pelicanPouchGradient)" stroke-width="3">
|
|
<animate attributeName="d" values="M210,340 L210,380 L250,395; M210,340 L210,380 L210,395; M210,340 L210,380 L250,395" dur="1s" repeatCount="indefinite" />
|
|
</path>
|
|
|
|
<path id="rightLeg" class="leg" d="M240,340 L240,365 L210,365" fill="none" stroke="url(#pelicanPouchGradient)" stroke-width="3">
|
|
<animate attributeName="d" values="M240,340 L240,365 L210,365; M240,340 L240,365 L240,380; M240,340 L240,365 L210,365" dur="1s" repeatCount="indefinite" />
|
|
</path>
|
|
|
|
<!-- Feet -->
|
|
<path id="leftFoot" class="foot" d="M250,395 L255,395 L255,390 L250,390 Z" fill="url(#pelicanPouchGradient)" stroke="#333" stroke-width="1">
|
|
<animate attributeName="transform" type="rotate" values="0,250,395; 20,250,395; 0,250,395" dur="1s" repeatCount="indefinite" />
|
|
</path>
|
|
|
|
<path id="rightFoot" class="foot" d="M210,365 L215,365 L215,360 L210,360 Z" fill="url(#pelicanPouchGradient)" stroke="#333" stroke-width="1">
|
|
<animate attributeName="transform" type="rotate" values="0,210,365; -20,210,365; 0,210,365" dur="1s" repeatCount="indefinite" />
|
|
</path>
|
|
|
|
<!-- Pouch with subtle movement -->
|
|
<path id="pouch" class="pouch" d="M270,270 C280,290 290,300 270,310 C260,300 265,280 270,270" fill="url(#pelicanPouchGradient)" stroke="#333" stroke-width="1">
|
|
<animate attributeName="d" values="M270,270 C280,290 290,300 270,310 C260,300 265,280 270,270; M270,270 C285,290 295,300 275,310 C265,300 265,280 270,270; M270,270 C280,290 290,300 270,310 C260,300 265,280 270,270" dur="5s" repeatCount="indefinite" />
|
|
</path>
|
|
</g>
|
|
|
|
<!-- Fish jumping out of the pelican's pouch (playful beach detail) -->
|
|
<g id="fish" class="fish">
|
|
<path d="M275,290 L285,285 L290,290 L285,295 Z" fill="silver" stroke="#333" stroke-width="1">
|
|
<animate attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur="5s" repeatCount="indefinite" />
|
|
</path>
|
|
<circle cx="282" cy="290" r="1" fill="black">
|
|
<animate attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur="5s" repeatCount="indefinite" />
|
|
</circle>
|
|
<path d="M290,290 L295,288 L295,292 Z" fill="silver" stroke="#333" stroke-width="1">
|
|
<animate attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur="5s" repeatCount="indefinite" />
|
|
<animate attributeName="d" values="M290,290 L295,288 L295,292 Z; M290,290 L297,288 L297,292 Z; M290,290 L295,288 L295,292 Z" dur="0.5s" repeatCount="indefinite" />
|
|
</path>
|
|
</g>
|
|
|
|
<!-- Water droplets from the fish -->
|
|
<g id="waterDrops" class="waterDrops">
|
|
<circle id="drop1" cx="295" cy="280" r="1" fill="#87CEEB">
|
|
<animate attributeName="cy" values="280;290;280" dur="5s" repeatCount="indefinite" />
|
|
<animate attributeName="opacity" values="1;0;1" dur="5s" repeatCount="indefinite" />
|
|
</circle>
|
|
<circle id="drop2" cx="300" cy="285" r="1" fill="#87CEEB">
|
|
<animate attributeName="cy" values="285;295;285" dur="5s" repeatCount="indefinite" />
|
|
<animate attributeName="opacity" values="1;0;1" dur="5s" repeatCount="indefinite" />
|
|
</circle>
|
|
</g>
|
|
</svg> |