Skip to content

Instantly share code, notes, and snippets.

@ArseniyShestakov

ArseniyShestakov/gemini-31-pro-three-little-pigs.html

Last active May 19, 2026 19:51
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save ArseniyShestakov/f506bbfd9b4459c8cd55d89605af8007 to your computer and use it in GitHub Desktop.
Download ZIP
Gemini 3.1 Pro: Three Little Pigs
Raw
gemini-31-pro-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>The Three Little Pigs</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c3e50;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.cartoon-container {
width: 100%;
max-width: 900px;
box-shadow: 0 10px 30px rgba(0,0,0,0.7);
border-radius: 12px;
overflow: hidden;
background-color: #87CEEB;
}
svg {
display: block;
width: 100%;
height: auto;
}
/* --- Animation Keyframes (30 Second Loop) --- */
/* PIGS */
#pig1 { animation: movePig1 30s linear infinite; }
#pig2 { animation: movePig2 30s linear infinite; }
#pig3 { animation: movePig3 30s linear infinite; }
@keyframes movePig1 {
0%, 23% { transform: translate(0, 0); opacity: 1; }
26%, 39% { transform: translate(250px, 0); opacity: 1; } /* Runs to Stick */
42% { transform: translate(500px, 0); opacity: 1; } /* Runs to Brick */
43%, 81% { transform: translate(500px, 0); opacity: 0; } /* Hides */
/* Celebrates outside */
82%, 86%, 90%, 94%, 98% { transform: translate(410px, 0); opacity: 1; }
84%, 88%, 92%, 96%, 100% { transform: translate(410px, -15px); opacity: 1; }
}
@keyframes movePig2 {
0%, 39% { transform: translate(0, 0); opacity: 1; }
42% { transform: translate(250px, 0); opacity: 1; } /* Runs to Brick */
43%, 81% { transform: translate(250px, 0); opacity: 0; } /* Hides */
/* Celebrates outside */
82%, 86%, 90%, 94%, 98% { transform: translate(200px, 0); opacity: 1; }
84%, 88%, 92%, 96%, 100% { transform: translate(200px, -15px); opacity: 1; }
}
@keyframes movePig3 {
0%, 10% { transform: translate(0, 0); opacity: 1; }
11%, 81% { transform: translate(0, 0); opacity: 0; } /* Hides Early */
/* Celebrates outside */
82%, 86%, 90%, 94%, 98% { transform: translate(-10px, 0); opacity: 1; }
84%, 88%, 92%, 96%, 100% { transform: translate(-10px, -15px); opacity: 1; }
}
/* WOLF */
#wolf { animation: moveWolf 30s linear infinite; }
@keyframes moveWolf {
0%, 12% { transform: translate(0px, 0px); opacity: 1; }
18%, 27% { transform: translate(110px, 0px); opacity: 1; } /* At Straw */
33%, 42% { transform: translate(360px, 0px); opacity: 1; } /* At Stick */
48%, 62% { transform: translate(610px, 0px); opacity: 1; } /* At Brick */
68%, 71% { transform: translate(720px, -150px); opacity: 1; } /* On Roof */
74% { transform: translate(720px, 0px); opacity: 0; } /* Down Chimney */
75%, 100% { transform: translate(720px, 0px); opacity: 0; } /* Boiled */
}
/* HOUSES */
#strawHouse { transform-origin: 140px 260px; animation: blowStraw 30s linear infinite; }
@keyframes blowStraw {
0%, 21% { transform: translate(0,0) rotate(0deg); opacity: 1; }
25%, 100% { transform: translate(150px, -50px) rotate(45deg) scale(0); opacity: 0; }
}
#stickHouse { transform-origin: 390px 260px; animation: blowStick 30s linear infinite; }
@keyframes blowStick {
0%, 37% { transform: translate(0,0) rotate(0deg); opacity: 1; }
41%, 100% { transform: translate(150px, -50px) rotate(45deg) scale(0); opacity: 0; }
}
/* WIND */
#wind { animation: windGust 30s linear infinite; }
@keyframes windGust {
0%, 19% { opacity: 0; transform: translateX(80px); }
20% { opacity: 1; transform: translateX(80px); }
22% { opacity: 0; transform: translateX(180px); }
23%, 35% { opacity: 0; transform: translateX(330px); }
36% { opacity: 1; transform: translateX(330px); }
38% { opacity: 0; transform: translateX(430px); }
39%, 51% { opacity: 0; transform: translateX(580px); }
52% { opacity: 1; transform: translateX(580px); }
54% { opacity: 0; transform: translateX(680px); }
55%, 57% { opacity: 0; transform: translateX(580px); }
58% { opacity: 1; transform: translateX(580px); }
60% { opacity: 0; transform: translateX(680px); }
61%, 100% { opacity: 0; }
}
/* SMOKE */
#smoke { animation: smokeRise 30s linear infinite; }
@keyframes smokeRise {
0%, 74% { opacity: 0; transform: translateY(0) scale(0.5); }
75% { opacity: 1; transform: translateY(0) scale(0.5); }
80% { opacity: 0; transform: translateY(-60px) scale(1.5); }
81%, 100% { opacity: 0; }
}
/* SUN */
#sun { transform-origin: 700px 80px; animation: spin 20s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
/* TEXT CAPTIONS */
.caption { font-size: 20px; font-weight: bold; fill: #222; text-anchor: middle; opacity: 0; }
#c1 { animation: showC1 30s linear infinite; }
#c2 { animation: showC2 30s linear infinite; }
#c3 { animation: showC3 30s linear infinite; }
#c4 { animation: showC4 30s linear infinite; }
#c5 { animation: showC5 30s linear infinite; }
#c6 { animation: showC6 30s linear infinite; }
@keyframes showC1 { 0%, 14% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes showC2 { 0%, 14% { opacity: 0; } 16%, 29% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes showC3 { 0%, 29% { opacity: 0; } 31%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes showC4 { 0%, 44% { opacity: 0; } 46%, 64% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes showC5 { 0%, 64% { opacity: 0; } 66%, 81% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes showC6 { 0%, 81% { opacity: 0; } 83%, 100% { opacity: 1; } }
</style>
</head>
<body>
<div class="cartoon-container">
<svg viewBox="0 0 800 400">
<defs>
<!-- Pig Template -->
<g id="pigDef">
<circle cx="0" cy="285" r="15" fill="#ffb6c1" />
<circle cx="5" cy="285" r="7" fill="#ff69b4" />
<circle cx="2" cy="282" r="2" fill="#000" />
<polygon points="-5,270 2,275 -8,275" fill="#ffb6c1" />
<line x1="-5" y1="295" x2="-5" y2="305" stroke="#ffb6c1" stroke-width="4" stroke-linecap="round"/>
<line x1="5" y1="295" x2="5" y2="305" stroke="#ffb6c1" stroke-width="4" stroke-linecap="round"/>
</g>
<!-- Wolf Template -->
<g id="wolfDef">
<ellipse cx="-10" cy="0" rx="30" ry="15" fill="#4a4a4a" /> <!-- body -->
<path d="M -40 0 Q -60 -10 -50 -20 Q -40 -10 -35 -5" fill="#333" /> <!-- tail -->
<polygon points="5,-10 30,-5 5,10" fill="#555" /> <!-- snout -->
<circle cx="10" cy="-5" r="12" fill="#4a4a4a" /> <!-- head -->
<polygon points="5,-15 15,-30 20,-15" fill="#4a4a4a" /> <!-- ear -->
<circle cx="15" cy="-8" r="2" fill="yellow" /> <!-- eye -->
<line x1="-20" y1="10" x2="-20" y2="30" stroke="#4a4a4a" stroke-width="4" stroke-linecap="round"/> <!-- leg -->
<line x1="0" y1="10" x2="0" y2="30" stroke="#4a4a4a" stroke-width="4" stroke-linecap="round"/> <!-- leg -->
</g>
</defs>
<!-- Background Elements -->
<rect width="100%" height="400" fill="#87CEEB" />
<!-- Clouds -->
<g fill="#FFF" opacity="0.8">
<circle cx="150" cy="70" r="25" />
<circle cx="180" cy="60" r="35" />
<circle cx="210" cy="70" r="25" />
<circle cx="480" cy="90" r="20" />
<circle cx="510" cy="80" r="30" />
<circle cx="540" cy="90" r="20" />
</g>
<!-- Sun -->
<g id="sun">
<circle cx="700" cy="80" r="25" fill="#FFD700" />
<line x1="700" y1="40" x2="700" y2="25" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
<line x1="700" y1="120" x2="700" y2="135" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
<line x1="660" y1="80" x2="645" y2="80" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
<line x1="740" y1="80" x2="755" y2="80" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
<line x1="672" y1="52" x2="661" y2="41" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
<line x1="728" y1="108" x2="739" y2="119" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
<line x1="672" y1="108" x2="661" y2="119" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
<line x1="728" y1="52" x2="739" y2="41" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
</g>
<!-- Ground -->
<rect y="300" width="100%" height="100" fill="#7CFC00" />
<!-- Houses -->
<g id="strawHouse">
<rect x="100" y="240" width="80" height="60" fill="khaki" />
<polygon points="90,240 140,190 190,240" fill="gold" />
<rect x="130" y="270" width="20" height="30" fill="saddlebrown" />
<line x1="110" y1="250" x2="110" y2="290" stroke="darkgoldenrod" stroke-width="1" />
<line x1="120" y1="250" x2="120" y2="290" stroke="darkgoldenrod" stroke-width="1" />
<line x1="160" y1="250" x2="160" y2="290" stroke="darkgoldenrod" stroke-width="1" />
<line x1="170" y1="250" x2="170" y2="290" stroke="darkgoldenrod" stroke-width="1" />
</g>
<g id="stickHouse">
<rect x="350" y="240" width="80" height="60" fill="peru" />
<polygon points="340,240 390,190 440,240" fill="sienna" />
<rect x="380" y="270" width="20" height="30" fill="#3e2723" />
<line x1="360" y1="240" x2="360" y2="300" stroke="saddlebrown" stroke-width="3" />
<line x1="370" y1="240" x2="370" y2="300" stroke="saddlebrown" stroke-width="3" />
<line x1="410" y1="240" x2="410" y2="300" stroke="saddlebrown" stroke-width="3" />
<line x1="420" y1="240" x2="420" y2="300" stroke="saddlebrown" stroke-width="3" />
</g>
<g id="brickHouse">
<rect x="600" y="220" width="100" height="80" fill="firebrick" />
<polygon points="590,220 650,160 710,220" fill="darkred" />
<!-- Chimney Back -->
<rect x="670" y="130" width="20" height="50" fill="#555" />
<rect x="640" y="260" width="24" height="40" fill="saddlebrown" />
<!-- Bricks -->
<line x1="600" y1="240" x2="700" y2="240" stroke="white" stroke-width="1" />
<line x1="600" y1="260" x2="700" y2="260" stroke="white" stroke-width="1" />
<line x1="600" y1="280" x2="700" y2="280" stroke="white" stroke-width="1" />
<line x1="620" y1="220" x2="620" y2="300" stroke="white" stroke-width="1" stroke-dasharray="20, 20" />
<line x1="640" y1="220" x2="640" y2="300" stroke="white" stroke-width="1" stroke-dasharray="20, 20" stroke-dashoffset="10" />
<line x1="660" y1="220" x2="660" y2="300" stroke="white" stroke-width="1" stroke-dasharray="20, 20" />
<line x1="680" y1="220" x2="680" y2="300" stroke="white" stroke-width="1" stroke-dasharray="20, 20" stroke-dashoffset="10" />
</g>
<!-- Characters -->
<use href="#pigDef" id="pig1" x="150" y="0" />
<use href="#pigDef" id="pig2" x="400" y="0" />
<use href="#pigDef" id="pig3" x="650" y="0" />
<!-- Wolf -->
<use href="#wolfDef" id="wolf" x="-50" y="270" />
<!-- Chimney Front (covers wolf when he drops in) -->
<rect x="670" y="145" width="20" height="40" fill="#444" />
<!-- Wind / Puffs -->
<g id="wind" transform="translate(0, 260)">
<path d="M 0 -10 Q 30 -20 50 -10 Q 70 0 100 -10" fill="none" stroke="#e0f7fa" stroke-width="4" stroke-dasharray="10 5" />
<path d="M 0 10 Q 30 20 50 10 Q 70 0 100 10" fill="none" stroke="#e0f7fa" stroke-width="4" stroke-dasharray="15 5" />
</g>
<!-- Boiling Pot Smoke -->
<g id="smoke">
<circle cx="680" cy="120" r="10" fill="#fff" opacity="0.9" />
<circle cx="670" cy="105" r="12" fill="#f0f0f0" opacity="0.7" />
<circle cx="690" cy="90" r="15" fill="#e0e0e0" opacity="0.5" />
<circle cx="680" cy="70" r="18" fill="#d0d0d0" opacity="0.3" />
</g>
<!-- Subtitles UI -->
<rect x="30" y="325" width="740" height="50" rx="10" fill="rgba(255, 255, 255, 0.9)" stroke="#fff" stroke-width="2" />
<text class="caption" id="c1" x="400" y="357">Three little pigs built their houses of straw, sticks, and bricks.</text>
<text class="caption" id="c2" x="400" y="357">The hungry wolf huffed and puffed and blew the straw house down!</text>
<text class="caption" id="c3" x="400" y="357">He blew the stick house down too! The pigs fled to the brick house.</text>
<text class="caption" id="c4" x="400" y="357">He huffed and puffed, but the sturdy brick house stood strong.</text>
<text class="caption" id="c5" x="400" y="357">Furious, the wolf went down the chimney... right into a boiling pot!</text>
<text class="caption" id="c6" x="400" y="357">The pigs enjoyed a wolf stew and lived happily ever after. THE END.</text>
</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