Skip to content

Instantly share code, notes, and snippets.

@simonw
Created April 17, 2025 20:26
Show Gist options
  • Save simonw/afce6639ed10c712a0778fc779efd756 to your computer and use it in GitHub Desktop.
Save simonw/afce6639ed10c712a0778fc779efd756 to your computer and use it in GitHub Desktop.

2025-04-17T20:19:08 conversation: 01js2pgbpm7rpyv6svcv9t97qq id: 01js2pgbps1wbamsrbybkvpkrc

Model: gemini-2.5-flash-preview-04-17

Prompt

Generate an SVG of a pelican riding a bicycle

Response

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:

  1. <svg> tag: Defines the SVG canvas with a width, height, and viewBox for scaling.
  2. <defs> and <style>: Defines reusable styles for stroke and fill properties, making the code cleaner.
  3. <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 and C 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.
  4. <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.

Token usage:

11 input, 4,266 output, {"promptTokensDetails": [{"modality": "TEXT", "tokenCount": 11}], "thoughtsTokenCount": 2702}

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