a pelican on a bike with traffic
Prompt
create an SVG of a pelican on a bike with traffic
A system prompt was added to support web rendering
```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 Bike in Traffic</title>
</head>
<body style="margin: 0; padding: 20px; background: linear-gradient(to bottom, #87CEEB, #E0F6FF);">
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<!-- Sky and ground -->
<rect x="0" y="0" width="800" height="400" fill="url(#skyGradient)"/>
<rect x="0" y="400" width="800" height="200" fill="#404040"/>
<!-- Gradients -->
<defs>
<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="carGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF6B6B;stop-opacity:1" />
<stop offset="100%" style="stop-color:#CC5555;stop-opacity:1" />
</linearGradient>
<linearGradient id="carGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4ECDC4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#3BA99C;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Road markings -->
<rect x="0" y="450" width="100" height="6" fill="#FFFF00"/>
<rect x="150" y="450" width="100" height="6" fill="#FFFF00"/>
<rect x="300" y="450" width="100" height="6" fill="#FFFF00"/>
<rect x="450" y="450" width="100" height="6" fill="#FFFF00"/>
<rect x="600" y="450" width="100" height="6" fill="#FFFF00"/>
<!-- Background cars -->
<!-- Car 1 (left side) -->
<g transform="translate(50, 380)">
<rect x="0" y="20" width="100" height="40" rx="8" fill="url(#carGradient1)"/>
<rect x="10" y="10" width="80" height="30" rx="5" fill="#FFE4E1"/>
<circle cx="20" cy="65" r="12" fill="#333"/>
<circle cx="80" cy="65" r="12" fill="#333"/>
<circle cx="20" cy="65" r="8" fill="#666"/>
<circle cx="80" cy="65" r="8" fill="#666"/>
</g>
<!-- Car 2 (right side, behind pelican) -->
<g transform="translate(600, 370)">
<rect x="0" y="20" width="120" height="45" rx="10" fill="url(#carGradient2)"/>
<rect x="15" y="10" width="90" height="35" rx="6" fill="#E6F7FF"/>
<circle cx="25" cy="70" r="15" fill="#333"/>
<circle cx="95" cy="70" r="15" fill="#333"/>
<circle cx="25" cy="70" r="10" fill="#666"/>
<circle cx="95" cy="70" r="10" fill="#666"/>
</g>
<!-- Pelican on bike (main subject) -->
<g transform="translate(350, 280)">
<!-- Bike frame -->
<path d="M 30 80 L 80 80 L 100 40 L 80 80 L 120 60" stroke="#2C3E50" stroke-width="4" fill="none"/>
<path d="M 60 80 L 60 60" stroke="#2C3E50" stroke-width="4"/>
<path d="M 60 60 L 80 40" stroke="#2C3E50" stroke-width="4"/>
<!-- Bike wheels -->
<circle cx="30" cy="100" r="25" fill="none" stroke="#2C3E50" stroke-width="3"/>
<circle cx="120" cy="100" r="25" fill="none" stroke="#2C3E50" stroke-width="3"/>
<!-- Wheel spokes -->
<g stroke="#2C3E50" stroke-width="1">
<line x1="30" y1="75" x2="30" y2="125"/>
<line x1="5" y1="100" x2="55" y2="100"/>
<line x1="120" y1="75" x2="120" y2="125"/>
<line x1="95" y1="100" x2="145" y2="100"/>
</g>
<!-- Bike seat -->
<ellipse cx="85" cy="40" rx="15" ry="5" fill="#8B4513"/>
<!-- Bike handlebars -->
<path d="M 100 40 L 110 35" stroke="#2C3E50" stroke-width="3"/>
<circle cx="115" cy="32" r="3" fill="#2C3E50"/>
<!-- Pedals -->
<circle cx="60" cy="80" r="3" fill="#2C3E50"/>
<!-- Pelican body -->
<ellipse cx="75" cy="30" rx="20" ry="35" fill="#F5F5DC" transform="rotate(-10 75 30)"/>
<!-- Pelican neck -->
<ellipse cx="85" cy="-5" rx="8" ry="25" fill="#F5F5DC" transform="rotate(15 85 -5)"/>
<!-- Pelican head -->
<ellipse cx="95" cy="-25" rx="12" ry="15" fill="#F5F5DC"/>
<!-- Pelican beak -->
<path d="M 105 -25 L 140 -20 L 138 -15 L 140 -10 L 105 -15 Z" fill="#FFA500"/>
<path d="M 105 -25 L 140 -30 L 138 -25 L 105 -20 Z" fill="#FF8C00"/>
<!-- Pelican eye -->
<circle cx="100" cy="-30" r="3" fill="#000"/>
<circle cx="101" cy="-31" r="1" fill="#FFF"/>
<!-- Pelican wings -->
<ellipse cx="65" cy="20" rx="15" ry="25" fill="#E5E5DC" transform="rotate(-20 65 20)"/>
<ellipse cx="85" cy="25" rx="12" ry="20" fill="#E5E5DC" transform="rotate(10 85 25)"/>
<!-- Pelican legs on pedals -->
<line x1="70" y1="50" x2="60" y2="77" stroke="#FFA500" stroke-width="3"/>
<line x1="80" y1="50" x2="62" y2="83" stroke="#FFA500" stroke-width="3"/>
<!-- Pelican feet -->
<path d="M 58 77 L 52 82 M 58 77 L 58 85 M 58 77 L 64 82" stroke="#FFA500" stroke-width="2" fill="none"/>
<path d="M 60 83 L 54 88 M 60 83 L 60 91 M 60 83 L 66 88" stroke="#FFA500" stroke-width="2" fill="none"/>
</g>
<!-- Traffic light -->
<g transform="translate(200, 200)">
<rect x="0" y="0" width="20" height="80" rx="5" fill="#333"/>
<circle cx="10" cy="15" r="6" fill="#FF0000"/>
<circle cx="10" cy="35" r="6" fill="#444"/>
<circle cx="10" cy="55" r="6" fill="#00FF00"/>
<rect x="8" y="80" width="4" height="100" fill="#666"/>
</g>
<!-- Traffic signs -->
<g transform="translate(500, 220)">
<rect x="0" y="0" width="40" height="40" fill="#FF0000" transform="rotate(45 20 20)"/>
<text x="20" y="25" font-family="Arial" font-size="12" fill="white" text-anchor="middle">STOP</text>
<rect x="18" y="40" width="4" height="80" fill="#666"/>
</g>
<!-- Building silhouettes in background -->
<rect x="0" y="200" width="60" height="200" fill="#555"/>
<rect x="70" y="150" width="80" height="250" fill="#666"/>
<rect x="160" y="180" width="50" height="220" fill="#555"/>
<rect x="650" y="160" width="70" height="240" fill="#666"/>
<rect x="730" y="190" width="70" height="210" fill="#555"/>
<!-- Windows on buildings -->
<g fill="#FFFF99">
<rect x="10" y="220" width="8" height="12"/>
<rect x="25" y="240" width="8" height="12"/>
<rect x="40" y="260" width="8" height="12"/>
<rect x="80" y="170" width="8" height="12"/>
<rect x="100" y="190" width="8" height="12"/>
<rect x="120" y="210" width="8" height="12"/>
<rect x="660" y="180" width="8" height="12"/>
<rect x="680" y="200" width="8" height="12"/>
<rect x="700" y="220" width="8" height="12"/>
</g>
<!-- Some clouds -->
<g fill="white" opacity="0.8">
<circle cx="100" cy="80" r="20"/>
<circle cx="120" cy="75" r="25"/>
<circle cx="140" cy="80" r="20"/>
<circle cx="600" cy="60" r="18"/>
<circle cx="615" cy="55" r="22"/>
<circle cx="635" cy="60" r="18"/>
</g>
<!-- Motion lines behind pelican -->
<g stroke="#DDD" stroke-width="2" opacity="0.6">
<line x1="320" y1="320" x2="300" y2="325"/>
<line x1="315" y1="340" x2="295" y2="345"/>
<line x1="310" y1="360" x2="290" y2="365"/>
</g>
</svg>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Pelican on Bike with Traffic</title>
<style>
body {
margin: 0;
padding: 20px;
background-color: #87CEEB;
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
}
svg {
border: 2px solid #333;
background-color: #90EE90;
}
</style>
</head>
<body>
<div class="container">
<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
<!-- Background elements -->
<rect x="0" y="400" width="800" height="100" fill="#8B4513"/>
<rect x="0" y="380" width="800" height="20" fill="#696969"/>
<!-- Road markings -->
<line x1="0" y1="370" x2="800" y2="370" stroke="#FFFF00" stroke-width="3" stroke-dasharray="20,20"/>
<!-- Traffic light -->
<rect x="650" y="250" width="20" height="60" fill="#333"/>
<circle cx="660" cy="265" r="6" fill="red"/>
<circle cx="660" cy="280" r="6" fill="yellow"/>
<circle cx="660" cy="295" r="6" fill="green"/>
<!-- Car 1 -->
<rect x="100" y="320" width="80" height="40" fill="#FF4136" rx="10"/>
<rect x="110" y="300" width="60" height="30" fill="#FF4136"/>
<circle cx="115" cy="360" r="10" fill="#333"/>
<circle cx="165" cy="360" r="10" fill="#333"/>
<!-- Car 2 -->
<rect x="500" y="320" width="100" height="40" fill="#0074D9" rx="10"/>
<rect x="520" y="300" width="60" height="30" fill="#0074D9"/>
<circle cx="525" cy="360" r="10" fill="#333"/>
<circle cx="585" cy="360" r="10" fill="#333"/>
<!-- Pelican on bike -->
<!-- Bike frame -->
<circle cx="300" cy="350" r="25" fill="#888" stroke="#333" stroke-width="2"/>
<circle cx="400" cy="350" r="25" fill="#888" stroke="#333" stroke-width="2"/>
<line x1="300" y1="350" x2="350" y2="320" stroke="#333" stroke-width="5"/>
<line x1="350" y1="320" x2="400" y2="350" stroke="#333" stroke-width="5"/>
<line x1="350" y1="320" x2="350" y2="280" stroke="#333" stroke-width="5"/>
<line x1="350" y1="280" x2="370" y2="280" stroke="#333" stroke-width="5"/>
<line x1="300" y1="350" x2="300" y2="320" stroke="#333" stroke-width="5"/>
<line x1="300" y1="320" x2="320" y2="280" stroke="#333" stroke-width="5"/>
<!-- Pedals -->
<circle cx="350" cy="350" r="15" fill="#666"/>
<line x1="350" y1="350" x2="365" y2="365" stroke="#333" stroke-width="3"/>
<!-- Pelican body -->
<ellipse cx="340" cy="250" rx="30" ry="40" fill="#F5F5DC" stroke="#333" stroke-width="2"/>
<!-- Pelican head and bill -->
<circle cx="370" cy="230" r="20" fill="#F5F5DC" stroke="#333" stroke-width="2"/>
<path d="M 380,220 Q 420,210 440,225 Q 420,235 380,230" fill="#F5F5DC" stroke="#333" stroke-width="2"/>
<!-- Pelican eye -->
<circle cx="375" cy="225" r="3" fill="#000"/>
<!-- Pelican pouch -->
<path d="M 400,235 Q 430,250 410,260 Q 380,250 400,235" fill="#F0E68C" stroke="#333" stroke-width="1"/>
<!-- Pelican legs on pedals -->
<line x1="320" y1="290" x2="345" y2="340" stroke="#FFA500" stroke-width="3"/>
<line x1="330" y1="295" x2="355" y2="345" stroke="#FFA500" stroke-width="3"/>
<!-- Pelican wing -->
<path d="M 310,240 Q 280,220 290,270 Q 300,260 310,240" fill="#F5F5DC" stroke="#333" stroke-width="2"/>
<!-- Birds in sky -->
<path d="M 100,100 Q 110,95 120,100 Q 130,105 140,100" fill="none" stroke="#333" stroke-width="2"/>
<path d="M 200,80 Q 210,75 220,80 Q 230,85 240,80" fill="none" stroke="#333" stroke-width="2"/>
<!-- Sun -->
<circle cx="700" cy="80" r="40" fill="#FFD700"/>
</svg>
</div>
</body>
</html>
```Drag to resize
Of course! Here is a whimsical illustration of a pelican riding a bicycle in traffic, created as a self-contained SVG within an HTML document.
```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 a Bike</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #f0f0f0;
}
svg {
width: 90%;
max-width: 900px;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" aria-labelledby="title" role="img">
<title id="title">An illustration of a pelican riding a bicycle in traffic.</title>
<defs>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background Elements -->
<g id="background">
<!-- Sky -->
<rect x="0" y="0" width="900" height="450" fill="#87CEFA"/>
<!-- Sun -->
<circle cx="800" cy="100" r="40" fill="#FFD700" opacity="0.8"/>
<!-- Cityscape Silhouette -->
<g id="cityscape" fill="#BCC6CC">
<rect x="0" y="320" width="80" height="130" />
<rect x="60" y="280" width="100" height="170" />
<rect x="140" y="300" width="70" height="150" />
<rect x="250" y="250" width="120" height="200" />
<rect x="350" y="340" width="90" height="110" />
<rect x="480" y="290" width="110" height="160" />
<rect x="520" y="260" width="50" height="190" />
</g>
<!-- Road -->
<rect x="0" y="450" width="900" height="150" fill="#708090"/>
<!-- Road Markings -->
<path d="M0 520 H900" stroke="#FFF" stroke-width="5" stroke-dasharray="40 25" />
</g>
<!-- Traffic Elements -->
<g id="traffic">
<!-- Far Car (Red) -->
<g id="car-red" transform="translate(150, 440)">
<ellipse cx="60" cy="48" rx="70" ry="10" fill="rgba(0,0,0,0.15)" />
<path d="M0 20 C0 0, 10 0, 20 0 L100 0 C110 0, 120 0, 120 20 L120 40 L0 40Z" fill="#DC143C" />
<path d="M15 20 L 105 20 L 95 0 L 25 0 Z" fill="#FF6347" />
<circle cx="25" cy="40" r="12" fill="#333" />
<circle cx="95" cy="40" r="12" fill="#333" />
</g>
<!-- Closer Car (Blue) -->
<g id="car-blue" transform="translate(620, 455)">
<ellipse cx="90" cy="53" rx="100" ry="15" fill="rgba(0,0,0,0.2)" />
<path d="M0 25 C0 5, 15 5, 25 5 L155 5 C165 5, 180 5, 180 25 L180 50 L0 50Z" fill="#4682B4" />
<path d="M25 25 L155 25 L135 5 L45 5 Z" fill="#5F9EA0" />
<circle cx="40" cy="50" r="18" fill="#333" />
<circle cx="140" cy="50" r="18" fill="#333" />
</g>
<!-- Traffic Light -->
<g id="traffic-light" transform="translate(830, 200)">
<rect x="-10" y="0" width="20" height="250" fill="#444" />
<rect x="-25" y="0" width="50" height="140" fill="#222" rx="5" />
<circle cx="0" cy="30" r="16" fill="#400000" stroke="#111" stroke-width="2"/> <!-- Red -->
<circle cx="0" cy="75" r="16" fill="#4B3A00" stroke="#111" stroke-width="2"/> <!-- Amber -->
<circle cx="0" cy="120" r="16" fill="#00FF00" stroke="#006400" stroke-width="2" filter="url(#glow)"/> <!-- Green -->
</g>
</g>
<!-- Main Subject: Pelican on Bike -->
<g id="pelican-on-bike" transform="translate(280, 240)">
<!-- Bike Shadow -->
<ellipse cx="120" cy="305" rx="150" ry="15" fill="rgba(0,0,0,0.2)" />
<!-- Bike -->
<g id="bike" stroke-linejoin="round" stroke-linecap="round">
<!-- Wheels -->
<g id="wheels" stroke="#333" stroke-width="4">
<circle cx="0" cy="240" r="65" fill="#E8F4F8" />
<circle cx="240" cy="240" r="65" fill="#E8F4F8" />
<circle cx="0" cy="240" r="8" fill="#333" />
<circle cx="240" cy="240" r="8" fill="#333" />
<!-- Spokes -->
<g stroke="#999" stroke-width="1.5">
<line x1="0" y1="240" x2="-56.3" y2="205" /> <line x1="0" y1="240" x2="56.3" y2="275" />
<line x1="0" y1="240" x2="-32.5" y2="296.3" /> <line x1="0" y1="240" x2="32.5" y2="183.7" />
<line x1="0" y1="240" x2="32.5" y2="296.3" /> <line x1="0" y1="240" x2="-32.5" y2="183.7" />
<line x1="0" y1="240" x2="56.3" y2="205" /> <line x1="0" y1="240" x2="-56.3" y2="275" />
<line x1="240" y1="240" x2="183.7" y2="205" /> <line x1="240" y1="240" x2="296.3" y2="275" />
<line x1="240" y1="240" x2="207.5" y2="296.3" /> <line x1="240" y1="240" x2="272.5" y2="183.7" />
<line x1="240" y1="240" x2="272.5" y2="296.3" /> <line x1="240" y1="240" x2="207.5" y2="183.7" />
<line x1="240" y1="240" x2="296.3" y2="205" /> <line x1="240" y1="240" x2="183.7" y2="275" />
</g>
</g>
<!-- Frame -->
<g id="frame" stroke="#008080" stroke-width="10">
<path d="M0 240 L80 150 L220 150"/>
<line x1="80" y1="150" x2="80" y2="250"/>
<line x1="80" y1="250" x2="0" y2="240"/>
<line x1="80" y1="250" x2="240" y2="240"/>
</g>
<!-- Seat -->
<path d="M40 145 H100 L 90 130 H50 Z" fill="#654321" stroke="#4a3219" stroke-width="2"/>
<line x1="80" y1="150" x2="70" y2="137" stroke="#333" stroke-width="5"/>
<!-- Handlebars -->
<line x1="220" y1="150" x2="230" y2="130" stroke="#B2B2B2" stroke-width="6"/>
<path d="M210 120 Q 230 110, 250 120" stroke="#333" stroke-width="8" fill="none"/>
<!-- Pedals -->
<g id="pedals" stroke="#B2B2B2" stroke-width="5">
<circle cx="80" cy="250" r="20" fill="none" stroke-width="3"/>
<line x1="80" y1="250" x2="110" y2="265"/>
<rect x="105" y="262" width="25" height="8" rx="2" fill="#333" stroke-width="0"/>
</g>
</g>
<!-- Pelican -->
<g id="pelican" fill="#F5F5F5" stroke="#B0B0B0" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round">
<!-- Body and Legs -->
<path d="M90 140 C 40 180, 80 250, 110 265 L130 258 C 115 200, 160 140, 160 140 Z"/>
<path d="M110 265 L105 262" stroke="#F4A460" stroke-width="10"/> <!-- Foot -->
<!-- Arm / Wing -->
<path d="M150 160 C 190 140, 210 130, 235 120"/>
<!-- Neck and Head -->
<path d="M155 140 C 160 80, 190 80, 200 120"/>
<path d="M185 110 C 170 80, 190 60, 210 70 L 225 90 C 210 110, 190 115, 185 110 Z"/>
<!-- Crest -->
<path d="M200 68 Q185 55 200 50 M208 65 Q195 50 208 45" fill="none" stroke-width="2"/>
<!-- Beak -->
<g stroke="#E49B0F" stroke-width="1.5">
<path d="M225 90 C 290 85, 300 100, 290 105" fill="#FFD700"/>
<path d="M228 95 C 260 130, 290 130, 292 105 Z" fill="#FFA07A" opacity="0.9"/>
</g>
<!-- Eye -->
<circle cx="218" cy="82" r="4" fill="#222" stroke="none"/>
<circle cx="219" cy="81" r="1.5" fill="#FFF" stroke="none"/>
</g>
</g>
</svg>
</body>
</html>
```Drag to resize
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
<style>
.road { fill: #555; }
.sky { fill: #87CEEB; }
.pelican-body { fill: white; stroke: black; }
.beak { fill: #FFA500; }
.bike-frame { fill: #3498db; stroke: black; }
.wheel { fill: #333; stroke: black; }
.car { fill: #e74c3c; stroke: black; }
.tree { fill: #2ecc71; }
</style>
<!-- Background -->
<rect class="sky" x="0" y="0" width="800" height="600"/>
<rect class="road" x="0" y="400" width="800" height="200"/>
<!-- Traffic -->
<g transform="translate(100,450)">
<rect class="car" x="0" y="0" width="80" height="40" rx="10"/>
<circle class="wheel" cx="15" cy="40" r="10"/>
<circle class="wheel" cx="65" cy="40" r="10"/>
</g>
<g transform="translate(600,450)">
<rect class="car" x="0" y="0" width="80" height="40" rx="10"/>
<circle class="wheel" cx="15" cy="40" r="10"/>
<circle class="wheel" cx="65" cy="40" r="10"/>
</g>
<!-- Pelican on Bike -->
<g transform="translate(400,350)">
<!-- Bike Frame -->
<path class="bike-frame" d="M0 0 L-20 40 L0 80 L20 40 Z"/>
<circle class="wheel" cx="-20" cy="80" r="25"/>
<circle class="wheel" cx="20" cy="80" r="25"/>
<line x1="-20" y1="40" x2="20" y2="40" stroke="black" stroke-width="3"/>
<!-- Pelican -->
<g transform="translate(0,-60)">
<path class="pelican-body" d="M0 0 Q20 -20 40 0 L30 30 Q20 40 10 30 Z"/>
<path class="beak" d="M40 0 L60 -10 L40 -20"/>
<circle cx="15" cy="10" r="5" fill="black"/>
<path class="pelican-body" d="M10 30 L0 50 L-10 30" fill="white"/>
</g>
</g>
<!-- Trees -->
<g transform="translate(200,350)">
<path class="tree" d="M0 0 L-20 100 L40 100 Z"/>
<circle cx="0" cy="0" r="30" fill="#8B4513"/>
</g>
<g transform="translate(600,350)">
<path class="tree" d="M0 0 L-20 100 L40 100 Z"/>
<circle cx="0" cy="0" r="30" fill="#8B4513"/>
</g>
</svg>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pelican on a Bike with Traffic</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }
svg { border: 1px solid #ccc; background-color: white; }
</style>
</head>
<body>
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<!-- Sky background -->
<rect x="0" y="0" width="800" height="400" fill="#87CEEB"/>
<!-- Road -->
<rect x="0" y="400" width="800" height="200" fill="#808080"/>
<!-- Road lines (dashed yellow) -->
<rect x="100" y="490" width="100" height="10" fill="yellow"/>
<rect x="300" y="490" width="100" height="10" fill="yellow"/>
<rect x="500" y="490" width="100" height="10" fill="yellow"/>
<rect x="700" y="490" width="100" height="10" fill="yellow"/>
<!-- Bike wheels -->
<circle cx="250" cy="500" r="50" fill="none" stroke="black" stroke-width="5"/>
<circle cx="450" cy="500" r="50" fill="none" stroke="black" stroke-width="5"/>
<!-- Bike frame -->
<line x1="250" y1="500" x2="350" y2="400" stroke="black" stroke-width="5"/>
<line x1="350" y1="400" x2="450" y2="500" stroke="black" stroke-width="5"/>
<line x1="300" y1="450" x2="400" y2="450" stroke="black" stroke-width="5"/>
<line x1="350" y1="400" x2="350" y2="350" stroke="black" stroke-width="5"/> <!-- Seat post -->
<rect x="330" y="330" width="40" height="10" fill="black"/> <!-- Seat -->
<line x1="350" y1="400" x2="400" y2="370" stroke="black" stroke-width="5"/> <!-- Handlebar post -->
<rect x="390" y="360" width="20" height="10" fill="black"/> <!-- Handlebar -->
<!-- Pelican body -->
<ellipse cx="350" cy="320" rx="60" ry="100" fill="white" stroke="black" stroke-width="3"/>
<!-- Pelican head -->
<circle cx="350" cy="200" r="40" fill="white" stroke="black" stroke-width="3"/>
<!-- Pelican beak -->
<path d="M350,200 L420,210 L350,240 Z" fill="yellow" stroke="black" stroke-width="3"/>
<!-- Pelican eye -->
<circle cx="370" cy="190" r="5" fill="black"/>
<!-- Pelican wings (simple) -->
<path d="M290,300 Q240,250 290,200" fill="none" stroke="black" stroke-width="3"/>
<path d="M410,300 Q460,250 410,200" fill="none" stroke="black" stroke-width="3"/>
<!-- Pelican legs -->
<line x1="350" y1="400" x2="300" y2="480" stroke="orange" stroke-width="5"/>
<line x1="350" y1="400" x2="400" y2="480" stroke="orange" stroke-width="5"/>
<!-- Traffic: Car 1 (left) -->
<rect x="50" y="450" width="150" height="60" fill="red" stroke="black" stroke-width="3"/>
<circle cx="80" cy="510" r="20" fill="black" stroke="gray" stroke-width="3"/>
<circle cx="170" cy="510" r="20" fill="black" stroke="gray" stroke-width="3"/>
<!-- Traffic: Car 2 (right) -->
<rect x="550" y="450" width="150" height="60" fill="blue" stroke="black" stroke-width="3"/>
<circle cx="580" cy="510" r="20" fill="black" stroke="gray" stroke-width="3"/>
<circle cx="670" cy="510" r="20" fill="black" stroke="gray" stroke-width="3"/>
<!-- Some clouds for background -->
<ellipse cx="100" cy="100" rx="50" ry="30" fill="white"/>
<ellipse cx="150" cy="100" rx="40" ry="25" fill="white"/>
<ellipse cx="700" cy="150" rx="60" ry="35" fill="white"/>
<ellipse cx="750" cy="150" rx="50" ry="30" fill="white"/>
</svg>
</body>
</html>
```Drag to resize
```html
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<!-- Road -->
<rect x="0" y="300" width="800" height="100" fill="#666" />
<!-- Lane markings -->
<line x1="0" y1="350" x2="800" y2="350" stroke="#fff" stroke-width="5" stroke-dasharray="20 20" />
<!-- Cars -->
<rect x="100" y="320" width="80" height="40" fill="#f00" rx="5" />
<rect x="250" y="320" width="80" height="40" fill="#00f" rx="5" />
<rect x="500" y="320" width="80" height="40" fill="#0f0" rx="5" />
<!-- Bike -->
<g transform="translate(400, 380)">
<circle cx="0" cy="0" r="20" fill="#444" />
<line x1="0" y1="0" x2="30" y2="0" stroke="#444" stroke-width="5" />
<circle cx="30" cy="0" r="15" fill="#444" />
<rect x="-10" y="-10" width="20" height="10" fill="#ff0" rx="5" />
<polygon points="-15,-5 -15,5 0,0" fill="#ff0" />
</g>
<!-- Pelican -->
<g transform="translate(400, 375)">
<circle cx="0" cy="0" r="20" fill="#fff" />
<beak x="10" y="5" width="15" height="10" fill="#ff9900" rx="5" />
<circle cx="-5" cy="-5" r="5" fill="#000" />
</g>
<!-- Pedals -->
<g transform="translate(400, 380)">
<circle cx="15" cy="0" r="5" fill="#444" />
<line x1="15" y1="0" x2="20" y2="10" stroke="#444" stroke-width="2" />
<circle cx="20" cy="10" r="5" fill="#444" />
</g>
<!-- Wheels -->
<circle cx="400" cy="400" r="20" fill="#444" />
<circle cx="430" cy="400" r="15" fill="#444" />
</svg>
```Drag to resize
Below is a complete HTML page that renders an SVG illustration of a pelican riding a bike amid a few simple traffic elements. Just copy the code into an `.html` file and open it in a web browser.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pelican on a Bike with Traffic</title>
<style>
body { margin:0; display:flex; justify-content:center; align-items:center; height:100vh; background:#f0f8ff; }
svg { border:1px solid #ccc; background:#e6f7ff; }
</style>
</head>
<body>
<svg width="800" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<!-- Road -->
<rect x="0" y="250" width="800" height="150" fill="#4d4d4d"/>
<line x1="0" y1="300" x2="800" y2="300" stroke="#fff" stroke-width="4" stroke-dasharray="20,20"/>
<line x1="0" y1="350" x2="800" y2="350" stroke="#fff" stroke-width="2"/>
<!-- Traffic: Car 1 -->
<g id="car1" transform="translate(150,260)">
<rect width="100" height="40" rx="8" fill="#ff3333"/>
<circle cx="25" cy="45" r="12" fill="#333"/>
<circle cx="75" cy="45" r="12" fill="#333"/>
</g>
<!-- Traffic: Car 2 -->
<g id="car2" transform="translate(500,260)">
<rect width="120" height="45" rx="8" fill="#3366ff"/>
<circle cx="30" cy="50" r="13" fill="#333"/>
<circle cx="90" cy="50" r="13" fill="#333"/>
</g>
<!-- Bike frame -->
<g id="bike" transform="translate(350,260)">
<!-- Wheels -->
<circle cx="0" cy="0" r="40" stroke="#000" stroke-width="4" fill="none"/>
<circle cx="200" cy="0" r="40" stroke="#000" stroke-width="4" fill="none"/>
<!-- Frame -->
<line x1="-20" y1="-20" x2="20" y2="-20" stroke="#000" stroke-width="4"/>
<line x1="20" y1="-20" x2="140" y2="-20" stroke="#000" stroke-width="4"/>
<line x1="140" y1="-20" x2="180" y2="-20" stroke="#000" stroke-width="4"/>
<line x1="0" y1="-20" x2="100" y2="-80" stroke="#000" stroke-width="4"/>
<line x1="100" y1="-80" x2="180" y2="-20" stroke="#000" stroke-width="4"/>
<line x1="100" y1="-80" x2="100" y2="-140" stroke="#000" stroke-width="4"/> <!-- seat post -->
<rect x="95" y="-150" width="10" height="20" fill="#000"/> <!-- seat -->
<line x1="100" y1="-140" x2="50" y2="-150" stroke="#000" stroke-width="4"/> <!-- handlebar post -->
<rect x="45" y="-160" width="10" height="20" fill="#000"/> <!-- handlebar grip -->
</g>
<!-- Pelican (simple stylized version) -->
<g id="pelican" transform="translate(430,140) scale(0.8)">
<!-- Body -->
<ellipse cx="0" cy="0" rx="30" ry="50" fill="#ffcc00" stroke="#000" stroke-width="2"/>
<!-- Neck -->
<path d="M0,-40 Q-20,-80 0,-120" fill="none" stroke="#ffcc00" stroke-width="20" stroke-linecap="round"/>
<!-- Head -->
<circle cx="0" cy="-130" r="20" fill="#ffcc00" stroke="#000" stroke-width="2"/>
<!-- Beak -->
<polygon points="0,-130 -20,-120 -20,-140" fill="#ff9966" stroke="#000" stroke-width="1"/>
<!-- Eye -->
<circle cx="8" cy="-138" r="4" fill="#000"/>
<!-- Wing -->
<path d="M-20,0 Q-40,20 -20,40" fill="#ffdd55" stroke="#000" stroke-width="2"/>
<!-- Feet (two simple lines) -->
<line x1="15" y1="50" x2="30" y2="70" stroke="#000" stroke-width="3"/>
<line x1="-15" y1="50" x2="-30" y2="70" stroke="#000" stroke-width="3"/>
<!-- Position the pelican on the bike seat -->
<g transform="translate(90,-130)">
<use xlink:href="#bike"/>
</g>
</g>
</svg>
</body>
</html>
```Drag to resize