Skip to content

Instantly share code, notes, and snippets.

@simonw
Created April 2, 2026 17:20
Show Gist options
  • Select an option

  • Save simonw/12ae4711288637a722fd6bd4b4b56bdb to your computer and use it in GitHub Desktop.

Select an option

Save simonw/12ae4711288637a722fd6bd4b4b56bdb to your computer and use it in GitHub Desktop.

2026-04-02T17:02:09 conversation: 01kn7jayva5p3bwv2rbdaj2cax id: 01kn7jaat9f5t1c9zmamzfmaxw

Model: lmstudio/google/gemma-4-e2b

Prompt

Generate an SVG of a pelican riding a bicycle

Response

Due to the complexity of generating high-fidelity artistic SVGs purely through text output, I will generate a simplified, illustrative SVG that represents a pelican riding a bicycle.

This code uses basic shapes (<path>, <circle>, <line>) to define the elements.

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

    <!-- The Bicycle Frame (Simplified) -->
    <rect x="50" y="150" width="300" height="40" fill="#8B4513" stroke="#693310" stroke-width="3"/>

    <!-- Front Wheel -->
    <circle cx="100" cy="170" r="40" fill="#4682B2" stroke="#1E93D3" stroke-width="4"/>

    <!-- Back Wheel -->
    <circle cx="300" cy="170" r="40" fill="#4682B2" stroke="#1E93D3" stroke-width="4"/>

    <!-- The Pelican (Body) -->
    <path d="M150 100 Q200 50, 250 100 L250 150 C250 200, 150 200, 150 150 Z" fill="#F4A460" stroke="#E99670" stroke-width="3"/>

    <!-- The Pelican's Head/Beak -->
    <path d="M250 80 L280 110 L250 140 Z" fill="#FFD700" stroke="#B8860B" stroke-width="3"/>

    <!-- The Pelican's Neck (Connecting to the Bicycle) -->
    <line x1="250" y1="140" x2="250" y2="160" stroke="#FFD700" stroke-width="5" marker-end="url(#arrowhead)"/>

    <!-- Action/Riding Line (Implied connection of the body to the bike structure) -->
    <line x1="250" y1="160" x2="250" y2="170" stroke="#FFD700" stroke-width="8"/>


    <!-- Define Arrowhead for better line visualization -->
    <defs>
        <marker id="arrowhead" x="20" y="0" orient="auto-start-right" markerWidth="10" markerHeight="10" filled="%25FF" stroke="%25FF" stroke-width="0" markerEnds="url(%253E%252E%252E%252E)">
            <polygon points="0 0, 10 0, 0 10" />
        </marker>
    </defs>

</svg>

2026-04-02T17:14:18 conversation: 01kn7k1dzddnyn00fx11251yd9 id: 01kn7k0k48wxsd28h5z4qrsj1g

Model: lmstudio/google/gemma-4-e4b

Prompt

Generate an SVG of a pelican riding a bicycle

Response

Due to the complexity of generating a functional image in text format, I will provide you with the raw SVG XML Code.

You can copy this entire code block and paste it into:

  1. An online SVG editor (like CodePen or SVG Viewer).
  2. A simple HTML file (<svg>...</svg>).

This code will display a cartoon pelican happily riding a bicycle.


🚲 SVG Code: Pelican on a Bicycle

<svg width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
    <!-- Background (Optional) -->
    <rect x="0" y="0" width="800" height="450" fill="#f0f8ff"/>

    <!-- ====================== BIKE FRAME ====================== -->
    <g id="bicycle" transform="translate(100, 350)">
        <!-- Wheels -->
        <circle cx="0" cy="0" r="60" fill="#333333"/> <!-- Front Wheel -->
        <circle cx="450" cy="0" r="60" fill="#333333"/> <!-- Rear Wheel -->

        <!-- Spokes (Simple detail) -->
        <g opacity="0.7">
            <line x1="-20" y1="0" x2="20" y2="0" stroke="#666" stroke-width="4"/>
            <line x1="-20" y1="0" x2="20" y2="0" transform="translate(450, 0)"/>
        </g>

        <!-- Frame (Simple connecting lines) -->
        <path d="M -10 0 C 30, -50 380, -60 430, -20" fill="#a9a9a9" stroke="#555" stroke-width="3"/>

        <!-- Handlebars & Forks -->
        <rect x="-30" y="-75" width="60" height="10" fill="#888"/>
        <!-- Seat/Saddle (Pelican will sit here) -->
        <ellipse cx="420" cy="-30" rx="50" ry="15" fill="#90ee90"/>
    </g>

    <!-- ====================== PELICAN FIGURE ====================== -->
    <g id="pelican" transform="translate(380, 170)">
        
        <!-- Body (White/Yellow) -->
        <path d="M -50 0 C -20 40, 50 50, 80 0 Z" fill="#ffffff" stroke="#333" stroke-width="2"/>
        
        <!-- Head and Neck -->
        <g transform="translate(-10, -50)">
            <path d="M -40 0 C -60, 20, -80, 60, -50, 90 Z" fill="#ffffff" stroke="#333" stroke-width="2"/>
            
            <!-- Beak and Pouch (The most defining feature) -->
            <path d="M -50 5 C -70, 10, -80, 40, -65, 60 L -60 50 Z" fill="#f56969" /> <!-- Reddish Beak base -->
            <ellipse cx="-60" cy="30" rx="35" ry="20" fill="#d1e7ff" stroke="#333" stroke-width="1"/> <!-- Blue pouch area -->
        </g>

        <!-- Wings (Simple detail) -->
        <path d="M -80 20 C -110, 0, -95, 40, -75 35 Z" fill="#ffffff" opacity="0.8"/>
        
        <!-- Legs and Feet (Sticking out of the saddle) -->
        <rect x="-20" y="10" width="8" height="15" fill="#ffd700"/>
        <circle cx="-18" cy="25" r="6" fill="#333"/> 

    </g>
    
    <!-- Motion Line / Ground (Suggestion of movement) -->
    <path d="M 0 430 L 800 430" stroke="#777" stroke-width="5"/>
    
