Created
May 19, 2026 18:43
-
-
Save ArseniyShestakov/3496285c5dac5ba10ebbc0b201a1a533 to your computer and use it in GitHub Desktop.
Gemini 3.1 Flash Lite: Create animated SVG of a frog on a boat rowing through jungle river. Single page self contained HTML page with SVG
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Frog Rowing</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background-color: #2c3e50; | |
| overflow: hidden; | |
| } | |
| /* Animations */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-15px) rotate(-2deg); } | |
| } | |
| @keyframes row { | |
| 0% { transform: rotate(0deg); } | |
| 50% { transform: rotate(-45deg); } | |
| 100% { transform: rotate(0deg); } | |
| } | |
| @keyframes river-flow { | |
| from { transform: translateX(0); } | |
| to { transform: translateX(-100px); } | |
| } | |
| /* Apply classes */ | |
| .boat-container { | |
| animation: float 3s ease-in-out infinite; | |
| transform-origin: center; | |
| } | |
| .arm { | |
| transform-origin: 300px 220px; | |
| animation: row 1.5s ease-in-out infinite; | |
| } | |
| .arm.right { | |
| animation-delay: 0.75s; | |
| } | |
| .water { | |
| animation: river-flow 2s linear infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="600" height="400" viewBox="0 0 600 400"> | |
| <!-- Sky --> | |
| <rect width="600" height="400" fill="#87CEEB" /> | |
| <!-- Jungle Trees --> | |
| <path d="M0,300 Q50,200 100,250 T200,200 T300,250 T400,200 T500,250 T600,200 V400 H0 Z" fill="#2E8B57" /> | |
| <path d="M0,350 Q50,250 100,300 T200,250 T300,300 T400,250 T500,300 T600,250 V400 H0 Z" fill="#228B22" /> | |
| <!-- River --> | |
| <g class="water"> | |
| <path d="M-100,350 C150,320 450,380 700,350 V450 H-100 Z" fill="#1E90FF" opacity="0.8" /> | |
| </g> | |
| <!-- Boat Group --> | |
| <g class="boat-container"> | |
| <!-- Boat --> | |
| <ellipse cx="300" cy="300" rx="60" ry="20" fill="#8B4513" /> | |
| <rect x="250" y="290" width="100" height="20" fill="#A0522D" /> | |
| <!-- Frog --> | |
| <circle cx="300" cy="260" r="25" fill="#32CD32" /> <!-- Body --> | |
| <circle cx="285" cy="245" r="8" fill="white" /> <!-- Eye Left --> | |
| <circle cx="315" cy="245" r="8" fill="white" /> <!-- Eye Right --> | |
| <circle cx="285" cy="245" r="3" fill="black" /> <!-- Pupil Left --> | |
| <circle cx="315" cy="245" r="3" fill="black" /> <!-- Pupil Right --> | |
| <!-- Arms --> | |
| <rect class="arm left" x="270" y="270" width="10" height="40" rx="5" fill="#228B22" /> | |
| <rect class="arm right" x="320" y="270" width="10" height="40" rx="5" fill="#228B22" /> | |
| </g> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment