Skip to content

Instantly share code, notes, and snippets.

@simonw
Created April 8, 2026 21:54
Show Gist options
  • Select an option

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

Select an option

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

Prompt

Generate an SVG of a pelican riding a bicycle

Response

Got you — here’s a clean SVG of a pelican riding a bicycle you can drop straight into HTML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="400" height="300">
  <title>Pelican riding a bicycle</title>
  <!-- Ground line -->
  <line x1="0" y1="260" x2="400" y2="260" stroke="#999" stroke-width="2"/>
  
  <!-- Bicycle wheels -->
  <g stroke="#333" stroke-width="4" fill="none">
    <circle cx="120" cy="220" r="35"/>
    <circle cx="280" cy="220" r="35"/>
    <!-- Spokes -->
    <g stroke-width="1" opacity="0.5">
      <line x1="120" y1="220" x2="120" y2="185"/>
      <line x1="120" y1="220" x2="155" y2="220"/>
      <line x1="120" y1="220" x2="120" y2="255"/>
      <line x1="120" y1="220" x2="85" y2="220"/>
      <line x1="280" y1="220" x2="280" y2="185"/>
      <line x1="280" y1="220" x2="315" y2="220"/>
      <line x1="280" y1="220" x2="280" y2="255"/>
      <line x1="280" y1="220" x2="245" y2="220"/>
    </g>
  </g>
  
  <!-- Bicycle frame -->
  <g stroke="#d32f2f" stroke-width="5" fill="none" stroke-linecap="round">
    <line x1="120" y1="220" x2="200" y2="160"/> <!-- rear to seat -->
    <line x1="200" y1="160" x2="280" y2="220"/> <!-- seat to front wheel -->
    <line x1="200" y1="160" x2="190" y2="220"/> <!-- seat tube -->
    <line x1="190" y1="220" x2="265" y2="190"/> <!-- chain stay -->
    <line x1="265" y1="190" x2="280" y2="220"/> <!-- front fork -->
  </g>
  
  <!-- Handlebars and seat -->
  <g stroke="#333" stroke-width="4" stroke-linecap="round">
    <line x1="255" y1="180" x2="275" y2="170"/> <!-- handlebars -->
    <line x1="190" y1="155" x2="210" y2="155"/> <!-- seat -->
  </g>
  
  <!-- Pedals -->
  <circle cx="190" cy="220" r="8" fill="#333"/>
  <line x1="182" y1="220" x2="175" y2="230" stroke="#333" stroke-width="3"/>
  <line x1="198" y1="220" x2="205" y2="210" stroke="#333" stroke-width="3"/>
  
  <!-- Pelican body -->
  <ellipse cx="195" cy="140" rx="25" ry="35" fill="#f5f5f5" stroke="#333" stroke-width="2"/>
  
  <!-- Pelican wing -->
  <ellipse cx="185" cy="145" rx="12" ry="20" fill="#e0e0e0" stroke="#333" stroke-width="2" transform="rotate(-20 185 145)"/>
  
  <!-- Pelican head -->
  <circle cx="210" cy="105" r="18" fill="#f5f5f5" stroke="#333" stroke-width="2"/>
  
  <!-- Pelican beak - the iconic pouch -->
  <path d="M 228 105 L 265 115 L 260 125 L 228 115 Z" fill="#ff9800" stroke="#333" stroke-width="2"/>
  <path d="M 228 115 Q 245 130 260 125" fill="none" stroke="#333" stroke-width="2"/> <!-- pouch line -->
  
  <!-- Eye -->
  <circle cx="215" cy="100" r="3" fill="#333"/>
  
  <!-- Pelican legs on pedals -->
  <g stroke="#ff9800" stroke-width="4" stroke-linecap="round">
    <line x1="190" y1="175" x2="175" y2="230"/> <!-- left leg -->
    <line x1="200" y1="175" x2="205" y2="210"/> <!-- right leg -->
  </g>
  
  <!-- Pelican feet -->
  <ellipse cx="175" cy="232" rx="6" ry="3" fill="#ff9800"/>
  <ellipse cx="205" cy="212" rx="6" ry="3" fill="#ff9800"/>
</svg>

How to use it:

  1. Copy the whole <svg>...</svg> block
  2. Paste it into an .html file or directly in your site
  3. Tweak colors, sizes, or viewBox if you need

Want me to adjust the style? I can make it more cartoonish, minimalist, or add motion lines to show it zipping along.

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