JIT
Grid - Untitled
Generate an SVG of a pelican riding a bicycle
<html> <head> <meta charset="UTF-8"> <title>Pelican on a Bicycle - SVG</title> <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; background: radial-gradient(circle at top, #f8fbff 0%, #e1f0ff 45%, #c7ddff 100%); display: flex; align-items: center; justify-content: center; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .wrapper { width: 90vw; max-width: 1100px; height: 80vh; max-height: 800px; display: flex; align-items: center; justify-content: center; } svg { width: 100%; height: 100%; } </style> </head> <body> <div class="wrapper"> <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="roadGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#d8e2f0"></stop>
      <stop offset="100%" stop-color="#a9b7c8"></stop>
    </linearGradient>
    <linearGradient id="pelicanBodyGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffffff"></stop>
      <stop offset="100%" stop-color="#e4e9f2"></stop>
    </linearGradient>
    <linearGradient id="beakGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ffb23c"></stop>
      <stop offset="100%" stop-color="#f07c1a"></stop>
    </linearGradient>
    <linearGradient id="wheelGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#444a59"></stop>
      <stop offset="100%" stop-color="#232631"></stop>
    </linearGradient>
    <linearGradient id="frameGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#2a76ff"></stop>
      <stop offset="100%" stop-color="#52d0ff"></stop>
    </linearGradient>
  </defs>

  
  <rect x="0" y="420" width="800" height="180" fill="url(#roadGrad)" ></rect>

  
  <g fill="#ffffff" opacity="0.9">
    <ellipse cx="140" cy="120" rx="70" ry="30"></ellipse>
    <ellipse cx="190" cy="120" rx="55" ry="25"></ellipse>
    <ellipse cx="165" cy="100" rx="45" ry="22"></ellipse>

    <ellipse cx="620" cy="90" rx="80" ry="32"></ellipse>
    <ellipse cx="670" cy="95" rx="60" ry="25"></ellipse>
    <ellipse cx="640" cy="75" rx="45" ry="20"></ellipse>
  </g>

  
  <g transform="translate(220,120)">
    
    <g transform="translate(90,210)">
      <path d="M0 0 C 40 -30, 80 -35, 110 -10 C 75 -5, 40 0, 0 0 Z" fill="#f0f4fc"></path>
      <path d="M15 -5 C 45 -30, 80 -35, 105 -20 C 75 -15, 45 -8, 15 -5 Z" fill="#dbe4f5"></path>
    </g>

    
    <ellipse cx="130" cy="230" rx="110" ry="80" fill="url(#pelicanBodyGrad)" stroke="#c6cedd" stroke-width="2"></ellipse>

    
    <path d="M80 210 C 40 220, 20 260, 40 295 C 75 315, 125 320, 160 300 C 135 270, 115 240, 80 210 Z"
          fill="#dde4f2" stroke="#c0cadb" stroke-width="2"></path>

    
    <path d="M145 210 C 150 180, 155 150, 150 130 C 145 110, 135 95, 115 90 C 100 87, 85 87, 75 92
             C 70 95, 65 100, 63 110 C 60 125, 60 150, 65 170"
          fill="none" stroke="#e4e9f2" stroke-width="22" stroke-linecap="round"></path>

    
    <ellipse cx="78" cy="98" rx="50" ry="40" fill="#ffffff" stroke="#cfd6e5" stroke-width="2"></ellipse>

    
    <circle cx="90" cy="92" r="8" fill="#1f2430"></circle>
    <circle cx="92" cy="90" r="3" fill="#ffffff"></circle>

    
    <path d="M58 102 C 25 108, -10 115, -50 120 C -75 123, -105 118, -125 110
             C -110 102, -90 93, -65 88 C -40 83, -10 80, 18 82 C 35 83, 49 88, 58 93 Z"
          fill="url(#beakGrad)" stroke="#d66c13" stroke-width="2" ></path>

    
    <path d="M56 102 C 10 110, -20 125, -52 150 C -35 158, -15 162, 6 160
             C 28 158, 47 150, 60 140 C 60 126, 58 115, 56 102 Z"
          fill="#ffc86e" stroke="#e38b19" stroke-width="2"></path>

    
    <path d="M-50 120 C -30 125, -10 130, 10 130" stroke="#e38b19" stroke-width="2" opacity="0.75"></path>

    
    <path d="M55 78 C 67 65, 89 60, 105 66 C 117 70, 125 78, 130 86 C 120 80, 108 78, 97 80
             C 82 83, 68 88, 55 96 Z"
          fill="#f4f7ff" opacity="0.9"></path>

    
    <path d="M150 280 C 160 305, 180 320, 205 328"
          fill="none" stroke="#f5b25c" stroke-width="14" stroke-linecap="round"></path>

    
    <path d="M165 278 C 185 300, 205 310, 228 314"
          fill="none" stroke="#f2a349" stroke-width="12" stroke-linecap="round"></path>

    
    <path d="M205 328 C 215 336, 225 338, 238 336 C 230 330, 222 326, 213 324 Z"
          fill="#f2a349" ></path>
    <path d="M228 314 C 238 324, 250 326, 262 325 C 252 318, 243 314, 234 311 Z"
          fill="#f2a349" ></path>
  </g>

  
  <g transform="translate(200,260)">
    
    <g transform="translate(150,220)">
      <circle cx="0" cy="0" r="82" fill="none" stroke="url(#wheelGrad)" stroke-width="10"></circle>
      <circle cx="0" cy="0" r="65" fill="none" stroke="#5b6475" stroke-width="4"></circle>
      
      <g stroke="#b7bfcd" stroke-width="2">
        <line x1="0" y1="-65" x2="0" y2="65"></line>
        <line x1="-65" y1="0" x2="65" y2="0"></line>
        <line x1="-46" y1="-46" x2="46" y2="46"></line>
        <line x1="-46" y1="46" x2="46" y2="-46"></line>
      </g>
      <circle cx="0" cy="0" r="7" fill="#3b4050"></circle>
    </g>

    
    <g transform="translate(380,220)">
      <circle cx="0" cy="0" r="82" fill="none" stroke="url(#wheelGrad)" stroke-width="10"></circle>
      <circle cx="0" cy="0" r="65" fill="none" stroke="#5b6475" stroke-width="4"></circle>
      
      <g stroke="#b7bfcd" stroke-width="2">
        <line x1="0" y1="-65" x2="0" y2="65"></line>
        <line x1="-65" y1="0" x2="65" y2="0"></line>
        <line x1="-46" y1="-46" x2="46" y2="46"></line>
        <line x1="-46" y1="46" x2="46" y2="-46"></line>
      </g>
      <circle cx="0" cy="0" r="7" fill="#3b4050"></circle>
    </g>

    
    
    <path d="M205 165 L 330 145" stroke="url(#frameGrad)" stroke-width="10" stroke-linecap="round"></path>
    
    <path d="M205 165 L 150 220" stroke="url(#frameGrad)" stroke-width="10" stroke-linecap="round"></path>
    
    <path d="M205 165 L 310 220" stroke="url(#frameGrad)" stroke-width="10" stroke-linecap="round"></path>
    
    <path d="M150 220 L 310 220" stroke="url(#frameGrad)" stroke-width="9" stroke-linecap="round"></path>
    
    <path d="M150 220 L 230 150" stroke="url(#frameGrad)" stroke-width="8" stroke-linecap="round"></path>

    
    <g transform="translate(230,220)">
      <circle cx="0" cy="0" r="13" fill="#3b4050"></circle>
      <circle cx="0" cy="0" r="7" fill="#dfe4f0"></circle>
      
      <line x1="-30" y1="-30" x2="30" y2="30" stroke="#3b4050" stroke-width="6" stroke-linecap="round"></line>
      
      <rect x="-42" y="-38" width="14" height="16" fill="#2f3544" rx="3"></rect>
      <rect x="28" y="22" width="14" height="16" fill="#2f3544" rx="3"></rect>
    </g>

    
    <g transform="translate(380,220)">
      
      <path d="M0 -5 L -35 -85" stroke="url(#frameGrad)" stroke-width="10" stroke-linecap="round"></path>
      
      <line x1="-35" y1="-85" x2="-50" y2="-115" stroke="#2f3544" stroke-width="7" stroke-linecap="round"></line>
      
      <path d="M-80 -120 L -50 -115 L -20 -125" stroke="#2f3544" stroke-width="8" stroke-linecap="round"></path>
      
      <circle cx="-80" cy="-120" r="5" fill="#242832"></circle>
      <circle cx="-20" cy="-125" r="5" fill="#242832"></circle>
    </g>

    
    <g transform="translate(205,165)">
      <line x1="0" y1="0" x2="0" y2="-45" stroke="#3b4050" stroke-width="7" stroke-linecap="round"></line>
      <path d="M-35 -55 C -10 -75, 25 -75, 45 -60 C 20 -56, 5 -52, -35 -55 Z"
            fill="#2f3544"></path>
    </g>
  </g>

  
  <g stroke="#9fb3d0" stroke-width="4" stroke-linecap="round" opacity="0.7">
    <path d="M80 410 Q 120 400, 170 405"></path>
    <path d="M90 435 Q 145 430, 210 432"></path>
    <path d="M560 420 Q 620 415, 700 418"></path>
  </g>
</svg>
</div> </body> </html>
Updated files
v1