Skip to content

Instantly share code, notes, and snippets.

@ArseniyShestakov

ArseniyShestakov/gemma-4-26b-a4b-it-three-little-pigs.html

Created May 19, 2026 20:00
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save ArseniyShestakov/1e631caebeb54f9f0cd6d0e3d4d5e3c1 to your computer and use it in GitHub Desktop.
Download ZIP
Gemma 4 26B A4B IT: Three Little Pigs
Raw
gemma-4-26b-a4b-it-three-little-pigs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Little Pigs - Animated Story</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c3e50;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#canvas {
width: 800px;
height: 450px;
background-color: #87CEEB; /* Sky Blue */
border: 8px solid #ecf0f1;
border-radius: 10px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
/* SCENE CONTROL: Using opacity to cycle through scenes */
.scene {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
animation: sceneCycle 30s infinite;
}
/* Timing Logic */
.scene:nth-child(1) { animation-delay: 0s; } /* Intro */
.scene:nth-child(2) { animation-delay: 5s; } /* Straw */
.scene:nth-child(3) { animation-delay: 10s; } /* Sticks */
.scene:nth-child(4) { animation-delay: 15s; } /* Bricks */
.scene:nth-child(5) { animation-delay: 22s; } /* Ending */
@keyframes sceneCycle {
0%, 18% { opacity: 1; }
20%, 100% { opacity: 0; }
}
/* Environment Elements */
.grass {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: #2ecc71;
}
/* Character Animations */
@keyframes wolfRun {
0% { transform: translateX(-100px); }
100% { transform: translateX(200px); }
}
@keyframes huff {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.3); }
}
@keyframes blowHouse {
0% { transform: translate(0, 0) rotate(0); }
100% { transform: translate(500px, -300px) rotate(45deg); opacity: 0; }
}
@keyframes pigRun {
0% { transform: translateX(0); }
100% { transform: translateX(800px); }
}
@keyframes wolfFall {
0% { transform: translateY(0); }
100% { transform: translateY(250px); }
}
@keyframes bubble {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-50px); opacity: 0; }
}
/* Classes for specific animations */
.wolf-huff { animation: huff 1s infinite; }
.house-blow { animation: blowHouse 0.5s forwards; }
.pig-escape { animation: pigRun 0.5s forwards; }
.wolf-descend { animation: wolfFall 1s forwards; }
.bubble-anim { animation: bubble 1s infinite; }
</style>
</head>
<body>
<div id="canvas">
<div class="grass"></div>
<!-- SCENE 1: INTRO -->
<div class="scene">
<svg width="800" height="450">
<text x="300" y="150" font-size="40" fill="white" font-weight="bold">Three Little Pigs</text>
<!-- Three Pigs -->
<circle cx="350" cy="360" r="25" fill="#ffc0cb" /> <!-- Pig 1 -->
<circle cx="400" cy="360" r="25" fill="#ffc0cb" /> <!-- Pig 2 -->
<circle cx="450" cy="360" r="25" fill="#ffc0cb" /> <!-- Pig 3 -->
<text x="330" y="410" fill="white">Once upon a time...</text>
</svg>
</div>
<!-- SCENE 2: STRAW HOUSE -->
<div class="scene">
<svg width="800" height="450">
<!-- Straw House -->
<rect id="strawHouse" x="150" y="250" width="120" height="120" fill="#f1c40f" />
<polygon points="140,250 280,250 210,180" fill="#f1c40f" />
<!-- Pig 1 -->
<circle id="pig1" cx="210" cy="350" r="20" fill="#ffc0cb" />
<!-- Wolf -->
<g id="wolf1" transform="translate(-100, 330)">
<ellipse cx="30" cy="20" rx="40" ry="30" fill="#7f8c8d" />
<circle cx="50" cy="10" r="5" fill="white" /> <!-- Eye -->
<path d="M 60 25 L 75 20 L 60 30 Z" fill="black" /> <!-- Tooth -->
</g>
<!-- Wind effect (hidden by default) -->
<g id="wind" opacity="0">
<path d="M 50 300 Q 80 280 110 300" stroke="white" fill="none" stroke-width="3" />
<path d="M 40 320 Q 70 300 100 320" stroke="white" fill="none" stroke-width="3" />
</g>
</svg>
<script>
// Simple JS to trigger animations within the scene timing
setTimeout(() => {
document.getElementById('wolf1').style.transition = "transform 2s";
document.getElementById('wolf1').style.transform = "translate(100px, 330px)";
setTimeout(() => {
document.getElementById('strawHouse').classList.add('house-blow');
document.getElementById('pig1').classList.add('pig-escape');
}, 2000);
}, 500);
</script>
</div>
<!-- SCENE 3: STICK HOUSE -->
<div class="scene">
<svg width="800" height="450">
<!-- Stick House -->
<rect id="stickHouse" x="150" y="250" width="120" height="120" fill="#a0522d" />
<line x1="150" y1="250" x2="270" y2="370" stroke="#5d4037" stroke-width="5" />
<line x1="270" y1="250" x2="150" y2="370" stroke="#5d4037" stroke-width="5" />
<!-- Two Pigs -->
<circle cx="200" cy="350" r="20" fill="#ffc0cb" />
<circle cx="240" cy="350" r="20" fill="#ffc0cb" />
<!-- Wolf -->
<g id="wolf2" transform="translate(-100, 330)">
<ellipse cx="30" cy="20" rx="40" ry="30" fill="#7f8c8d" />
<circle cx="50" cy="10" r="5" fill="white" />
</g>
</svg>
<script>
setTimeout(() => {
document.getElementById('wolf2').style.transition = "transform 2s";
document.getElementById('wolf2').style.transform = "translate(100px, 330px)";
setTimeout(() => {
document.getElementById('stickHouse').classList.add('house-blow');
// Both pigs run
const pigs = document.querySelectorAll('.scene:nth-child(3) circle');
pigs.forEach(p => p.classList.add('pig-escape'));
}, 2000);
}, 500);
</script>
</div>
<!-- SCENE 4: BRICK HOUSE -->
<div class="scene">
<svg width="800" height="450">
<!-- Brick House -->
<rect x="300" y="150" width="200" height="250" fill="#e74c3c" />
<rect x="300" y="150" width="200" height="20" fill="#c0392b" /> <!-- Roof area -->
<rect x="370" y="280" width="60" height="120" fill="#34495e" /> <!-- Door -->
<rect x="330" y="200" width="30" height="30" fill="#ecf0f1" /> <!-- Window -->
<rect x="440" y="200" width="30" height="30" fill="#ecf0f1" /> <!-- Window -->
<!-- Chimney -->
<rect x="430" y="80" width="40" height="80" fill="#962d22" />
<!-- Three Pigs -->
<circle cx="350" cy="360" r="20" fill="#ffc0cb" />
<circle cx="400" cy="360" r="20" fill="#ffc0cb" />
<circle cx="450" cy="360" r="20" fill="#ffc0cb" />
<!-- Wolf -->
<g id="wolf3" transform="translate(700, 330)">
<ellipse cx="30" cy="20" rx="40" ry="30" fill="#7f8c8d" />
</g>
</svg>
<script>
setTimeout(() => {
document.getElementById('wolf3').style.transition = "transform 2s";
document.getElementById('wolf3').style.transform = "translate(400px, 330px)";
// Wolf huffing and puffing (shaking the house)
setTimeout(() => {
const brickHouse = document.querySelector('.scene:nth-child(4) rect');
brickHouse.style.animation = "huff 0.2s infinite";
// Wolf goes to roof
setTimeout(() => {
document.getElementById('wolf3').style.transition = "transform 2s";
document.getElementById('wolf3').style.transform = "translate(450px, 50px)";
}, 2000);
}, 2000);
}, 500);
</script>
</div>
<!-- SCENE 5: THE ENDING -->
<div class="scene">
<svg width="800" height="450">
<!-- Background for ending -->
<rect x="300" y="150" width="200" height="250" fill="#e74c3c" />
<rect x="430" y="80" width="40" height="80" fill="#962d22" />
<!-- The Pot -->
<path d="M 370 380 Q 370 430 400 430 Q 430 430 430 380 Z" fill="#34495e" />
<rect x="365" y="370" width="70" height="15" rx="5" fill="#2c3e50" />
<!-- Bubbles -->
<circle cx="385" cy="360" r="5" fill="white" class="bubble-anim" />
<circle cx="400" cy="350" r="7" fill="white" class="bubble-anim" style="animation-delay: 0.3s" />
<circle cx="415" cy="365" r="4" fill="white" class="bubble-anim" style="animation-delay: 0.6s" />
<!-- Wolf falling -->
<g id="wolfFinal" transform="translate(440, 100)">
<ellipse cx="30" cy="20" rx="40" ry="30" fill="#7f8c8d" />
</g>
<!-- Happy Pigs -->
<g transform="translate(350, 330)">
<circle cx="0" cy="0" r="20" fill="#ffc0cb" />
<text x="-10" y="5" font-size="12" fill="black">:)</text>
</g>
<g transform="translate(410, 330)">
<circle cx="0" cy="0" r="20" fill="#ffc0cb" />
<text x="-10" y="5" font-size="12" fill="black">:)</text>
</g>
<g transform="translate(470, 330)">
<circle cx="0" cy="0" r="20" fill="#ffc0cb" />
<text x="-10" y="5" font-size="12" fill="black">:)</text>
</g>
</svg>
<script>
setTimeout(() => {
document.getElementById('wolfFinal').classList.add('wolf-descend');
// Wolf disappears after falling
setTimeout(() => {
document.getElementById('wolfFinal').style.display = 'none';
}, 1000);
}, 500);
</script>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment