JIT
Grid - Untitled
Log in
@andronov04
Generate an SVG of a pelican riding a bicycle
Gemini 3.0 Pro
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pelican on a Bicycle</title> <style> body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #87CEEB; overflow: hidden; display: flex; justify-content: center; align-items: center; font-family: sans-serif; } 
    .scene-container {
        width: 100%;
        height: 100%;
        max-width: 1512px;
        max-height: 982px;
        position: relative;
        background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 80%, #8D6E63 80%, #795548 100%);
        box-shadow: 0 0 50px rgba(0,0,0,0.1);
    }

    svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Animations */
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes bump {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }

    @keyframes cloud-move {
        from { transform: translateX(120%); }
        to { transform: translateX(-20%); }
    }

    @keyframes pedal-left {
        0% { transform: translateY(0) rotate(0deg); }
        25% { transform: translateY(-15px) rotate(-10deg); }
        50% { transform: translateY(0) rotate(0deg); }
        75% { transform: translateY(15px) rotate(10deg); }
        100% { transform: translateY(0) rotate(0deg); }
    }

    @keyframes pedal-right {
        0% { transform: translateY(0) rotate(0deg); }
        25% { transform: translateY(15px) rotate(10deg); }
        50% { transform: translateY(0) rotate(0deg); }
        75% { transform: translateY(-15px) rotate(-10deg); }
        100% { transform: translateY(0) rotate(0deg); }
    }

    @keyframes pouch-wobble {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.02); }
    }
    
    @keyframes road-dash {
        from { transform: translateX(0); }
        to { transform: translateX(-100px); }
    }

    /* Element classes */
    .wheel-group {
        transform-box: fill-box;
        transform-origin: center;
        animation: spin 1s linear infinite;
    }

    .rider-group {
        animation: bump 0.5s ease-in-out infinite;
    }

    .cloud {
        opacity: 0.8;
    }
    .cloud-1 { animation: cloud-move 20s linear infinite; }
    .cloud-2 { animation: cloud-move 30s linear infinite reverse; } /* Actually standard direction but different speed/start */
    .cloud-3 { animation: cloud-move 25s linear infinite; animation-delay: -10s; }

    .leg-left {
        transform-box: fill-box;
        transform-origin: top center;
        animation: pedal-left 1s linear infinite;
    }
    .leg-right {
        transform-box: fill-box;
        transform-origin: top center;
        animation: pedal-right 1s linear infinite;
    }
    
    .pouch {
        transform-origin: center top;
        animation: pouch-wobble 2s ease-in-out infinite;
    }

    .road-lines {
        animation: road-dash 0.5s linear infinite;
    }

