Skip to content

Instantly share code, notes, and snippets.

@simonw
Created June 17, 2025 20:56
Show Gist options
  • Select an option

  • Save simonw/076ab15090c38cd00167721f829f4f4e to your computer and use it in GitHub Desktop.

Select an option

Save simonw/076ab15090c38cd00167721f829f4f4e to your computer and use it in GitHub Desktop.

2025-06-17T17:14:22 conversation: 01jxze543mqe2m1ddjgtfqtzyf id: 01jxze4zf0e3zybdyrhxtkj0am

Model: gemini/gemini-2.5-flash-lite-preview-06-17

Prompt

Generate an SVG of a pelican riding a bicycle

Response

Okay, here's an SVG code for a pelican riding a bicycle. I've tried to make it relatively simple but recognizable.

<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">

  <!-- Bicycle Frame -->
  <g id="bicycle">
    <!-- Main Frame -->
    <path d="M50 150 L 100 130 L 180 130 L 230 150" stroke="black" stroke-width="4" fill="none"/>
    <!-- Seat Tube -->
    <line x1="100" y1="130" x2="100" y2="100" stroke="black" stroke-width="4"/>
    <!-- Head Tube -->
    <line x1="180" y1="130" x2="210" y2="110" stroke="black" stroke-width="4"/>
    <!-- Handlebars -->
    <line x1="210" y1="110" x2="225" y2="110" stroke="black" stroke-width="4"/>
    <line x1="225" y1="110" x2="235" y2="120" stroke="black" stroke-width="4"/>
    <!-- Rear Wheel -->
    <circle cx="50" cy="150" r="30" stroke="black" stroke-width="4" fill="white"/>
    <line x1="50" y1="150" x2="50" y2="120" stroke="black" stroke-width="2"/>
    <line x1="50" y1="150" x2="80" y2="150" stroke="black" stroke-width="2"/>
    <line x1="50" y1="150" x2="50" y2="180" stroke="black" stroke-width="2"/>
    <line x1="50" y1="150" x2="20" y2="150" stroke="black" stroke-width="2"/>
    <!-- Front Wheel -->
    <circle cx="230" cy="150" r="30" stroke="black" stroke-width="4" fill="white"/>
    <line x1="230" y1="150" x2="230" y2="120" stroke="black" stroke-width="2"/>
    <line x1="230" y1="150" x2="260" y2="150" stroke="black" stroke-width="2"/>
    <line x1="230" y1="150" x2="230" y2="180" stroke="black" stroke-width="2"/>
    <line x1="230" y1="150" x2="200" y2="150" stroke="black" stroke-width="2"/>
    <!-- Pedals and Crank -->
    <circle cx="115" cy="135" r="5" fill="black"/>
    <line x1="115" y1="135" x2="100" y2="145" stroke="black" stroke-width="3"/>
    <line x1="115" y1="135" x2="130" y2="125" stroke="black" stroke-width="3"/>
    <!-- Chain (simplified) -->
    <path d="M115 135 C 105 130 100 140 95 145" stroke="gray" stroke-width="2" fill="none"/>
    <path d="M95 145 C 90 150 90 160 80 160" stroke="gray" stroke-width="2" fill="none"/>
  </g>

  <!-- Pelican -->
  <g id="pelican">
    <!-- Body -->
    <ellipse cx="140" cy="90" rx="35" ry="25" fill="#FFD700" stroke="black" stroke-width="2"/> <!-- Goldenrod for a slightly brighter pelican -->
    <!-- Neck -->
    <path d="M140 70 Q 120 50 110 40" stroke="black" stroke-width="3" fill="none"/>
    <!-- Head -->
    <circle cx="110" cy="40" r="15" fill="#FFD700" stroke="black" stroke-width="2"/>
    <!-- Beak -->
    <path d="M110 40 L 90 45 L 95 35 Z" fill="#FFA500" stroke="black" stroke-width="2"/> <!-- Orange for beak -->
    <!-- Eye -->
    <circle cx="105" cy="38" r="3" fill="black"/>
    <!-- Wing (simplified, one visible) -->
    <path d="M140 70 Q 170 80 175 110 Q 150 115 140 90 Z" fill="#FFD700" stroke="black" stroke-width="2"/>
    <!-- Tail -->
    <path d="M170 115 L 185 130 L 195 125 Z" fill="#FFD700" stroke="black" stroke-width="2"/>
    <!-- Legs (simplified) -->
    <line x1="130" y1="115" x2="120" y2="135" stroke="black" stroke-width="3"/>
    <line x1="150" y1="115" x2="140" y2="135" stroke="black" stroke-width="3"/>
  </g>

</svg>

Explanation of the SVG Code:

  • <svg>: The root element of the SVG, defining the canvas size (width, height) and the coordinate system (viewBox).
  • <g id="bicycle">: A group element to contain all the parts of the bicycle.
  • <!-- Bicycle Frame -->: Comments to make the code more readable.
  • <path d="..." ...>:
    • Used for drawing the main frame elements (top tube, down tube, seat tube).
    • d attribute contains the path data commands:
      • M x y: Move to coordinates (x, y) without drawing.
      • L x y: Draw a line to coordinates (x, y).
    • stroke: Color of the outline.
    • stroke-width: Thickness of the outline.
    • fill="none": The shape has no fill color.
  • <line x1="..." y1="..." x2="..." y2="..." ...>: Draws a straight line from (x1, y1) to (x2, y2).
  • <circle cx="..." cy="..." r="..." ...>: Draws a circle with its center at (cx, cy) and a radius r.
  • <g id="pelican">: A group element for the pelican.
  • <ellipse cx="..." cy="..." rx="..." ry="..." ...>: Draws an ellipse with its center at (cx, cy), an x-radius rx, and a y-radius ry. This is used for the pelican's body.
  • <path d="..." fill="..." ...>: Used for more complex shapes like the neck, head, beak, wing, and tail.
    • Q ctlX ctlY endX endY: Quadratic Bezier curve. Draws a curve from the current point to endX, endY using ctlX, ctlY as the control point.
    • Z: Close the path (draw a line back to the starting point).
  • Colors:
    • black, white, gray, #FFD700 (Goldenrod), #FFA500 (Orange) are used for different parts. You can easily change these colors.

How to Use:

  1. Save the code above in a file with a .svg extension (e.g., pelican_bike.svg).
  2. Open this .svg file in a web browser, an SVG editor (like Inkscape or Adobe Illustrator), or embed it directly into an HTML document.

Feel free to tweak the coordinates, stroke widths, and colors to get the look you desire!

Token usage

11 input, 2,070 output, {"candidatesTokenCount": 2070, "promptTokensDetails": [{"modality": "TEXT", "tokenCount": 11}]}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment