Skip to content

Instantly share code, notes, and snippets.

@ArseniyShestakov

ArseniyShestakov/gemini25-flash-frog.html

Created May 19, 2026 18:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ArseniyShestakov/263d6058fe526a62b8f270f0620ec21c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ArseniyShestakov/263d6058fe526a62b8f270f0620ec21c to your computer and use it in GitHub Desktop.
Download ZIP
Gemini 2.5 Flash: Create animated SVG of a frog on a boat rowing through jungle river. Single page self contained HTML page with SVG
Raw
gemini25-flash-frog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frog's Jungle River Adventure</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #2c3e50; /* Dark background for contrast */
font-family: 'Arial', sans-serif;
overflow: hidden; /* Prevent scrollbars if SVG overflows slightly */
}
svg {
display: block;
width: 100%;
max-width: 900px; /* Max width for the SVG */
height: auto;
border: 2px solid #5a7d9a;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-radius: 8px;
background-color: #87CEEB; /* Default sky color if no gradient */
}
/* Basic styles for SVG elements for initial rendering */
#sky { fill: url(#skyGradient); }
#water-surface { fill: url(#waterGradient); }
.jungle-path { fill: #228B22; /* Forest Green */ }
.jungle-detail { fill: #006400; /* Dark Green */ }
.boat-hull { fill: #8B4513; stroke: #5a2e0a; stroke-width: 2px; }
.boat-deck { fill: #A0522D; stroke: #6a3a1f; stroke-width: 1px; }
.frog-body { fill: #6B8E23; /* Olive Drab */ }
.frog-eye-base { fill: #FFF; }
.frog-eye-pupil { fill: #000; }
.frog-mouth { fill: #8B0000; }
.oar-handle { fill: #A0522D; }
.oar-blade { fill: #8B4513; }
</style>
</head>
<body>
<svg width="900" height="600" viewBox="0 0 900 600" preserveAspectRatio="xMidYMid meet">
<title>Frog on a Boat Rowing Through a Jungle River</title>
<desc>An animated SVG scene depicting a frog in a small wooden boat, rowing through a lush jungle river. The river banks scroll by, the water undulates, and the boat bobs as the frog rows.</desc>
<!-- SVG Definitions: Gradients, Patterns -->
<defs>
<!-- Sky Gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#6A5ACD;stop-opacity:1" />
</linearGradient>
<!-- Water Gradient -->
<linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4682B4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0047AB;stop-opacity:1" />
</linearGradient>
<!-- Jungle Foliage Pattern (to make trees appear denser) -->
<pattern id="jungleFoliage" patternUnits="userSpaceOnUse" width="100" height="100">
<circle cx="20" cy="20" r="15" fill="#2E8B57" />
<circle cx="80" cy="30" r="18" fill="#3CB371" />
<circle cx="40" cy="70" r="12" fill="#20B2AA" />
<circle cx="60" cy="85" r="17" fill="#32CD32" />
</pattern>
<!-- Reusable Jungle Bush/Tree shape -->
<g id="jungleBush">
<path d="M0,0 Q10,-20 20,0 Q30,-15 40,0 Q50,-25 60,0 L60,30 L0,30 Z" fill="url(#jungleFoliage)" stroke="#004d00" stroke-width="1" />
<path d="M15,30 L15,40 Q20,50 45,40 L45,30 Z" fill="#654321" stroke="#3d2812" stroke-width="1"/> <!-- Trunk -->
</g>
<!-- A single wave segment for the river -->
<path id="waveSegment" d="M0,0 C25,5 75,5 100,0 C75,-5 25,-5 0,0 Z" fill="rgba(255,255,255,0.15)" />
</defs>
<!-- Background: Sky -->
<rect id="sky" x="0" y="0" width="900" height="300" />
<!-- River Banks (scrolling parallax) -->
<g id="jungle-river-banks">
<!-- Distant bank - slower scroll -->
<g id="far-bank-left" transform="translate(0,0)">
<use href="#jungleBush" transform="translate(0,250) scale(0.8)" />
<use href="#jungleBush" transform="translate(100,240) scale(0.9)" />
<use href="#jungleBush" transform="translate(250,260) scale(0.7)" />
<use href="#jungleBush" transform="translate(380,230) scale(1)" />
<use href="#jungleBush" transform="translate(500,250) scale(0.85)" />
<use href="#jungleBush" transform="translate(650,245) scale(0.95)" />
<use href="#jungleBush" transform="translate(780,235) scale(0.8)" />
<use href="#jungleBush" transform="translate(900,250) scale(0.8)" /> <!-- For seamless looping -->
<animateTransform attributeName="transform" type="translate"
from="0 0" to="-900 0"
dur="25s" repeatCount="indefinite" />
</g>
<g id="far-bank-right" transform="translate(0,0)">
<use href="#jungleBush" transform="translate(0,290) scale(0.8)" />
<use href="#jungleBush" transform="translate(150,280) scale(0.9)" />
<use href="#jungleBush" transform="translate(300,300) scale(0.7)" />
<use href="#jungleBush" transform="translate(450,270) scale(1)" />
<use href="#jungleBush" transform="translate(600,290) scale(0.85)" />
<use href="#jungleBush" transform="translate(750,285) scale(0.95)" />
<use href="#jungleBush" transform="translate(900,290) scale(0.8)" /> <!-- For seamless looping -->
<animateTransform attributeName="transform" type="translate"
from="0 0" to="-900 0"
dur="25s" repeatCount="indefinite" />
</g>
<!-- Near bank - faster scroll -->
<g id="near-bank-left" transform="translate(0,0)">
<use href="#jungleBush" transform="translate(-20,320) scale(1.2)" />
<use href="#jungleBush" transform="translate(120,310) scale(1.3)" />
<use href="#jungleBush" transform="translate(280,330) scale(1.1)" />
<use href="#jungleBush" transform="translate(420,300) scale(1.4)" />
<use href="#jungleBush" transform="translate(580,320) scale(1.25)" />
<use href="#jungleBush" transform="translate(750,315) scale(1.35)" />
<use href="#jungleBush" transform="translate(900,320) scale(1.2)" /> <!-- For seamless looping -->
<animateTransform attributeName="transform" type="translate"
from="0 0" to="-900 0"
dur="15s" repeatCount="indefinite" />
</g>
<g id="near-bank-right" transform="translate(0,0)">
<use href="#jungleBush" transform="translate(-10,360) scale(1.1)" />
<use href="#jungleBush" transform="translate(180,350) scale(1.2)" />
<use href="#jungleBush" transform="translate(350,370) scale(1.0)" />
<use href="#jungleBush" transform="translate(500,340) scale(1.3)" />
<use href="#jungleBush" transform="translate(700,360) scale(1.15)" />
<use href="#jungleBush" transform="translate(900,360) scale(1.1)" /> <!-- For seamless looping -->
<animateTransform attributeName="transform" type="translate"
from="0 0" to="-900 0"
dur="15s" repeatCount="indefinite" />
</g>
</g>
<!-- Water Surface -->
<rect id="water-surface" x="0" y="300" width="900" height="300" />
<!-- Water waves (animated) -->
<g id="water-waves" transform="translate(0,0)">
<use href="#waveSegment" x="0" y="300" transform="scale(3,0.8)" />
<use href="#waveSegment" x="100" y="310" transform="scale(2.5,0.7)" />
<use href="#waveSegment" x="0" y="320" transform="scale(3.5,0.9)" />
<use href="#waveSegment" x="150" y="330" transform="scale(2.8,0.75)" />
<use href="#waveSegment" x="0" y="340" transform="scale(3.2,0.85)" />
<use href="#waveSegment" x="100" y="350" transform="scale(2.7,0.7)" />
<use href="#waveSegment" x="0" y="360" transform="scale(3.8,0.9)" />
<use href="#waveSegment" x="200" y="370" transform="scale(2.9,0.75)" />
<animateTransform attributeName="transform" type="translate"
from="0 0" to="-100 0"
dur="10s" repeatCount="indefinite" />
</g>
<!-- Boat and Frog (grouped for bobbing animation) -->
<g id="boat-and-frog" transform="translate(350,380)">
<!-- Boat Hull -->
<path class="boat-hull" d="M0,50 Q-20,30 20,10 Q60,0 120,10 Q160,30 140,50 Z" />
<!-- Boat Deck -->
<path class="boat-deck" d="M20,10 Q60,0 120,10 L100,30 Q60,20 40,30 Z" />
<!-- Frog -->
<g id="frog" transform="translate(50,-20)">
<!-- Frog body -->
<ellipse class="frog-body" cx="20" cy="20" rx="30" ry="20" />
<!-- Frog head -->
<ellipse class="frog-body" cx="30" cy="0" rx="20" ry="15" />
<!-- Frog eyes -->
<circle class="frog-eye-base" cx="20" cy="-8" r="7" />
<circle class="frog-eye-pupil" cx="20" cy="-8" r="3" />
<circle class="frog-eye-base" cx="40" cy="-8" r="7" />
<circle class="frog-eye-pupil" cx="40" cy="-8" r="3" />
<!-- Frog mouth -->
<path class="frog-mouth" d="M25,5 Q30,10 35,5" stroke="black" stroke-width="1" fill="none" />
<!-- Left Oar and Arm -->
<g id="left-oar-group" transform="translate(10,25)">
<!-- Oar handle -->
<rect class="oar-handle" x="-5" y="-3" width="50" height="6" rx="2" ry="2" />
<!-- Oar blade -->
<path class="oar-blade" d="M45,0 Q55,-5 60,0 Q55,5 45,0 Z" />
<!-- Animated Oar Stroke -->
<animateTransform attributeName="transform" type="rotate"
from="0 0 0" to="-45 0 0"
dur="1.5s" begin="0s" fill="freeze"
keyTimes="0; 0.5; 1"
values="0; -45; 0"
repeatCount="indefinite" />
</g>
<!-- Right Oar and Arm -->
<g id="right-oar-group" transform="translate(55,25)">
<!-- Oar handle -->
<rect class="oar-handle" x="-5" y="-3" width="50" height="6" rx="2" ry="2" />
<!-- Oar blade -->
<path class="oar-blade" d="M45,0 Q55,-5 60,0 Q55,5 45,0 Z" />
<!-- Animated Oar Stroke -->
<animateTransform attributeName="transform" type="rotate"
from="0 0 0" to="45 0 0"
dur="1.5s" begin="0.75s" fill="freeze"
keyTimes="0; 0.5; 1"
values="0; 45; 0"
repeatCount="indefinite" />
</g>
<!-- Frog Body Lean (slight rotation with rowing) -->
<animateTransform attributeName="transform" type="rotate"
from="0 30 20" to="5 30 20"
dur="1.5s"
keyTimes="0; 0.5; 1"
values="0; 5; 0"
repeatCount="indefinite" />
</g>
<!-- Boat Bobbing Animation -->
<animateTransform attributeName="transform" type="translate"
values="350 380; 350 375; 350 380; 350 385; 350 380"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="4s" repeatCount="indefinite" />
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment