Generate an SVG of a pelican riding a bicycle
Designing a Pelican on a Bicycle in SVG
The user wants an SVG of a pelican riding a bicycle. This is a creative task that requires generating SVG code.
I need to create an SVG that shows:
- A pelican (large water bird with big beak/pouch)
- Riding a bicycle (needs wheels, frame, handlebars, seat, pedals)
- The composition should look like the pelican is actually riding it
I should create a visually appealing, somewhat whimsical SVG with:
- A pelican character positioned on the bike
- The bicycle structure
- Maybe some simple background elements
- Good use of colors and shapes
Let me design this step by step:
- Pelican body: White/light gray with large beak
- Bicycle: Classic style with two wheels, frame, handlebars
- Position: Pelican sitting on seat, wings on handlebars, feet on pedals
- Add some personality/movement
I'll write SVG code with proper paths and shapes. Using a viewBox like 800x600 would be good for detail. I'll use clean vector-style illustration with gradients for depth.
Since this is a creative generation task and doesn't require external data, I'll proceed directly with generating the SVG code in an HTML wrapper for better rendering in the response.
I'll create a whimsical SVG illustration of a pelican riding a bicycle for you.
HTML
预览
复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pelican on Bicycle</title>
<style>
body {
margin: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
.container {
position: relative;
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
svg {
display: block;
max-width: 90vw;
max-height: 80vh;
}
.title {
text-align: center;
margin-top: 20px;
color: #333;
font-size: 24px;
font-weight: 600;
letter-spacing: 2px;
}
</style>
</head>
<body>
<div class="container">
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" />
</linearGradient>
<linearGradient id="groundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#90EE90;stop-opacity:1" />
<stop offset="100%" style="stop-color:#228B22;stop-opacity:1" />
</linearGradient>
<linearGradient id="bikeFrame" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FF6B6B;stop-opacity:1" />
<stop offset="100%" style="stop-color:#C92A2A;stop-opacity:1" />
</linearGradient>
<linearGradient id="pelicanBody" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
<stop offset="100%" style="stop-color:#E8E8E8;stop-opacity:1" />
</linearGradient>
<linearGradient id="beakGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FFD93D;stop-opacity:1" />
<stop offset="50%" style="stop-color:#FFA500;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF8C00;stop-opacity:1" />
</linearGradient>
<!-- Wheel spokes pattern -->
<pattern id="spokes" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<line x1="50" y1="50" x2="50" y2="10" stroke="#ccc" stroke-width="2"/>
<line x1="50" y1="50" x2="85" y2="30" stroke="#ccc" stroke-width="2"/>
<line x1="50" y1="50" x2="85" y2="70" stroke="#ccc" stroke-width="2"/>
<line x1="50" y1="50" x2="50" y2="90" stroke="#ccc" stroke-width="2"/>
<line x1="50" y1="50" x2="15" y2="70" stroke="#ccc" stroke-width="2"/>
<line x1="50" y1="50" x2="15" y2="30" stroke="#ccc" stroke-width="2"/>
</pattern>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="4" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.3"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="800" height="400" fill="url(#skyGradient)" rx="10"/>
<rect x="0" y="400" width="800" height="200" fill="url(#groundGradient)" rx="10"/>
<!-- Decorative clouds -->
<g opacity="0.8">
<ellipse cx="150" cy="100" rx="40" ry="25" fill="white"/>
<ellipse cx="180" cy="110" rx="35" ry="20" fill="white"/>
<ellipse cx="120" cy="110" rx="30" ry="20" fill="white"/>
<ellipse cx="650" cy="80" rx="45" ry="28" fill="white"/>
<ellipse cx="680" cy="90" rx="40" ry="22" fill="white"/>
<ellipse cx="620" cy="90" rx="35" ry="22" fill="white"/>
</g>
<!-- Shadow under bike -->
<ellipse cx="400" cy="480" rx="200" ry="20" fill="rgba(0,0,0,0.2)"/>
<!-- Back Wheel -->
<g transform="translate(280, 420)">
<circle cx="0" cy="0" r="65" fill="none" stroke="#333" stroke-width="8"/>
<circle cx="0" cy="0" r="61" fill="url(#spokes)" opacity="0.5"/>
<circle cx="0" cy="0" r="10" fill="#666"/>
<!-- Tire -->
<circle cx="0" cy="0" r="65" fill="none" stroke="#222" stroke-width="4" stroke-dasharray="10,5"/>
</g>
<!-- Front Wheel -->
<g transform="translate(520, 420)">
<circle cx="0" cy="0" r="65" fill="none" stroke="#333" stroke-width="8"/>
<circle cx="0" cy="0" r="61" fill="url(#spokes)" opacity="0.5"/>
<circle cx="0" cy="0" r="10" fill="#666"/>
<!-- Tire -->
<circle cx="0" cy="0" r="65" fill="none" stroke="#222" stroke-width="4" stroke-dasharray="10,5"/>
<!-- Motion lines -->
<line x1="-80" y1="0" x2="-90" y2="0" stroke="#333" stroke-width="3" stroke-linecap="round"/>
<line x1="-75" y1="-20" x2="-85" y2="-25" stroke="#333" stroke-width="3" stroke-linecap="round"/>
<line x1="-75" y1="20" x2="-85" y2="25" stroke="#333" stroke-width="3" stroke-linecap="round"/>
</g>
<!-- Bike Frame -->
<path d="M280,420 L350,350 L450,350 L520,420"
fill="none" stroke="url(#bikeFrame)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M350,350 L380,420 L280,420"
fill="none" stroke="url(#bikeFrame)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M450,350 L440,280"
fill="none" stroke="url(#bikeFrame)" stroke-width="8" stroke-linecap="round"/>
<path d="M520,420 L520,280"
fill="none" stroke="#666" stroke-width="6" stroke-linecap="round"/>
<!-- Handlebars -->
<path d="M440,280 L480,280 L500,260"
fill="none" stroke="#C0C0C0" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="500" cy="260" r="6" fill="#333"/>
<!-- Seat -->
<path d="M350,350 L345,320 Q340,310 360,310 L380,310 Q390,310 385,320 L380,350"
fill="#8B4513" stroke="#8B4513" stroke-width="8" stroke-linecap="round"/>
<ellipse cx="365" cy="315" rx="20" ry="8" fill="#A0522D"/>
<!-- Pedals and Chain -->
<g transform="translate(380, 420)">
<circle cx="0" cy="0" r="15" fill="#444" stroke="#666" stroke-width="3"/>
<ellipse cx="-25" cy="15" rx="12" ry="6" fill="#333" transform="rotate(-20)"/>
<rect x="-35" y="10" width="20" height="8" fill="#888" transform="rotate(-20)"/>
</g>
<!-- PELICAN -->
<g filter="url(#shadow)" transform="translate(360, 240)">
<!-- Tail feathers -->
<path d="M-60,80 Q-80,85 -75,95 Q-65,100 -50,90" fill="#F5F5F5" stroke="#ddd" stroke-width="2"/>
<path d="M-60,85 Q-85,90 -80,100 Q-70,105 -55,95" fill="#FFF" stroke="#ddd" stroke-width="2"/>
<!-- Main body -->
<ellipse cx="0" cy="50" rx="55" ry="65" fill="url(#pelicanBody)"/>
<!-- Wing -->
<path d="M-20,30 Q-40,40 -30,80 Q-10,75 0,60" fill="#F0F0F0" stroke="#ddd" stroke-width="2"/>
<path d="M-25,40 Q-35,50 -28,70" fill="none" stroke="#ddd" stroke-width="2"/>
<!-- Neck -->
<path d="M30,20 Q40,-20 50,-40 Q55,-60 45,-70" fill="none" stroke="url(#pelicanBody)" stroke-width="28" stroke-linecap="round"/>
<!-- Head -->
<circle cx="45" cy="-75" r="20" fill="url(#pelicanBody)"/>
<!-- Eye -->
<circle cx="52" cy="-80" r="4" fill="#333"/>
<circle cx="53" cy="-81" r="1.5" fill="white"/>
<!-- The Big Beak -->
<g transform="translate(60, -70) rotate(10)">
<!-- Upper mandible -->
<path d="M0,0 Q30,-5 70,0 Q75,2 70,8 Q30,10 0,5 Z" fill="url(#beakGradient)"/>
<!-- Lower mandible/pouch -->
<path d="M0,5 Q35,8 65,12 Q60,35 40,32 Q20,30 5,8 Z" fill="#FFE4B5" stroke="#FFD700" stroke-width="1"/>
<!-- Pouch texture lines -->
<path d="M15,15 Q35,18 50,16" fill="none" stroke="#DEB887" stroke-width="1" opacity="0.6"/>
<path d="M18,22 Q38,25 48,22" fill="none" stroke="#DEB887" stroke-width="1" opacity="0.6"/>
<path d="M22,28 Q38,30 45,28" fill="none" stroke="#DEB887" stroke-width="1" opacity="0.6"/>
</g>
<!-- Left leg (back) -->
<path d="M-10,100 L-15,130 L-25,145" fill="none" stroke="#FFA500" stroke-width="6" stroke-linecap="round"/>
<path d="M-25,145 L-35,148 M-25,145 L-28,152 M-25,145 L-18,152" fill="none" stroke="#FFA500" stroke-width="4" stroke-linecap="round"/>
<!-- Right leg (front, on pedal) -->
<path d="M10,100 L20,125 L25,145" fill="none" stroke="#FFA500" stroke-width="6" stroke-linecap="round"/>
<!-- Right foot on pedal -->
<path d="M25,145 L15,148 M25,145 L22,152 M25,145 L32,150" fill="none" stroke="#FFA500" stroke-width="4" stroke-linecap="round"/>
<!-- Wing position on handlebars -->
<ellipse cx="45" cy="30" rx="8" ry="25" fill="#F5F5F5" transform="rotate(-30)"/>
<ellipse cx="140" cy="-10" rx="8" ry="20" fill="#F5F5F5" transform="rotate(-20)"/>
</g>
<!-- Wind lines for motion -->
<g opacity="0.4">
<line x1="600" y1="300" x2="650" y2="300" stroke="#333" stroke-width="3" stroke-linecap="round"/>
<line x1="620" y1="320" x2="660" y2="320" stroke="#333" stroke-width="2" stroke-linecap="round"/>
<line x1="610" y1="250" x2="640" y2="250" stroke="#333" stroke-width="2" stroke-linecap="round"/>
</g>
<!-- Small details: bell -->
<circle cx="490" cy="265" r="5" fill="gold" stroke="#DAA520" stroke-width="2"/>
<!-- Speed lines near wheels -->
<g opacity="0.3">
<line x1="200" y1="400" x2="170" y2="400" stroke="#333" stroke-width="3" stroke-linecap="round"/>
<line x1="590" y1="380" x2="630" y2="370" stroke="#333" stroke-width="3" stroke-linecap="round"/>
</g>
</svg>
<div class="title">PELICAN EXPRESS</div>
</div>
</body>
</html>This SVG features:
Visual Elements:
- A charming pelican with characteristic large orange beak and pouch, white plumage, and long orange legs
- A classic red bicycle with detailed spokes, chain, and pedals
- The pelican is positioned dynamically, with one wing on the handlebars and feet on the pedals
- Background includes a gradient sky, green grass, and fluffy clouds
Technical Details:
- Uses SVG gradients for depth and dimensionality on the pelican's body, beak, and sky
- Includes motion lines to suggest movement
- Drop shadows for realistic grounding
- Responsive design that scales to fit viewport
- Clean paths with stroke-linecap/linejoin for smooth connections
- Golden bell detail on handlebars for whimsy
You can save this as an
.html file to view it in any browser, or extract just the <svg> portion (lines 46-156) to use as a standalone SVG file.