Skip to content

Instantly share code, notes, and snippets.

@simonw
Last active January 27, 2026 14:30
Show Gist options
  • Select an option

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

Select an option

Save simonw/32a85e337fbc6ee935d10d89726c0476 to your computer and use it in GitHub Desktop.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Prompt: "Generate an SVG of a pelican riding a bicycle"

Response:

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="beakGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#FFB347;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#FF8C00;stop-opacity:1" />
    </linearGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
      <feOffset dx="2" dy="2" result="offsetblur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.3"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  
  <!-- Background -->
  <rect width="800" height="600" fill="url(#skyGradient)"/>
  
  <!-- Ground -->
  <path d="M 0 500 Q 400 480 800 500 L 800 600 L 0 600 Z" fill="#90EE90"/>
  <path d="M 0 520 Q 400 500 800 520" stroke="#7CFC00" stroke-width="3" fill="none" opacity="0.5"/>
  
  <!-- Motion lines -->
  <g opacity="0.3" stroke="#666" stroke-width="2" stroke-linecap="round">
    <line x1="100" y1="450" x2="50" y2="450"/>
    <line x1="120" y1="470" x2="60" y2="470"/>
    <line x1="700" y1="460" x2="780" y2="460"/>
    <line x1="720" y1="480" x2="790" y2="480"/>
  </g>
  
  <!-- Bicycle Group -->
  <g transform="translate(400, 480)">
    <!-- Back Wheel -->
    <g transform="translate(-120, 0)">
      <circle r="70" fill="none" stroke="#333" stroke-width="8"/>
      <circle r="60" fill="none" stroke="#DDD" stroke-width="4"/>
      <!-- Spokes -->
      <g stroke="#AAA" stroke-width="2">
        <line x1="0" y1="-60" x2="0" y2="60"/>
        <line x1="-52" y1="-30" x2="52" y2="30"/>
        <line x1="-52" y1="30" x2="52" y2="-30"/>
        <line x1="-30" y1="-52" x2="30" y2="52"/>
        <line x1="30" y1="-52" x2="-30" y2="52"/>
      </g>
    </g>
    
    <!-- Front Wheel -->
    <g transform="translate(120, 0)">
      <circle r="70" fill="none" stroke="#333" stroke-width="8"/>
      <circle r="60" fill="none" stroke="#DDD" stroke-width="4"/>
      <!-- Spokes -->
      <g stroke="#AAA" stroke-width="2">
        <line x1="0" y1="-60" x2="0" y2="60"/>
        <line x1="-52" y1="-30" x2="52" y2="30"/>
        <line x1="-52" y1="30" x2="52" y2="-30"/>
        <line x1="-30" y1="-52" x2="30" y2="52"/>
        <line x1="30" y1="-52" x2="-30" y2="52"/>
      </g>
    </g>
    
    <!-- Bike Frame -->
    <path d="M -120 0 L -60 -80 L 80 -80 L 120 0" fill="none" stroke="#2E8B57" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M -60 -80 L -40 -120 L 60 -120 L 80 -80" fill="none" stroke="#2E8B57" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
    <line x1="-40" y1="-120" x2="-50" y2="-140" stroke="#2E8B57" stroke-width="6" stroke-linecap="round"/>
    <line x1="60" y1="-120" x2="120" y2="-160" stroke="#2E8B57" stroke-width="5" stroke-linecap="round"/>
    
    <!-- Handlebars -->
    <path d="M 120 -160 L 130 -170 L 140 -165" fill="none" stroke="#CD853F" stroke-width="5" stroke-linecap="round"/>
    <circle cx="140" cy="-165" r="4" fill="#8B4513"/>
    
    <!-- Seat -->
    <path d="M -55 -140 Q -40 -150 -25 -140 L -20 -140 Q -35 -135 -55 -140" fill="#8B4513"/>
    <line x1="-40" y1="-140" x2="-40" y2="-120" stroke="#666" stroke-width="4"/>
    
    <!-- Pedals and Chain -->
    <circle cx="0" cy="-40" r="15" fill="none" stroke="#666" stroke-width="3"/>
    <line x1="0" y1="-40" x2="-30" y2="20" stroke="#666" stroke-width="4" stroke-linecap="round"/>
    <line x1="0" y1="-40" x2="30" y2="-20" stroke="#666" stroke-width="4" stroke-linecap="round"/>
    <rect x="-35" y="15" width="12" height="8" fill="#444" rx="2"/>
    <rect x="25" y="-25" width="12" height="8" fill="#444" rx="2"/>
  </g>
  
  <!-- Pelican -->
  <g transform="translate(400, 340)" filter="url(#shadow)">
    <!-- Left Leg (back) -->
    <path d="M -20 60 L -30 100 L -40 140" fill="none" stroke="#FFA500" stroke-width="8" stroke-linecap="round"/>
    <path d="M -50 140 L -30 140 L -25 135" fill="none" stroke="#FFA500" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
    
    <!-- Body -->
    <ellipse cx="0" cy="0" rx="65" ry="75" fill="#F5F5F5"/>
    <ellipse cx="0" cy="10" rx="55" ry="60" fill="#FFF8DC" opacity="0.6"/>
    
    <!-- Wing -->
    <path d="M -40 -20 Q -70 0 -60 40 Q -50 70 -20 60 Q 10 50 0 10 Q -10 -30 -40 -20" fill="#E0E0E0" stroke="#CCC" stroke-width="2"/>
    <path d="M -50 10 Q -30 30 -10 20" fill="none" stroke="#999" stroke-width="2" opacity="0.5"/>
    
    <!-- Right Leg (front, on pedal) -->
    <path d="M 20 60 L 35 100 L 50 130" fill="none" stroke="#FF8C00" stroke-width="8" stroke-linecap="round"/>
    <path d="M 40 135 L 60 135 L 65 125" fill="none" stroke="#FF8C00" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
    
    <!-- Neck -->
    <path d="M 30 -50 Q 40 -80 50 -110 Q 55 -130 45 -140" fill="none" stroke="#F5F5F5" stroke-width="25" stroke-linecap="round"/>
    
    <!-- Head -->
    <ellipse cx="45" cy="-150" rx="30" ry="28" fill="#F5F5F5"/>
    
    <!-- Beak -->
    <path d="M 70 -160 Q 130 -170 160 -150 Q 170 -140 160 -130 Q 140 -120 120 -125 Q 100 -130 75 -140" fill="url(#beakGradient)"/>
    <path d="M 75 -140 Q 100 -130 120 -125 Q 130 -120 125 -110 Q 110 -100 90 -105 Q 80 -110 70 -120" fill="#FFA500" opacity="0.8"/>
    
    <!-- Eye -->
    <circle cx="55" cy="-155" r="5" fill="#000"/>
    <circle cx="57" cy="-157" r="2" fill="#FFF"/>
    
    <!-- Beak Detail -->
    <line x1="90" y1="-155" x2="140" y2="-150" stroke="#CC6600" stroke-width="1" opacity="0.5"/>
    
    <!-- Wing Detail -->
    <path d="M -60 40 L -40 20" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round"/>
    
    <!-- Left Wing (holding handlebar) -->
    <path d="M 20 -30 Q 60 -60 90 -80 Q 110 -90 120 -85" fill="none" stroke="#F5F5F5" stroke-width="12" stroke-linecap="round"/>
    <ellipse cx="120" cy="-85" rx="8" ry="12" fill="#FFA500"/>
  </g>
  
  <!-- Small details -->
  <g opacity="0.6">
    <circle cx="200" cy="200" r="30" fill="#FFF" opacity="0.4"/>
    <circle cx="220" cy="210" r="25" fill="#FFF" opacity="0.3"/>
    <circle cx="600" cy="150" r="40" fill="#FFF" opacity="0.5"/>
    <circle cx="630" cy="170" r="30" fill="#FFF" opacity="0.3"/>
  </g>
</svg>
@simonw

simonw commented Jan 27, 2026

Copy link
Copy Markdown
Author
image

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