Skip to content

Instantly share code, notes, and snippets.

@ArseniyShestakov

ArseniyShestakov/Gemini-35-flash-thinking-high-three-little-pigs.html

Created May 19, 2026 19:52
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save ArseniyShestakov/ed9faa53604035005cae86c63c766a12 to your computer and use it in GitHub Desktop.
Download ZIP
Gemini 3.5 Flash Thinking High: Three Little Pigs
Raw
Gemini-35-flash-thinking-high-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;
padding: 0;
background-color: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.canvas-container {
width: 100%;
max-width: 800px;
aspect-ratio: 16 / 9;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
border-radius: 8px;
overflow: hidden;
background: #e0f7fa;
}
svg {
width: 100%;
height: 100%;
}
/* --- Keyframe Animations --- */
/* Global Scene Switching (Looping 24s timeline) */
.scene {
opacity: 0;
animation-duration: 24s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#scene1 { animation-name: scene1-fade; }
#scene2 { animation-name: scene2-fade; }
#scene3 { animation-name: scene3-fade; }
#scene4 { animation-name: scene4-fade; }
@keyframes scene1-fade {
0%, 22.9% { opacity: 1; visibility: visible; }
23%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes scene2-fade {
0%, 22.9% { opacity: 0; visibility: hidden; }
23%, 47.9% { opacity: 1; visibility: visible; }
48%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes scene3-fade {
0%, 47.9% { opacity: 0; visibility: hidden; }
48%, 72.9% { opacity: 1; visibility: visible; }
73%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes scene4-fade {
0%, 72.9% { opacity: 0; visibility: hidden; }
73%, 99.9% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
/* Character & Object Animations */
/* Wolf Movement */
.wolf-enter {
transform: translateX(-150px);
animation: wolf-walk-in 24s infinite linear;
}
@keyframes wolf-walk-in {
/* Scene 1 */
0% { transform: translateX(-150px); }
5% { transform: translateX(0px); }
15% { transform: translateX(0px); }
19% { transform: translateX(350px); }
23%, 100% { transform: translateX(-150px); }
}
.wolf-enter2 {
transform: translateX(-150px);
animation: wolf-walk-in2 24s infinite linear;
}
@keyframes wolf-walk-in2 {
/* Scene 2 */
0%, 23% { transform: translateX(-150px); }
28% { transform: translateX(0px); }
38% { transform: translateX(0px); }
42% { transform: translateX(350px); }
48%, 100% { transform: translateX(-150px); }
}
/* Huff & Puff Wind */
.wind {
opacity: 0;
transform: scaleX(0.1);
transform-origin: left center;
animation: blow-wind 24s infinite ease-out;
}
.wind-s2 {
opacity: 0;
transform: scaleX(0.1);
transform-origin: left center;
animation: blow-wind-s2 24s infinite ease-out;
}
.wind-s3 {
opacity: 0;
transform: scaleX(0.1);
transform-origin: left;
animation: blow-wind-s3 24s infinite ease-out;
}
@keyframes blow-wind {
0%, 8% { opacity: 0; transform: scaleX(0.1) translate(180px, 240px); }
10%, 13% { opacity: 0.8; transform: scaleX(1) translate(180px, 240px); }
14%, 100% { opacity: 0; transform: scaleX(1) translate(250px, 240px); }
}
@keyframes blow-wind-s2 {
0%, 30% { opacity: 0; transform: scaleX(0.1) translate(180px, 240px); }
32%, 35% { opacity: 0.8; transform: scaleX(1) translate(180px, 240px); }
36%, 100% { opacity: 0; transform: scaleX(1) translate(250px, 240px); }
}
@keyframes blow-wind-s3 {
0%, 53% { opacity: 0; transform: scaleX(0.1) translate(180px, 240px); }
55%, 58% { opacity: 0.8; transform: scaleX(1.1) translate(180px, 240px); }
59% { opacity: 0; transform: scaleX(1.1) translate(200px, 240px); }
60%, 63% { opacity: 0.8; transform: scaleX(1.1) translate(180px, 240px); }
64%, 100% { opacity: 0; transform: scaleX(1.1) translate(200px, 240px); }
}
/* House Destructions */
.straw-house {
transform-origin: bottom center;
animation: straw-collapse 24s infinite ease-in-out;
}
@keyframes straw-collapse {
0%, 11% { transform: translate(0,0) rotate(0deg); opacity: 1; }
13%, 100% { transform: translate(300px, -150px) rotate(45deg); opacity: 0; }
}
.stick-house {
transform-origin: bottom center;
animation: stick-collapse 24s infinite ease-in-out;
}
@keyframes stick-collapse {
0%, 33% { transform: translate(0,0) rotate(0deg); opacity: 1; }
35%, 100% { transform: translate(300px, -100px) rotate(25deg); opacity: 0; }
}
/* Pigs Running Away */
.pig-run1 {
animation: pig1-escape 24s infinite linear;
}
@keyframes pig1-escape {
0%, 11% { transform: translateX(0); }
14%, 23% { transform: translateX(450px); }
24%, 100% { transform: translateX(0); }
}
.pigs-run2 {
animation: pigs2-escape 24s infinite linear;
}
@keyframes pigs2-escape {
0%, 33% { transform: translateX(0); }
36%, 48% { transform: translateX(450px); }
49%, 100% { transform: translateX(0); }
}
/* Scene 3 Wolf climb */
.wolf-s3 {
animation: wolf-climb 24s infinite ease-in-out;
}
@keyframes wolf-climb {
0%, 48% { transform: translate(-150px, 0); }
51%, 64% { transform: translate(0, 0); }
67%, 73% { transform: translate(180px, -160px); }
74%, 100% { transform: translate(180px, -160px); }
}
/* Scene 4 Wolf Falling down chimney */
.wolf-fall {
transform: translateY(-300px);
animation: wolf-down-chimney 24s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
@keyframes wolf-down-chimney {
0%, 75% { transform: translateY(-300px); opacity: 1;}
81% { transform: translateY(110px); opacity: 1; }
83%, 100% { transform: translateY(110px); opacity: 0; }
}
/* Water Splash */
.splash {
transform: scale(0);
transform-origin: 400px 370px;
opacity: 0;
animation: splash-impact 24s infinite ease-out;
}
@keyframes splash-impact {
0%, 80% { transform: scale(0); opacity: 0; }
81% { transform: scale(1); opacity: 1; }
85%, 100% { transform: scale(1.5); opacity: 0; }
}
/* End Card */
.end-card {
opacity: 0;
animation: end-fade 24s infinite ease-in-out;
}
@keyframes end-fade {
0%, 86% { opacity: 0; }
90%, 98% { opacity: 1; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<div class="canvas-container">
<svg viewBox="0 0 800 450">
<!-- Shared Background Elements -->
<defs>
<!-- Pig Template -->
<g id="pig">
<ellipse cx="0" cy="0" rx="20" ry="16" fill="#ff80ab" />
<circle cx="15" cy="-2" r="10" fill="#ff4081" />
<ellipse cx="21" cy="0" rx="5" ry="3" fill="#ff80ab" />
<circle cx="21" cy="-1" r="1" fill="#000" />
<polygon points="10,-10 15,-20 5,-14" fill="#ff4081" />
<circle cx="11" cy="-5" r="1.5" fill="#000" />
<rect x="-15" y="10" width="6" height="12" fill="#ff4081" rx="2" />
<rect x="5" y="10" width="6" height="12" fill="#ff4081" rx="2" />
</g>
<!-- Wolf Template -->
<g id="wolf">
<ellipse cx="0" cy="0" rx="30" ry="20" fill="#78909c" />
<polygon points="15,-5 40,5 15,15" fill="#546e7a" />
<circle cx="25" cy="0" r="2" fill="#ffeb3b" />
<polygon points="10,-15 18,-30 5,-22" fill="#37474f" />
<polygon points="-10,-15 -18,-30 -5,-22" fill="#37474f" />
<rect x="-20" y="15" width="8" height="20" fill="#37474f" rx="2" />
<rect x="10" y="15" width="8" height="20" fill="#37474f" rx="2" />
<path d="M-28,5 Q-45,25 -35,35" stroke="#78909c" stroke-width="8" fill="none" stroke-linecap="round"/>
</g>
<!-- Wind Template -->
<g id="wind-gust">
<path d="M0,0 Q50,-10 100,0 T200,-5" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.7"/>
<path d="M20,20 Q70,10 120,20 T220,15" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
</g>
</defs>
<!-- SCENE 1: STRAW HOUSE -->
<g id="scene1" class="scene">
<!-- Background -->
<rect width="800" height="450" fill="#e0f7fa" />
<rect y="320" width="800" height="130" fill="#81c784" />
<!-- Straw House -->
<g class="straw-house" transform="translate(500, 200)">
<rect x="0" y="40" width="160" height="90" fill="#fff59d" rx="5" />
<polygon points="-20,40 80,-20 180,40" fill="#ffe082" />
<rect x="60" y="80" width="40" height="50" fill="#8d6e63" />
</g>
<!-- Pig 1 -->
<g class="pig-run1" transform="translate(420, 300)">
<use href="#pig" />
</g>
<!-- Wolf -->
<g class="wolf-enter" transform="translate(150, 290)">
<use href="#wolf" />
</g>
<!-- Wind -->
<use href="#wind-gust" class="wind" />
</g>
<!-- SCENE 2: STICK HOUSE -->
<g id="scene2" class="scene">
<!-- Background -->
<rect width="800" height="450" fill="#e0f7fa" />
<rect y="320" width="800" height="130" fill="#81c784" />
<!-- Stick House -->
<g class="stick-house" transform="translate(500, 190)">
<rect x="0" y="50" width="160" height="90" fill="#bcaaa4" rx="4" />
<polygon points="-20,50 80,-10 180,50" fill="#8d6e63" />
<!-- Stick details -->
<line x1="20" y1="50" x2="20" y2="140" stroke="#5d4037" stroke-width="4" />
<line x1="60" y1="50" x2="60" y2="140" stroke="#5d4037" stroke-width="4" />
<line x1="100" y1="50" x2="100" y2="140" stroke="#5d4037" stroke-width="4" />
<line x1="140" y1="50" x2="140" y2="140" stroke="#5d4037" stroke-width="4" />
<rect x="65" y="90" width="30" height="50" fill="#4e342e" />
</g>
<!-- Pigs Running -->
<g class="pigs-run2" transform="translate(410, 300)">
<!-- Pig 1 -->
<use href="#pig" transform="translate(-30, 0) scale(0.95)" />
<!-- Pig 2 -->
<use href="#pig" />
</g>
<!-- Wolf -->
<g class="wolf-enter2" transform="translate(150, 290)">
<use href="#wolf" />
</g>
<!-- Wind -->
<use href="#wind-gust" class="wind-s2" />
</g>
<!-- SCENE 3: BRICK HOUSE -->
<g id="scene3" class="scene">
<!-- Background -->
<rect width="800" height="450" fill="#e0f7fa" />
<rect y="320" width="800" height="130" fill="#81c784" />
<!-- Brick House (Remains Still) -->
<g id="brick-house" transform="translate(480, 160)">
<rect x="0" y="70" width="190" height="100" fill="#d32f2f" rx="5" stroke="#b71c1c" stroke-width="3" />
<!-- Chimney -->
<rect x="130" y="10" width="35" height="70" fill="#b71c1c" />
<rect x="125" y="5" width="45" height="10" fill="#7f0000" />
<!-- Roof -->
<polygon points="-20,70 95,0 210,70" fill="#b71c1c" />
<rect x="75" y="110" width="40" height="60" fill="#5d4037" />
<!-- Window with Pigs looking out -->
<rect x="25" y="95" width="35" height="35" fill="#fff" rx="3" />
<circle cx="35" cy="115" r="6" fill="#ff80ab" />
<circle cx="50" cy="115" r="6" fill="#ff80ab" />
</g>
<!-- Wolf Climbing Roof -->
<g class="wolf-s3" transform="translate(150, 290)">
<use href="#wolf" />
</g>
<!-- Wind (Fails to affect house) -->
<use href="#wind-gust" class="wind-s3" />
</g>
<!-- SCENE 4: INTERIOR & THE END -->
<g id="scene4" class="scene">
<!-- Background Interior -->
<rect width="800" height="450" fill="#edd6b1" />
<rect y="380" width="800" height="70" fill="#d7ccc8" />
<!-- Fireplace & Chimney Shaft -->
<rect x="320" y="0" width="160" height="380" fill="#78909c" />
<path d="M320,180 L480,180 L480,380 L440,380 L440,260 L360,260 L360,380 L320,380 Z" fill="#37474f" />
<!-- Hanging Pot & Fire -->
<g transform="translate(400, 310)">
<!-- Wood and Flame -->
<path d="M-30,50 L30,40 M-20,45 L20,55" stroke="#5d4037" stroke-width="8" />
<path d="M-15,40 Q0,10 15,40 Q5,25 -5,40 Z" fill="#ff6f00" />
<path d="M-5,40 Q0,20 5,40 Z" fill="#ffab00" />
<!-- Large Boiling Pot -->
<ellipse cx="0" cy="10" rx="45" ry="25" fill="#212121" />
<rect x="-45" y="-15" width="90" height="25" fill="#212121" rx="5" />
<!-- Water inside pot -->
<ellipse cx="0" cy="-12" rx="40" ry="8" fill="#0288d1" />
</g>
<!-- Falling Wolf -->
<g class="wolf-fall" transform="translate(400, 80) rotate(180)">
<use href="#wolf" />
</g>
<!-- Splash Effect -->
<g class="splash">
<path d="M370,290 Q400,240 405,295" fill="none" stroke="#e0f7fa" stroke-width="6" stroke-linecap="round"/>
<path d="M430,290 Q400,240 395,295" fill="none" stroke="#e0f7fa" stroke-width="6" stroke-linecap="round"/>
<circle cx="380" cy="260" r="5" fill="#e0f7fa" />
<circle cx="420" cy="255" r="4" fill="#e0f7fa" />
</g>
<!-- Three Cheering Pigs -->
<g transform="translate(180, 330)">
<use href="#pig" transform="scale(1.1)"/>
</g>
<g transform="translate(100, 340)">
<use href="#pig" transform="scale(0.9)"/>
</g>
<g transform="translate(650, 330)">
<use href="#pig" transform="scale(1.1) scaleX(-1)"/>
</g>
<!-- End Overlay Card -->
<g class="end-card">
<rect width="800" height="450" fill="rgba(0,0,0,0.85)" />
<text x="400" y="210" fill="#ffeb3b" font-size="48" font-weight="bold" text-anchor="middle" font-family="sans-serif">THE END</text>
<text x="400" y="260" fill="#ffffff" font-size="20" text-anchor="middle" font-family="sans-serif">And they lived happily ever after.</text>
</g>
</g>
</svg>
</div>
</body>
</html>
@ArseniyShestakov

ArseniyShestakov commented May 19, 2026

Copy link
Copy Markdown
Author

Once upon a time there was an old mother pig who had three little pigs and not enough food to feed them. So when they were old enough, she sent them out into the world to seek their fortunes.

The first little pig was very lazy. He didn't want to work at all and he built his house out of straw. The second little pig worked a little bit harder but he was somewhat lazy too and he built his house out of sticks. Then, they sang and danced and played together the rest of the day.

The third little pig worked hard all day and built his house with bricks. It was a sturdy house complete with a fine fireplace and chimney. It looked like it could withstand the strongest winds.

The next day, a wolf happened to pass by the lane where the three little pigs lived; and he saw the straw house, and he smelled the pig inside. He thought the pig would make a mighty fine meal and his mouth began to water.

So he knocked on the door and said:

Little pig! Little pig!
Let me in! Let me in!
But the little pig saw the wolf's big paws through the keyhole, so he answered back:

No! No! No!
Not by the hairs on my chinny chin chin!
Three Little Pigs, the straw house Then the wolf showed his teeth and said:

Then I'll huff
and I'll puff
and I'll blow your house down.
So he huffed and he puffed and he blew the house down! The wolf opened his jaws very wide and bit down as hard as he could, but the first little pig escaped and ran away to hide with the second little pig.

The wolf continued down the lane and he passed by the second house made of sticks; and he saw the house, and he smelled the pigs inside, and his mouth began to water as he thought about the fine dinner they would make.

So he knocked on the door and said:

Little pigs! Little pigs!
Let me in! Let me in!
But the little pigs saw the wolf's pointy ears through the keyhole, so they answered back:

No! No! No!
Not by the hairs on our chinny chin chin!
So the wolf showed his teeth and said:

Then I'll huff
and I'll puff
and I'll blow your house down!
So he huffed and he puffed and he blew the house down! The wolf was greedy and he tried to catch both pigs at once, but he was too greedy and got neither! His big jaws clamped down on nothing but air and the two little pigs scrambled away as fast as their little hooves would carry them.

The wolf chased them down the lane and he almost caught them. But they made it to the brick house and slammed the door closed before the wolf could catch them. The three little pigs they were very frightened, they knew the wolf wanted to eat them. And that was very, very true. The wolf hadn't eaten all day and he had worked up a large appetite chasing the pigs around and now he could smell all three of them inside and he knew that the three little pigs would make a lovely feast.

Three Little Pigs at the Brick House
So the wolf knocked on the door and said:

Little pigs! Little pigs!
Let me in! Let me in!
But the little pigs saw the wolf's narrow eyes through the keyhole, so they answered back:

No! No! No!
Not by the hairs on our chinny chin chin!
So the wolf showed his teeth and said:

Then I'll huff
and I'll puff
and I'll blow your house down.
Well! he huffed and he puffed. He puffed and he huffed. And he huffed, huffed, and he puffed, puffed; but he could not blow the house down. At last, he was so out of breath that he couldn't huff and he couldn't puff anymore. So he stopped to rest and thought a bit.

But this was too much. The wolf danced about with rage and swore he would come down the chimney and eat up the little pig for his supper. But while he was climbing on to the roof the little pig made up a blazing fire and put on a big pot full of water to boil. Then, just as the wolf was coming down the chimney, the little piggy pulled off the lid, and plop! in fell the wolf into the scalding water.

So the little piggy put on the cover again, boiled the wolf up, and the three little pigs ate him for supper.

Now think, plan how to tell this story in a cartoon, make scene outline and then generate SVG animation story for "Three Little Pigs" in self contained HTML page. Just single animation no control buttons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment