JIT
Grid - Untitled
Log in
Claude Sonnet 4.5
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pelican Riding a Bicycle</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); overflow: hidden; font-family: 'Arial', sans-serif; } .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 5vh; } svg { max-width: 90vw; max-height: 90vh; width: auto; height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.2)); } .wheel { animation: rotate 2s linear infinite; transform-origin: center; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .pelican-body { animation: bounce 1s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } </style> </head> <body> <div class="container"> <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"> 
        <ellipse cx="400" cy="520" rx="350" ry="30" fill="#a5d6a7" opacity="0.3"></ellipse>
        
        
        <g id="bicycle">
            
            <g class="wheel" style="transform-origin: 250px 450px;">
                <circle cx="250" cy="450" r="80" fill="none" stroke="#333" stroke-width="8"></circle>
                <circle cx="250" cy="450" r="75" fill="none" stroke="#666" stroke-width="2"></circle>
                <line x1="250" y1="450" x2="250" y2="370" stroke="#333" stroke-width="4"></line>
                <line x1="250" y1="450" x2="310" y2="490" stroke="#333" stroke-width="4"></line>
                <line x1="250" y1="450" x2="190" y2="490" stroke="#333" stroke-width="4"></line>
                <line x1="250" y1="450" x2="310" y2="410" stroke="#333" stroke-width="4"></line>
                <line x1="250" y1="450" x2="190" y2="410" stroke="#333" stroke-width="4"></line>
                <circle cx="250" cy="450" r="12" fill="#333"></circle>
            </g>
            
            
            <g class="wheel" style="transform-origin: 520px 450px;">
                <circle cx="520" cy="450" r="80" fill="none" stroke="#333" stroke-width="8"></circle>
                <circle cx="520" cy="450" r="75" fill="none" stroke="#666" stroke-width="2"></circle>
                <line x1="520" y1="450" x2="520" y2="370" stroke="#333" stroke-width="4"></line>
                <line x1="520" y1="450" x2="580" y2="490" stroke="#333" stroke-width="4"></line>
                <line x1="520" y1="450" x2="460" y2="490" stroke="#333" stroke-width="4"></line>
                <line x1="520" y1="450" x2="580" y2="410" stroke="#333" stroke-width="4"></line>
                <line x1="520" y1="450" x2="460" y2="410" stroke="#333" stroke-width="4"></line>
                <circle cx="520" cy="450" r="12" fill="#333"></circle>
            </g>
            
            
            <line x1="250" y1="450" x2="340" y2="340" stroke="#d32f2f" stroke-width="12" stroke-linecap="round"></line>
            <line x1="340" y1="340" x2="450" y2="340" stroke="#d32f2f" stroke-width="12" stroke-linecap="round"></line>
            <line x1="450" y1="340" x2="520" y2="450" stroke="#d32f2f" stroke-width="12" stroke-linecap="round"></line>
            <line x1="340" y1="340" x2="340" y2="420" stroke="#d32f2f" stroke-width="12" stroke-linecap="round"></line>
            <line x1="340" y1="420" x2="250" y2="450" stroke="#d32f2f" stroke-width="12" stroke-linecap="round"></line>
            
            
            <line x1="450" y1="340" x2="480" y2="300" stroke="#333" stroke-width="10" stroke-linecap="round"></line>
            <line x1="460" y1="300" x2="500" y2="300" stroke="#333" stroke-width="8" stroke-linecap="round"></line>
            
            
            <ellipse cx="280" cy="320" rx="35" ry="15" fill="#333"></ellipse>
            <line x1="300" y1="320" x2="340" y2="340" stroke="#666" stroke-width="8" stroke-linecap="round"></line>
            
            
            <circle cx="340" cy="420" r="25" fill="none" stroke="#666" stroke-width="6"></circle>
            <rect x="315" y="435" width="50" height="8" rx="4" fill="#333"></rect>
        </g>
        
        
        <g class="pelican-body">
            
            <ellipse cx="350" cy="280" rx="65" ry="80" fill="#f5f5f5" stroke="#333" stroke-width="3"></ellipse>
            
            
            <path d="M 320 260 Q 280 240 260 270 Q 270 300 310 290 Z" fill="#e0e0e0" stroke="#333" stroke-width="3"></path>
            
            
            <path d="M 380 240 Q 390 200 410 180" fill="none" stroke="#333" stroke-width="12" stroke-linecap="round"></path>
            <path d="M 380 240 Q 390 200 410 180" fill="none" stroke="#f5f5f5" stroke-width="8" stroke-linecap="round"></path>
            
            
            <ellipse cx="420" cy="160" rx="40" ry="35" fill="#f5f5f5" stroke="#333" stroke-width="3"></ellipse>
            
            
            <circle cx="430" cy="155" r="6" fill="#333"></circle>
            <circle cx="432" cy="153" r="2" fill="#fff"></circle>
            
            
            <path d="M 450 165 L 550 155 L 545 170 L 450 175 Z" fill="#ff9800" stroke="#333" stroke-width="3"></path>
            
            
            <path d="M 450 175 Q 480 195 520 190 Q 540 188 545 170 L 450 175" fill="#ffb74d" stroke="#333" stroke-width="3"></path>
            <path d="M 455 175 Q 470 200 510 195 Q 530 193 540 172" fill="#ffd54f" opacity="0.6"></path>
            
            
            <line x1="340" y1="340" x2="315" y2="410" stroke="#ff6f00" stroke-width="8" stroke-linecap="round"></line>
            <line x1="340" y1="340" x2="365" y2="410" stroke="#ff6f00" stroke-width="8" stroke-linecap="round"></line>
            
            
            <ellipse cx="315" cy="420" rx="18" ry="12" fill="#ff6f00" stroke="#333" stroke-width="2"></ellipse>
            <ellipse cx="365" cy="420" rx="18" ry="12" fill="#ff6f00" stroke="#333" stroke-width="2"></ellipse>
            
            
            <path d="M 410 240 Q 440 260 470 295" fill="none" stroke="#333" stroke-width="8" stroke-linecap="round"></path>
            <path d="M 410 240 Q 440 260 470 295" fill="none" stroke="#e0e0e0" stroke-width="5" stroke-linecap="round"></path>
        </g>
        
        
        <line x1="100" y1="420" x2="150" y2="420" stroke="#333" stroke-width="3" opacity="0.3" stroke-linecap="round"></line>
        <line x1="110" y1="440" x2="170" y2="440" stroke="#333" stroke-width="3" opacity="0.3" stroke-linecap="round"></line>
        <line x1="90" y1="460" x2="140" y2="460" stroke="#333" stroke-width="3" opacity="0.3" stroke-linecap="round"></line>
    </svg>
</div>
</body> </html>*
Updated files
v1
@andronov04
Generate an SVG of a pelican riding a bicycle