</style>
</head> <body> 
<div class="scene-container">
    <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice">
        
        
        <defs>
            <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#4FC3F7;stop-opacity:1" ></stop>
                <stop offset="100%" style="stop-color:#E1F5FE;stop-opacity:1" ></stop>
            </linearGradient>
            <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
                <feOffset dx="2" dy="4" result="offsetblur"></feOffset>
                <feComponentTransfer>
                    <feFuncA type="linear" slope="0.3"></feFuncA>
                </feComponentTransfer>
                <feMerge> 
                    <feMergeNode in="offsetblur"></feMergeNode>
                    <feMergeNode in="SourceGraphic"></feMergeNode> 
                </feMerge>
            </filter>
        </defs>

        
        <rect width="800" height="480" fill="url(#skyGradient)" ></rect>

        
        <circle cx="700" cy="80" r="50" fill="#FFEB3B" ></circle>

        
        <g class="cloud cloud-1" transform="translate(100, 80)">
            <path d="M 0 0 A 20 20 0 0 1 20 -20 A 30 30 0 0 1 70 -10 A 25 25 0 0 1 90 20 A 15 15 0 0 1 70 35 H 10 A 15 15 0 0 1 0 0 Z" fill="white" ></path>
        </g>
        <g class="cloud cloud-3" transform="translate(400, 150) scale(0.8)">
            <path d="M 0 0 A 20 20 0 0 1 20 -20 A 30 30 0 0 1 70 -10 A 25 25 0 0 1 90 20 A 15 15 0 0 1 70 35 H 10 A 15 15 0 0 1 0 0 Z" fill="white" ></path>
        </g>

        
        <rect x="0" y="480" width="800" height="120" fill="#5D4037" ></rect>
        <rect x="0" y="480" width="800" height="20" fill="#8D6E63" ></rect> 
        
        
        <g class="road-lines">
            <rect x="0" y="530" width="100" height="10" fill="#FFF" opacity="0.6" rx="5" ></rect>
            <rect x="200" y="530" width="100" height="10" fill="#FFF" opacity="0.6" rx="5" ></rect>
            <rect x="400" y="530" width="100" height="10" fill="#FFF" opacity="0.6" rx="5" ></rect>
            <rect x="600" y="530" width="100" height="10" fill="#FFF" opacity="0.6" rx="5" ></rect>
            <rect x="800" y="530" width="100" height="10" fill="#FFF" opacity="0.6" rx="5" ></rect>
        </g>


        
        <g class="rider-group" transform="translate(0, 20)">
            
            
            <g class="wheel-group" transform="translate(250, 480)">
                <circle cx="0" cy="0" r="55" fill="none" stroke="#333" stroke-width="8" ></circle>
                <circle cx="0" cy="0" r="50" fill="none" stroke="#DDD" stroke-width="2" ></circle>
                <g stroke="#AAA" stroke-width="2">
                    <line x1="0" y1="-50" x2="0" y2="50" ></line>
                    <line x1="-50" y1="0" x2="50" y2="0" ></line>
                    <line x1="-35" y1="-35" x2="35" y2="35" ></line>
                    <line x1="35" y1="-35" x2="-35" y2="35" ></line>
                </g>
                <circle cx="0" cy="0" r="5" fill="#555" ></circle>
            </g>

            
            <g class="wheel-group" transform="translate(550, 480)">
                <circle cx="0" cy="0" r="55" fill="none" stroke="#333" stroke-width="8" ></circle>
                <circle cx="0" cy="0" r="50" fill="none" stroke="#DDD" stroke-width="2" ></circle>
                <g stroke="#AAA" stroke-width="2">
                    <line x1="0" y1="-50" x2="0" y2="50" ></line>
                    <line x1="-50" y1="0" x2="50" y2="0" ></line>
                    <line x1="-35" y1="-35" x2="35" y2="35" ></line>
                    <line x1="35" y1="-35" x2="-35" y2="35" ></line>
                </g>
                <circle cx="0" cy="0" r="5" fill="#555" ></circle>
            </g>

            
            <g class="leg-right" transform="translate(380, 420)">
                
                <path d="M0,0 L10,60" stroke="#FFA726" stroke-width="12" stroke-linecap="round" ></path>
                
                <path d="M0,60 L20,65 L25,75 L10,75 Z" fill="#FFA726" ></path>
                <rect x="5" y="65" width="20" height="6" fill="#333" rx="2" transform="rotate(10)" ></rect>
            </g>

            
            <g filter="url(#shadow)">
                
                <line x1="250" y1="480" x2="380" y2="480" stroke="#D32F2F" stroke-width="8" stroke-linecap="round" ></line>
                
                <line x1="380" y1="480" x2="360" y2="350" stroke="#D32F2F" stroke-width="8" stroke-linecap="round" ></line>
                
                <line x1="380" y1="480" x2="500" y2="380" stroke="#D32F2F" stroke-width="8" stroke-linecap="round" ></line>
                
                <line x1="360" y1="360" x2="500" y2="380" stroke="#D32F2F" stroke-width="8" stroke-linecap="round" ></line>
                
                <line x1="250" y1="480" x2="360" y2="360" stroke="#D32F2F" stroke-width="8" stroke-linecap="round" ></line>
                
                <line x1="500" y1="380" x2="550" y2="480" stroke="#D32F2F" stroke-width="8" stroke-linecap="round" ></line>
                
                <path d="M500,380 L500,340 L460,330" fill="none" stroke="#888" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" ></path>
                
                <rect x="450" y="325" width="20" height="10" fill="#333" rx="3" transform="rotate(-10 460 330)" ></rect>
                
                <path d="M340,350 Q360,340 380,350 L375,360 H345 Z" fill="#333" ></path>
                
                <circle cx="380" cy="480" r="15" fill="#555" ></circle>
            </g>

            
            <g transform="translate(360, 340)"> 
                
                
                <path d="M -40 -10 L -70 -5 L -60 15 Z" fill="#EEE" ></path>

                
                <ellipse cx="0" cy="-30" rx="50" ry="60" fill="#FFF" transform="rotate(-15)" ></ellipse>
                
                
                <path d="M 10 -40 Q 50 -30 80 -10 Q 60 20 20 0 Z" fill="#F5F5F5" stroke="#DDD" stroke-width="2" ></path>
                
                
                <path d="M 20 -70 Q 40 -90 40 -130 L 70 -130 Q 70 -90 50 -60 Z" fill="#FFF" ></path>

                
                <g class="leg-left" transform="translate(20, 80)"> 
                     
                     <path d="M10,0 L15,60" stroke="#FFA726" stroke-width="12" stroke-linecap="round" ></path>
                     <path d="M5,60 L30,65 L35,75 L15,75 Z" fill="#FFA726" ></path>
                     <rect x="10" y="65" width="20" height="6" fill="#333" rx="2" transform="rotate(5)" ></rect>
                </g>

                
                <g transform="translate(55, -130)">
                    
                    <path d="M -15 0 C -15 -25 25 -25 25 0 C 25 10 15 20 0 20 Z" fill="#FFF" ></path>
                    
                    
                    <path d="M 5 -5 L 25 -5 A 5 5 0 0 1 25 10 L 5 10 A 5 5 0 0 1 5 -5 Z" fill="#4FC3F7" stroke="#555" stroke-width="2" opacity="0.8" ></path>
                    <line x1="-15" y1="2" x2="5" y2="2" stroke="#333" stroke-width="4" ></line>

                    
                    <path d="M 25 0 L 100 10 Q 110 15 100 20 L 25 10 Z" fill="#FFB74D" ></path>
                    
                    
                    <path class="pouch" d="M 25 10 L 100 20 Q 80 60 30 50 Q 20 40 15 20 Z" fill="#FFCC00" stroke="#F57F17" stroke-width="1" ></path>
                    
                    
                    <circle cx="15" cy="-5" r="3" fill="#000" ></circle>
                    
                    
                    <path d="M -18 -5 Q 5 -25 28 -5 L 28 -2 Z" fill="#FF5722" ></path>
                    <path d="M 28 -5 L 40 -5 L 38 0 L 28 0 Z" fill="#E64A19" ></path>
                </g>
            </g>

        </g>

        
        <rect x="0" y="590" width="800" height="10" fill="#4E342E" ></rect>

    </svg>
</div>
</body> </html>
Updated files
v1