</svg>

How to View the Code:

  1. Copy all the code above (from <svg... to </svg>).
  2. Create a new file on your computer and name it pelican_bike.html.
  3. Paste the SVG code into that file.
  4. Save the file and open it with any web browser (Chrome, Firefox, etc.).

You will see the pelican sitting happily in the saddle of the bicycle!

2026-04-02T17:16:13 conversation: 01kn7k564tk6ymdwfyar6y54nm id: 01kn7k42wybeg09v1xc9bafn00

Model: lmstudio/google/gemma-4-26b-a4b

Prompt

Generate an SVG of a pelican riding a bicycle

Response

This is a clean, stylized SVG of a pelican riding a bicycle. I have used a "flat design" aesthetic to ensure the code remains lightweight and easy to read.

<svg xmlns="http://www.w3.org/22/2/5" viewBox="0 0 400 400">
  <!-- Background -->
  <rect width="400" height="400" fill="#e0f7fa" />
  
  <!-- Ground -->
  <rect x="0" y="340" width="400" height="60" fill="#8bc34a" />

  <!-- Bicycle Wheels -->
  <circle cx="120" cy="320" r="35" stroke="#37474f" stroke-width="6" fill="none" />
  <circle cx="120" cy="320" r="5" fill="#37474f" />
  <circle cx="280" cy="320" r="35" stroke="#37474f" stroke-width="6" fill="none" />
  <circle cx="280" cy="320" r="5" fill="#37474f" />

  <!-- Bicycle Frame -->
  <path d="M 120 320 L 200 320 L 260 240 L 180 240 Z" fill="none" stroke="#d32f2f" stroke-width="5" />
  <path d="M 280 320 L 260 240" stroke="#d32f2f" stroke-width="5" />
  <path d="M 180 240 L 170 210 M 200 240 L 190 210" stroke="#37474f" stroke-width="4" /> <!-- Seat Post -->
  <line x1="180" x1="260" y1="240" x2="280" y2="320" stroke="#d32f2f" stroke-width="5" /> <!-- Fork -->

  <!-- Handlebars -->
  <path d="M 275 230 Q 290 220 300 240" fill="none" stroke="#37474f" stroke-width="5" />

  <!-- Pelican Leg (connecting to pedal area) -->
  <path d="M 200 240 L 200 310" stroke="#ffcc80" stroke-width="4" fill="none" />

  <!-- Pelican Body -->
  <ellipse cx="190" cy="200" rx="50" ry="40" fill="white" stroke="#cfd8dc" stroke-width="1" />
  <!-- Wing -->
  <path d="M 160 200 Q 180 170 210 200" fill="none" stroke="#cfd8dc" stroke-width="3" />

  <!-- Pelican Neck -->
  <path d="M 230 180 Q 260 150 240 110" stroke="white" stroke-width="18" fill="none" stroke-linecap="round" />

  <!-- Pelican Head -->
  <circle cx="240" cy="100" r="25" fill="white" />
  
  <!-- Eye -->
  <circle cx="250" cy="95" r="3" fill="#263238" />

  <!-- The Large Pelican Beak -->
  <path d="M 260 100 L 340 115 L 260 130 Z" fill="#ffb74d" stroke="#f57c00" stroke-width="1" />
  <!-- Beak Detail (Lower pouch) -->
  <path d="M 260 115 Q 300 145 260 130" fill="#ffb74d" opacity="0.8" />

</svg>

