Skip to content

Instantly share code, notes, and snippets.

@ArseniyShestakov

ArseniyShestakov/gemma-4-31b-it-frog.html

Created May 19, 2026 19:38
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save ArseniyShestakov/858a42b96af864859a3b89508619da39 to your computer and use it in GitHub Desktop.
Download ZIP
Gemma 4 31B IT: Create animated SVG of a frog on a boat rowing through jungle river. Single page self contained HTML page with SVG
Raw
gemma-4-31b-it-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 Rowing through the Jungle</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1a2f1a;
overflow: hidden;
font-family: sans-serif;
}
.container {
width: 100%;
max-width: 800px;
aspect-ratio: 2 / 1;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
border: 8px solid #3d2b1f;
border-radius: 10px;
background: #87CEEB;
}
svg {
width: 100%;
height: 100%;
display: block;
}
/* ANIMATIONS */
/* Scrolling Jungle Background */
@keyframes scrollJungle {
from { transform: translateX(0); }
to { transform: translateX(-400px); }
}
.jungle-layer {
animation: scrollJungle 10s linear infinite;
}
/* Boat Bobbing */
@keyframes bobbing {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(5px); }
}
.boat-group {
animation: bobbing 2s ease-in-out infinite;
}
/* Rowing Oars */
@keyframes row {
0%, 100% { transform: rotate(-10deg); }
50% { transform: rotate(20deg); }
}
.oar {
animation: row 1.5s ease-in-out infinite;
transform-origin: 380px 240px; /* Pivot point at frog's hand */
}
.oar-right {
animation-delay: 0s;
transform-origin: 420px 240px;
}
.oar-left {
animation-delay: 0s;
transform-origin: 380px 240px;
}
/* Water Ripples */
@keyframes ripple {
0% { transform: translateX(800px); opacity: 0; }
50% { opacity: 0.6; }
100% { transform: translateX(-100px); opacity: 0; }
}
.wave {
animation: ripple 3s linear infinite;
}
.wave-2 { animation-delay: 1s !important; }
.wave-3 { animation-delay: 2s !important; }
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<!-- Sky -->
<rect width="800" height="400" fill="#87CEEB" />
<!-- Distant Jungle (Static) -->
<rect y="200" width="800" height="200" fill="#2d5a27" />
<!-- Moving Jungle Layer -->
<g class="jungle-layer">
<!-- Segment 1 -->
<g transform="translate(0,0)">
<path d="M 50 200 L 100 100 L 150 200 Z" fill="#1e3d1a" />
<path d="M 120 200 L 170 120 L 220 200 Z" fill="#2d5a27" />
<path d="M 200 200 L 250 80 L 300 200 Z" fill="#1e3d1a" />
<path d="M 280 200 L 330 110 L 380 200 Z" fill="#2d5a27" />
<path d="M 350 200 L 400 90 L 450 200 Z" fill="#1e3d1a" />
<!-- Leaves/Details -->
<circle cx="80" cy="150" r="20" fill="#3a6b35" />
<circle cx="220" cy="130" r="25" fill="#3a6b35" />
<circle cx="380" cy="160" r="20" fill="#3a6b35" />
</g>
<!-- Segment 2 (Seamless loop) -->
<g transform="translate(400,0)">
<path d="M 50 200 L 100 100 L 150 200 Z" fill="#1e3d1a" />
<path d="M 120 200 L 170 120 L 220 200 Z" fill="#2d5a27" />
<path d="M 200 200 L 250 80 L 300 200 Z" fill="#1e3d1a" />
<path d="M 280 200 L 330 110 L 380 200 Z" fill="#2d5a27" />
<path d="M 350 200 L 400 90 L 450 200 Z" fill="#1e3d1a" />
<circle cx="80" cy="150" r="20" fill="#3a6b35" />
<circle cx="220" cy="130" r="25" fill="#3a6b35" />
<circle cx="380" cy="160" r="20" fill="#3a6b35" />
</g>
</g>
<!-- River -->
<rect y="250" width="800" height="150" fill="#4a90e2" />
<!-- Water Ripples -->
<ellipse class="wave" cx="0" cy="300" rx="40" ry="5" fill="white" opacity="0.3" />
<ellipse class="wave wave-2" cx="0" cy="330" rx="60" ry="8" fill="white" opacity="0.3" />
<ellipse class="wave wave-3" cx="0" cy="360" rx="30" ry="4" fill="white" opacity="0.3" />
<!-- Boat and Frog Group -->
<g class="boat-group">
<!-- Oars -->
<rect class="oar oar-left" x="375" y="230" width="8" height="80" rx="4" fill="#8b4513" />
<rect class="oar oar-right" x="417" y="230" width="8" height="80" rx="4" fill="#8b4513" />
<!-- Boat Body -->
<path d="M 320 240 Q 400 300 480 240 L 460 230 L 340 230 Z" fill="#5d3a1a" stroke="#3d2b1f" stroke-width="2" />
<!-- Frog -->
<!-- Body -->
<ellipse cx="400" cy="230" rx="25" ry="20" fill="#7cfc00" />
<!-- Eyes -->
<circle cx="388" cy="215" r="7" fill="#7cfc00" />
<circle cx="412" cy="215" r="7" fill="#7cfc00" />
<circle cx="388" cy="215" r="3" fill="black" />
<circle cx="412" cy="215" r="3" fill="black" />
<!-- Mouth -->
<path d="M 392 225 Q 400 230 408 225" stroke="#2d5a27" stroke-width="2" fill="none" />
<!-- Arms (Simplified) -->
<line x1="380" y1="230" x2="380" y2="240" stroke="#7cfc00" stroke-width="6" stroke-linecap="round" />
<line x1="420" y1="230" x2="420" y2="240" stroke="#7cfc00" stroke-width="6" stroke-linecap="round" />
</g>
<!-- Foreground Foliage (Overlays boat) -->
<path d="M 0 400 Q 50 300 100 400 Z" fill="#1e3d1a" />
<path d="M 700 400 Q 750 300 800 400 Z" fill="#1e3d1a" />
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment