Model: gemini-2.5-flash-preview-04-17
Generate an SVG of a pelican riding a bicycle
Okay, here is an SVG code for a stylized pelican riding a bicycle. I've used basic shapes and paths to create the components.
<svg width="400" height="250" viewBox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.bike-stroke {
stroke: black;
stroke-width: 4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.pelican-fill {
fill: #778899; /* Light Slate Gray */
stroke: black;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pelican-beak-pouch {
fill: #FFB6C1; /* Light Pink */
stroke: black;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
</style>
</defs>
<!-- Bike -->
<g id="bicycle">
<!-- Rear Wheel -->
<circle cx="150" cy="180" r="35" class="bike-stroke"/>
<!-- Front Wheel -->
<circle cx="300" cy="180" r="35" class="bike-stroke"/>
<!-- Frame -->
<path d="M 150 180 L 220 185 L 200 130 L 300 130 L 220 185 Z" class="bike-stroke"/>
<line x1="300" y1="130" x2="300" y2="180" class="bike-stroke"/> <!-- Fork -->
<!-- Seat -->
<path d="M 200 130 Q 195 120 205 120 T 210 130" fill="brown" stroke="black" stroke-width="2"/>
<!-- Handlebars -->
<path d="M 300 130 C 310 120 310 100 300 90" class="bike-stroke"/>
<!-- Pedals and Cranks -->
<g transform="translate(220, 185)">
<line x1="0" y1="0" x2="20" y2="10" stroke="black" stroke-width="3" stroke-linecap="round"/>
<circle cx="20" cy="10" r="5" fill="black"/>
<line x1="0" y1="0" x2="-20" y2="-10" stroke="black" stroke-width="3" stroke-linecap="round"/>
<circle cx="-20" cy="-10" r="5" fill="black"/>
</g>
</g>
<!-- Pelican -->
<g id="pelican">
<!-- Body -->
<ellipse cx="200" cy="115" rx="35" ry="45" transform="rotate(5 200 115)" class="pelican-fill"/>
<!-- Neck -->
<path d="M 190 80 C 180 40 230 30 250 60" class="pelican-fill"/>
<!-- Head -->
<circle cx="250" cy="60" r="18" class="pelican-fill"/>
<!-- Beak -->
<path d="M 250 68 L 310 80 C 290 110 260 110 250 75 Z" class="pelican-beak-pouch"/>
<path d="M 250 68 L 310 80 L 250 75" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <!-- Top line of beak -->
<!-- Eye -->
<circle cx="245" cy="55" r="3" fill="black"/>
<!-- Legs -->
<!-- Positioning legs to look like they are pedaling -->
<line x1="200" y1="140" x2="235" y2="195" stroke="black" stroke-width="4" stroke-linecap="round"/>
<line x1="200" y1="140" x2="185" y2="175" stroke="black" stroke-width="4" stroke-linecap="round"/>
<!-- Simplified Wing -->
<path d="M 170 110 Q 160 130 190 150" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"/>
</g>
</svg>
Explanation:
<svg>
tag: Defines the SVG canvas with a width, height, andviewBox
for scaling.<defs>
and<style>
: Defines reusable styles for stroke and fill properties, making the code cleaner.<g id="bicycle">
: Groups all the elements belonging to the bike.<circle>
: Used for the wheels.<path>
: Used for the main frame triangle and the curved handlebars.M
moves to a point,L
draws a line,Z
closes the path,Q
andC
draw curves (quadratic and cubic bezier).<line>
: Used for the fork and parts of the frame triangle.<g transform="...">
: Groups the pedals and cranks and moves them to the bottom bracket position.
<g id="pelican">
: Groups all the elements belonging to the pelican.<ellipse>
: Used for the pelican's body.<path>
: Used for the curved neck, the distinctive beak pouch, and the top line of the beak.<circle>
: Used for the head and the small eye.<line>
: Used for the pelican's legs, positioned to connect from the body area towards the pedals.transform="rotate(...)"
: Slightly rotates the body ellipse to give it a bit more dynamic posture.
You can copy and paste this code into an .svg
file and open it in a web browser or an SVG editor to see the result. You can also embed it directly in an HTML page.
11 input, 4,266 output, {"promptTokensDetails": [{"modality": "TEXT", "tokenCount": 11}], "thoughtsTokenCount": 2702}