JIT
Grid - Untitled
Log in
@andronov04
Generate an SVG of a pelican riding a bicycle
GLM 4.6
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pelican on 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, #667eea 0%, #764ba2 100%);
        overflow: hidden;
    }
    
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    svg {
        width: min(80vw, 80vh);
        height: auto;
        filter: drop-shadow(0 20px 40px rgba(0,0,0,0.2));
        animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }
    
    .wheel {
        animation: rotate 2s linear infinite;
        transform-origin: center;
    }
    
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    .cloud {
        position: absolute;
        background: rgba(255,255,255,0.1);
        border-radius: 100px;
        opacity: 0.4;
        animation: drift 20s infinite;
    }
    
    .cloud::before,
    .cloud::after {
        content: '';
        position: absolute;
        background: rgba(255,255,255,0.1);
        border-radius: 100px;
    }
    
    .cloud1 {
        width: 100px;
        height: 40px;
        top: 20%;
        left: -100px;
    }
    
    .cloud1::before {
        width: 50px;
        height: 50px;
        top: -25px;
        left: 10px;
    }
    
    .cloud1::after {
        width: 60px;
        height: 40px;
        top: -15px;
        right: 10px;
    }
    
    .cloud2 {
        width: 80px;
        height: 35px;
        top: 60%;
        right: -80px;
        animation-delay: 10s;
    }
    
    .cloud2::before {
        width: 40px;
        height: 40px;
        top: -20px;
        left: 15px;
    }
    
    .cloud2::after {
        width: 50px;
        height: 35px;
        top: -10px;
        right: 15px;
    }
    
    @keyframes drift {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(100vw + 200px)); }
    }
</style>
</head> <body> <div class="container"> <div class="cloud cloud1"></div> <div class="cloud cloud2"></div> 
    <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
        
        <g id="bike">
            
            <path d="M 150 250 L 200 180 L 250 250 Z" 
                  fill="none" 
                  stroke="#2c3e50" 
                  stroke-width="4" 
                  stroke-linejoin="round"></path>
            
            
            <line x1="200" y1="180" x2="200" y2="160" 
                  stroke="#2c3e50" 
                  stroke-width="4"></line>
            
            
            <line x1="150" y1="250" x2="130" y2="210" 
                  stroke="#2c3e50" 
                  stroke-width="4"></line>
            
            
            <line x1="150" y1="250" x2="250" y2="250" 
                  stroke="#2c3e50" 
                  stroke-width="4"></line>
            
            
            <ellipse cx="200" cy="155" rx="25" ry="8" 
                     fill="#34495e"></ellipse>
            
            
            <path d="M 115 210 Q 130 205 145 210" 
                  fill="none" 
                  stroke="#e74c3c" 
                  stroke-width="5" 
                  stroke-linecap="round"></path>
            
            
            <circle cx="200" cy="250" r="8" fill="#2c3e50"></circle>
            <line x1="200" y1="250" x2="220" y2="240" 
                  stroke="#2c3e50" 
                  stroke-width="3"></line>
            <line x1="200" y1="250" x2="180" y2="240" 
                  stroke="#2c3e50" 
                  stroke-width="3"></line>
            
            
            <g class="wheel">
                <circle cx="150" cy="300" r="40" 
                        fill="none" 
                        stroke="#2c3e50" 
                        stroke-width="4"></circle>
                <circle cx="150" cy="300" r="35" 
                        fill="none" 
                        stroke="#7f8c8d" 
                        stroke-width="1"></circle>
                
                <g stroke="#7f8c8d" stroke-width="1">
                    <line x1="150" y1="260" x2="150" y2="340"></line>
                    <line x1="122" y1="270" x2="178" y2="330"></line>
                    <line x1="110" y1="300" x2="190" y2="300"></line>
                    <line x1="122" y1="330" x2="178" y2="270"></line>
                </g>
            </g>
            
            <g class="wheel">
                <circle cx="250" cy="300" r="40" 
                        fill="none" 
                        stroke="#2c3e50" 
                        stroke-width="4"></circle>
                <circle cx="250" cy="300" r="35" 
                        fill="none" 
                        stroke="#7f8c8d" 
                        stroke-width="1"></circle>
                
                <g stroke="#7f8c8d" stroke-width="1">
                    <line x1="250" y1="260" x2="250" y2="340"></line>
                    <line x1="222" y1="270" x2="278" y2="330"></line>
                    <line x1="210" y1="300" x2="290" y2="300"></line>
                    <line x1="222" y1="330" x2="278" y2="270"></line>
                </g>
            </g>
        </g>
        
        
        <g id="pelican">
            
            <ellipse cx="200" cy="200" rx="45" ry="60" 
                     fill="#ecf0f1"></ellipse>
            
            
            <ellipse cx="200" cy="210" rx="35" ry="45" 
                     fill="#ffffff"></ellipse>
            
            
            <circle cx="200" cy="150" r="30" 
                    fill="#ecf0f1"></circle>
            
            
            <path d="M 200 150 L 180 145 L 175 150 L 180 155 Z" 
                  fill="#f39c12"></path>
            <path d="M 175 150 L 160 150 L 155 148 L 160 152 Z" 
                  fill="#e67e22"></path>
            
            
            <circle cx="195" cy="145" r="5" fill="#2c3e50"></circle>
            <circle cx="196" cy="144" r="2" fill="#ffffff"></circle>
            
            
            <ellipse cx="230" cy="200" rx="25" ry="40" 
                     fill="#bdc3c7" 
                     transform="rotate(20 230 200)"></ellipse>
            
            
            <line x1="225" y1="180" x2="235" y2="185" 
                  stroke="#95a5a6" 
                  stroke-width="2"></line>
            <line x1="225" y1="190" x2="235" y2="195" 
                  stroke="#95a5a6" 
                  stroke-width="2"></line>
            <line x1="225" y1="200" x2="235" y2="205" 
                  stroke="#95a5a6" 
                  stroke-width="2"></line>
            
            
            <line x1="185" y1="240" x2="180" y2="250" 
                  stroke="#f39c12" 
                  stroke-width="3" 
                  stroke-linecap="round"></line>
            <line x1="180" y1="250" x2="175" y2="245" 
                  stroke="#f39c12" 
                  stroke-width="3" 
                  stroke-linecap="round"></line>
            
            <line x1="195" y1="240" x2="200" y2="250" 
                  stroke="#f39c12" 
                  stroke-width="3" 
                  stroke-linecap="round"></line>
            <line x1="200" y1="250" x2="205" y2="245" 
                  stroke="#f39c12" 
                  stroke-width="3" 
                  stroke-linecap="round"></line>
            
            
            <path d="M 180 230 L 170 235 L 172 240 Z" 
                  fill="#bdc3c7"></path>
            <path d="M 180 235 L 168 238 L 170 243 Z" 
                  fill="#95a5a6"></path>
        </g>
        
        
        <line x1="50" y1="340" x2="350" y2="340" 
              stroke="#ffffff" 
              stroke-width="2" 
              opacity="0.3"></line>
    </svg>
</div>
</body> </html>*
Updated files
v1