How this SVG is structured:

  1. Background & Ground: I created a light blue sky and a green strip at the bottom to give the scene context.
  2. The Bicycle:
    • Wheels: Simple circles with a dark stroke and a small center point for spokes.
    • Frame: A red-colored geometric path connecting the wheels and forming a seat post.
    • Handlebars: A curved line at the front of the frame.
  3. The Pelican:
    • Body: An ellipse colored white with a light grey border.
    • Neck: A thick, rounded "S" curve that provides the structural connection between the body and head.
    • Beak: The most defining feature. I used a large triangle-like path combined with a secondary curved path to create the characteristic "pouch" look of a pelican.
    • Leg: A single line connecting the bird's body area down to the bicycle frame to simulate pedaling.
@simonw
Copy link
Copy Markdown
Author

simonw commented Apr 2, 2026

e2b

image

e4b

image

26b-a4b

Screenshot 2026-04-02 at 10 22 17 AM

@simonw
Copy link
Copy Markdown
Author

simonw commented Apr 2, 2026

gemma-4-31b in LM Studio is broken for me:

llm -m lmstudio/google/gemma-4-31b "Generate an SVG of a pelican riding a bicycle"
---                                                                                       
---
---
---
---
---
---
---
---
---
---
---
---
---
---
---
---
---
---
---
---
[...]

@simonw
Copy link
Copy Markdown
Author

simonw commented Apr 2, 2026

I had to manually fix the (really good) 26B-A4B one:

diff --git a/pel.svg b/pel.svg
index 8829d3f..c77e3fc 100644
--- a/pel.svg
+++ b/pel.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/22/2/5" viewBox="0 0 400 400">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
   <!-- Background -->
   <rect width="400" height="400" fill="#e0f7fa" />
   
@@ -15,7 +15,7 @@
   <path d="M 120 320 L 200 320 L 260 240 L 180 240 Z" fill="none" stroke="#d32f2f" stroke-width="5" />
   <path d="M 280 320 L 260 240" stroke="#d32f2f" stroke-width="5" />
   <path d="M 180 240 L 170 210 M 200 240 L 190 210" stroke="#37474f" stroke-width="4" /> <!-- Seat Post -->
-  <line x1="180" x1="260" y1="240" x2="280" y2="320" stroke="#d32f2f" stroke-width="5" /> <!-- Fork -->
+  <line x1="180" y1="240" x2="280" y2="320" stroke="#d32f2f" stroke-width="5" /> <!-- Fork -->
 
   <!-- Handlebars -->
   <path d="M 275 230 Q 290 220 300 240" fill="none" stroke="#37474f" stroke-width="5" />

Fixed:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <!-- Background -->
  <rect width="400" height="400" fill="#e0f7fa" />
  
  <!-- Ground -->
  <rect x="0" y="340" width="400" height="60" fill="#8bc34a" />

  <!-- Bicycle Wheels -->
  <circle cx="120" cy="320" r="35" stroke="#37474f" stroke-width="6" fill="none" />
  <circle cx="120" cy="320" r="5" fill="#37474f" />
  <circle cx="280" cy="320" r="35" stroke="#37474f" stroke-width="6" fill="none" />
  <circle cx="280" cy="320" r="5" fill="#37474f" />

  <!-- Bicycle Frame -->
  <path d="M 120 320 L 200 320 L 260 240 L 180 240 Z" fill="none" stroke="#d32f2f" stroke-width="5" />
  <path d="M 280 320 L 260 240" stroke="#d32f2f" stroke-width="5" />
  <path d="M 180 240 L 170 210 M 200 240 L 190 210" stroke="#37474f" stroke-width="4" /> <!-- Seat Post -->
  <line x1="180" y1="240" x2="280" y2="320" stroke="#d32f2f" stroke-width="5" /> <!-- Fork -->

  <!-- Handlebars -->
  <path d="M 275 230 Q 290 220 300 240" fill="none" stroke="#37474f" stroke-width="5" />

  <!-- Pelican Leg (connecting to pedal area) -->
  <path d="M 200 240 L 200 310" stroke="#ffcc80" stroke-width="4" fill="none" />

  <!-- Pelican Body -->
  <ellipse cx="190" cy="200" rx="50" ry="40" fill="white" stroke="#cfd8dc" stroke-width="1" />
  <!-- Wing -->
  <path d="M 160 200 Q 180 170 210 200" fill="none" stroke="#cfd8dc" stroke-width="3" />

  <!-- Pelican Neck -->
  <path d="M 230 180 Q 260 150 240 110" stroke="white" stroke-width="18" fill="none" stroke-linecap="round" />

  <!-- Pelican Head -->
  <circle cx="240" cy="100" r="25" fill="white" />
  
  <!-- Eye -->
  <circle cx="250" cy="95" r="3" fill="#263238" />

  <!-- The Large Pelican Beak -->
  <path d="M 260 100 L 340 115 L 260 130 Z" fill="#ffb74d" stroke="#f57c00" stroke-width="1" />
  <!-- Beak Detail (Lower pouch) -->
  <path d="M 260 115 Q 300 145 260 130" fill="#ffb74d" opacity="0.8" />

</svg>

@sa000o9
Copy link
Copy Markdown

sa000o9 commented Apr 6, 2026

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