Skip to content

Instantly share code, notes, and snippets.

@ArseniyShestakov

ArseniyShestakov/gemma-4-31B-it-three-little-pigs.html

Created May 19, 2026 20:00
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save ArseniyShestakov/a3aa75abbe8fd7818b73f6fa55ee6811 to your computer and use it in GitHub Desktop.
Download ZIP
Gemma 4 31B IT: Three Little Pigs
Raw
gemma-4-31B-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 - SVG Animation</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #e0f7fa;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
#story-container {
position: relative;
width: 800px;
height: 600px;
background-color: #87CEEB; /* Sky Blue */
border: 8px solid #5d4037;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
overflow: hidden;
}
#caption {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #333;
text-shadow: 1px 1px 2px white;
z-index: 10;
padding: 0 20px;
box-sizing: border-box;
}
.ground {
fill: #7cfc00;
}
/* Animation Classes */
.hidden { visibility: hidden; }
.visible { visibility: visible; }
@keyframes huff {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.huffing {
animation: huff 0.5s ease-in-out infinite;
transform-origin: center;
}
@keyframes shake {
0% { transform: translate(0,0); }
25% { transform: translate(5px, 0); }
50% { transform: translate(-5px, 0); }
75% { transform: translate(5px, 0); }
100% { transform: translate(0,0); }
}
.shaking {
animation: shake 0.2s ease-in-out infinite;
}
#wolf { transition: all 1s ease-in-out; }
.pig { transition: all 0.8s ease-in-out; }
</style>
</head>
<body>
<div id="story-container">
<div id="caption">Once upon a time...</div>
<svg width="800" height="600" viewBox="0 0 800 600">
<!-- Environment -->
<rect x="0" y="450" width="800" height="150" class="ground" />
<!-- Straw House -->
<g id="house-straw" class="hidden">
<rect x="100" y="350" width="120" height="100" fill="#f4d03f" stroke="#d4ac0d" stroke-width="3" />
<polygon points="90,350 230,350 160,300" fill="#f1c40f" stroke="#d4ac0d" stroke-width="3" />
<rect x="145" y="410" width="30" height="40" fill="#a04000" />
</g>
<!-- Stick House -->
<g id="house-sticks" class="hidden">
<rect x="340" y="350" width="120" height="100" fill="#a0522d" stroke="#5d4037" stroke-width="3" />
<polygon points="330,350 470,350 400,300" fill="#8b4513" stroke="#5d4037" stroke-width="3" />
<rect x="385" y="410" width="30" height="40" fill="#5d4037" />
</g>
<!-- Brick House -->
<g id="house-bricks">
<rect x="580" y="350" width="120" height="100" fill="#c0392b" stroke="#7b241c" stroke-width="3" />
<polygon points="570,350 710,350 640,300" fill="#a93226" stroke="#7b241c" stroke-width="3" />
<rect x="625" y="410" width="30" height="40" fill="#5d4037" />
<!-- Chimney -->
<rect id="chimney" x="660" y="270" width="30" height="60" fill="#c0392b" stroke="#7b241c" stroke-width="3" />
</g>
<!-- The Pot (Initially Hidden) -->
<g id="pot" class="hidden">
<path d="M620,430 Q620,460 640,460 L660,460 Q680,460 680,430 Z" fill="#7f8c8d" />
<rect x="620" y="425" width="60" height="5" fill="#95a5a6" />
<path id="steam" d="M630,420 Q635,410 630,400 M650,420 Q655,410 650,400" stroke="white" stroke-width="3" fill="none" opacity="0.6" />
</g>
<!-- Pigs -->
<g id="pig1" class="pig">
<circle cx="160" cy="470" r="15" fill="#ffc0cb" />
<circle cx="155" cy="465" r="2" fill="black" />
<circle cx="165" cy="465" r="2" fill="black" />
</g>
<g id="pig2" class="pig">
<circle cx="400" cy="470" r="15" fill="#ffc0cb" />
<circle cx="395" cy="465" r="2" fill="black" />
<circle cx="405" cy="465" r="2" fill="black" />
</g>
<g id="pig3" class="pig">
<circle cx="640" cy="470" r="15" fill="#ffc0cb" />
<circle cx="635" cy="465" r="2" fill="black" />
<circle cx="645" cy="465" r="2" fill="black" />
</g>
<!-- Wolf -->
<g id="wolf" class="hidden">
<ellipse cx="0" cy="470" rx="25" ry="15" fill="#7f8c8d" />
<polygon points="20,470 35,460 20,450" fill="#7f8c8d" /> <!-- Nose -->
<circle cx="15" cy="465" r="3" fill="black" />
</g>
</svg>
</div>
<script>
const caption = document.getElementById('caption');
const wolf = document.getElementById('wolf');
const pot = document.getElementById('pot');
const pig1 = document.getElementById('pig1');
const pig2 = document.getElementById('pig2');
const pig3 = document.getElementById('pig3');
const houseStraw = document.getElementById('house-straw');
const houseSticks = document.getElementById('house-sticks');
const houseBricks = document.getElementById('house-bricks');
async function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
async function startStory() {
// Scene 1: Intro
await sleep(1000);
caption.innerText = "Three little pigs were sent out to seek their fortunes.";
await sleep(3000);
// Scene 2: Construction
caption.innerText = "The first pig built a house of straw...";
houseStraw.className.baseClass = "visible";
houseStraw.style.visibility = "visible";
await sleep(2000);
caption.innerText = "The second pig built a house of sticks...";
houseSticks.style.visibility = "visible";
await sleep(2000);
caption.innerText = "The third pig worked hard and built a house of bricks!";
houseBricks.style.visibility = "visible";
await sleep(3000);
// Scene 3: Straw House
caption.innerText = "Then came the Big Bad Wolf!";
wolf.style.visibility = "visible";
wolf.setAttribute('transform', 'translate(0, 0)');
await sleep(1000);
wolf.setAttribute('transform', 'translate(100, 0)');
await sleep(1000);
caption.innerText = " 'I'll huff and I'll puff and I'll blow your house down!'";
wolf.classList.add('huffing');
houseStraw.classList.add('shaking');
await sleep(2000);
wolf.classList.remove('huffing');
houseStraw.classList.remove('shaking');
houseStraw.style.visibility = "hidden";
caption.innerText = "WHOOSH! The straw house was gone!";
// Pig 1 runs to Stick house
pig1.setAttribute('transform', 'translate(240, 0)');
await sleep(2000);
// Scene 4: Stick House
wolf.setAttribute('transform', 'translate(320, 0)');
await sleep(1000);
caption.innerText = " 'I'll huff and I'll puff and I'll blow your house down!'";
wolf.classList.add('huffing');
houseSticks.classList.add('shaking');
await sleep(2000);
wolf.classList.remove('huffing');
houseSticks.classList.remove('shaking');
houseSticks.style.visibility = "hidden";
caption.innerText = "CRASH! The stick house fell too!";
// Pig 1 and 2 run to Brick house
pig1.setAttribute('transform', 'translate(480, 0)');
pig2.setAttribute('transform', 'translate(480, 0)');
await sleep(2000);
// Scene 5: Brick House
wolf.setAttribute('transform', 'translate(550, 0)');
await sleep(1000);
caption.innerText = " 'I'll huff and I'll puff...'";
wolf.classList.add('huffing');
houseBricks.classList.add('shaking');
await sleep(3000);
wolf.classList.remove('huffing');
houseBricks.classList.remove('shaking');
caption.innerText = "But the brick house stood strong! The wolf was exhausted.";
await sleep(3000);
// Scene 6: The Chimney
caption.innerText = "The wolf decided to climb down the chimney!";
wolf.setAttribute('transform', 'translate(640, -200)');
await sleep(1500);
pot.style.visibility = "visible";
caption.innerText = "But the pigs had a pot of boiling water ready!";
await sleep(2000);
// The Plop
wolf.setAttribute('transform', 'translate(640, 100)');
caption.innerText = "PLOP! Right into the pot!";
await sleep(1000);
wolf.setAttribute('transform', 'translate(640, 150) scale(0.5)');
caption.innerText = "The three little pigs ate the wolf for supper. The End!";
await sleep(4000);
}
window.onload = startStory;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment