Created
May 19, 2026 18:55
-
-
Save ArseniyShestakov/da742884e5e830ce71ee4db877519e96 to your computer and use it in GitHub Desktop.
Gemma 4 E4B it: 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 on a Jungle River</title> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| margin: 0; | |
| background-color: #f0f8ff; | |
| } | |
| /* --- ANIMATION KEYFRAMES --- */ | |
| /* 1. Boat Movement (Horizontal translation) */ | |
| @keyframes boatMove { | |
| 0% { | |
| transform: translateX(-100px); | |
| } | |
| 100% { | |
| transform: translateX(100vw); /* Moves across the entire viewport width */ | |
| } | |
| } | |
| /* 2. Rowing Motion (Arm rotation) */ | |
| @keyframes row { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 50% { | |
| transform: rotate(45deg); | |
| } | |
| 100% { | |
| transform: rotate(0deg); | |
| } | |
| } | |
| /* 3. Subtle Water Ripple Movement */ | |
| @keyframes waterSway { | |
| 0% { | |
| transform: translateX(0px); | |
| } | |
| 100% { | |
| transform: translateX(5px); | |
| } | |
| } | |
| /* --- SVG STYLING --- */ | |
| .river { | |
| fill: #4682b4; /* Steel Blue */ | |
| } | |
| .jungle-leaf { | |
| fill: #228b22; /* Forest Green */ | |
| } | |
| .boat { | |
| fill: #8b4513; /* Saddle Brown */ | |
| } | |
| .frog { | |
| fill: #32cd32; /* Lime Green */ | |
| } | |
| .arm { | |
| fill: #32cd32; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="100%" height="400" viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- =================================================================== --> | |
| <!-- 1. BACKGROUND: JUNGLE (Static) --> | |
| <!-- =================================================================== --> | |
| <g id="jungle"> | |
| <!-- Left side foliage --> | |
| <path class="jungle-leaf" d="M0 0 Q 100 50, 0 100 L 0 400 L 100 400 Z" /> | |
| <path class="jungle-leaf" d="M0 0 Q 200 30, 0 80 L 0 400 L 200 400 Z" /> | |
| <!-- Right side foliage --> | |
| <path class="jungle-leaf" d="M1000 0 Q 900 50, 1000 100 L 1000 400 L 900 400 Z" /> | |
| <path class="jungle-leaf" d="M1000 0 Q 800 30, 1000 80 L 1000 400 L 800 400 Z" /> | |
| </g> | |
| <!-- =================================================================== --> | |
| <!-- 2. RIVER (Animated Sway) --> | |
| <!-- =================================================================== --> | |
| <g class="river" transform="translate(0, 250)"> | |
| <rect x="0" y="0" width="1000" height="150" class="river" style="transform-origin: center; animation: waterSway 4s infinite alternate ease-in-out;" /> | |
| </g> | |
| <!-- =================================================================== --> | |
| <!-- 3. BOAT AND FROG (Animated Group) --> | |
| <!-- =================================================================== --> | |
| <!-- The entire group moves horizontally --> | |
| <g id="boat-frog-group" transform="translate(0, 200)" style="animation: boatMove 15s linear infinite;"> | |
| <!-- The Boat --> | |
| <path class="boat" d="M 100 200 Q 150 180, 250 200 L 230 220 Q 150 240, 100 220 Z" /> | |
| <!-- The Frog (Body) --> | |
| <circle class="frog" cx="180" cy="19" r="250" /> | |
| <!-- Frog Arms (Rowing) --> | |
| <!-- Left Arm --> | |
| <g class="arm" transform="translate="70,0" style="animation: row 1s infinite linear;"> | |
| <rect class="arm" x="0" y0" width="15" height="15" rx="2" ry="2" /> | |
| </g> | |
| <!-- Right Arm --> | |
| <g class="arm" transform="translate="0,0" style="animation: row 1s infinite linear; animation-delay: 0.25s;"> | |
| <rect class="arm" x="0" y="0" width="5" height="15" rx="2" ry="2" /> | |
| </g> | |
| </g> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment