Skip to content

Instantly share code, notes, and snippets.

@ArseniyShestakov

ArseniyShestakov/gemma-4-26b-a4b-it-frog.html

Created May 19, 2026 19:40
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save ArseniyShestakov/4adb7703897e0c6b583f9de928e4aef2 to your computer and use it in GitHub Desktop.
Download ZIP
Gemma 4 26B A4B 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-26b-a4b-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 Jungle</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c3e50;
overflow: hidden;
}
.canvas-container {
width: 800px;
height: 400px;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
border-radius: 8px;
overflow: hidden;
background: #87CEEB; /* Sky fallback */
}
svg {
width: 100%;
height: 100%;
display: block;
}
/* Parallax Background Movement */
.jungle-bg {
animation: scrollBackground 20s linear infinite;
}
.river-flow {
animation: scrollBackground 8s linear infinite;
}
@keyframes scrollBackground {
from { transform: translateX(0); }
to { transform: translateX(-800px); }
}
/* Boat Bobbing Motion */
#boat-group {
animation: bobbing 3s ease-in-out infinite;
}
@keyframes bobbing {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(5px) rotate(1deg); }
}
/* Water Ripples */
.ripple {
opacity: 0.6;
animation: rippleEffect 4s ease-in-out infinite;
}
@keyframes rippleEffect {
0%, 100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.2); opacity: 0.6; }
}
</style>
</head>
<body>
<div class="canvas-container">
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<!-- Definitions for Gradients and Patterns -->
<defs>
<linearGradient id="riverGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2980b9;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1abc9c;stop-opacity:1" />
</linearGradient>
<pattern id="leafPattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<path d="M50 0 Q70 50 50 100 Q30 50 50 0" fill="#1b4d3e" />
</pattern>
</defs>
<!-- 1. SKY/BACKGROUND -->
<rect width="800" height="400" fill="#4facfe" />
<circle cx="700" cy="80" r="40" fill="#fff9c4" opacity="0.6" />
<!-- 2. DISTANT JUNGLE (Moving Background) -->
<g class="jungle-bg">
<!-- Creating a long strip of jungle foliage -->
<rect x="0" y="150" width="1600" height="250" fill="#1e3d33" />
<path d="M0 250 Q50 150 100 250 T200 250 T300 250 T400 250 T500 250 T600 250 T700 250 T800 250 T900 250 T1000 250 T1100 250 T1200 250 T1300 250 T1400 250 T1500 250 T1600 250" fill="#14332a" />
<!-- Random Leaf Shapes -->
<circle cx="100" cy="200" r="60" fill="#2d5a27" />
<circle cx="300" cy="180" r="80" fill="#2d5a27" />
<circle cx="500" cy="220" r="70" fill="#2d5a27" />
<circle cx="700" cy="190" r="90" fill="#2d5a27" />
<circle cx="900" cy="210" r="75" fill="#2d5a27" />
<circle cx="1100" cy="170" r="85" fill="#2d5a27" />
<circle cx="1300" cy="230" r="65" fill="#2d5a27" />
<circle cx="1500" cy="200" r="70" fill="#2d5a27" />
</g>
<!-- 3. RIVER -->
<rect x="0" y="250" width="800" height="150" fill="url(#riverGrad)" />
<!-- River Flow Lines -->
<g class="river-flow">
<rect x="0" y="260" width="1600" height="140" fill="none" />
<path d="M0 280 Q 200 270 400 280 T 800 280 T 1200 280 T 1600 280" stroke="white" stroke-width="2" fill="none" opacity="0.3" />
<path d="M0 320 Q 200 330 400 320 T 800 320 T 1200 320 T 1600 320" stroke="white" stroke-width="2" fill="none" opacity="0.2" />
<path d="M0 360 Q 200 350 400 360 T 800 360 T 1200 360 T 1600 360" stroke="white" stroke-width="2" fill="none" opacity="0.3" />
</g>
<!-- 4. THE BOAT & FROG GROUP -->
<g id="boat-group">
<!-- Oars (Animated with SMIL) -->
<!-- Left Oar -->
<g id="oar-left">
<rect x="-10" y="240" width="8" height="80" fill="#795548" rx="4" />
<animateTransform
attributeName="transform"
type="rotate"
from="-20 350 240"
to="20 350 240"
dur="1.5s"
repeatCount="indefinite"
additive="replace" />
<!-- The pivot point is roughly where the oar meets the boat -->
</g>
<!-- Actually, let's use a cleaner way for oars: Rotate around a point -->
<g>
<rect x="330" y="255" width="6" height="70" fill="#5d4037" rx="3" />
<animateTransform
attributeName="transform"
type="rotate"
from="-25 333 255"
to="25 333 255"
dur="1.5s"
repeatCount="indefinite" />
</g>
<g>
<rect x="460" y="255" width="6" height="70" fill="#5d4037" rx="3" />
<animateTransform
attributeName="transform"
type="rotate"
from="25 463 255"
to="-25 463 255"
dur="1.5s"
repeatCount="indefinite" />
</g>
<!-- Boat Hull -->
<path d="M320 250 L480 250 L450 290 L350 290 Z" fill="#8d6e63" />
<path d="M320 250 L480 250 L480 260 L320 260 Z" fill="#5d4037" />
<!-- The Frog -->
<g id="frog">
<!-- Body -->
<ellipse cx="400" cy="235" rx="20" ry="22" fill="#4caf50" />
<!-- Eyes -->
<circle cx="390" cy="215" r="8" fill="#4caf50" />
<circle cx="410" cy="215" r="8" fill="#4caf50" />
<circle cx="390" cy="215" r="4" fill="white" />
<circle cx="410" cy="215" r="4" fill="white" />
<circle cx="390" cy="215" r="2" fill="black" />
<circle cx="410" cy="215" r="2" fill="black" />
<!-- Smile -->
<path d="M395 230 Q400 235 405 230" stroke="black" fill="none" stroke-width="1" />
</g>
</g>
<!-- 5. FOREGROUND RIPPLES -->
<circle class="ripple" cx="400" cy="300" r="20" stroke="white" fill="none" stroke-width="2" />
<circle class="ripple" cx="400" cy="300" r="40" stroke="white" fill="none" stroke-width="1" style="animation-delay: 1s;" />
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment