Gugu Gaga Penguin

A chubby chibi penguin with a cream body, orange beak and feet, coral blush, and a speech bubble that says 'gugu gaga'. It waddles gently from side to side while the bubble bounces, eye shine blinks, and sparkles twinkle against a warm paper sky.

You’ll learn

• Building a round character from stacked ellipses, a triangle beak, and small wing ellipses
• Grouping facial details so they move with the body during a waddle animation
• Adding an SVG speech bubble with real text and a separate bouncing animation
• Using transform-origin at the feet to keep a waddle grounded on the ground

1. 1

   Set the warm paper stage

   Start with a rounded warm-paper background, two tiny cloud puffs, and four sparkles. The clouds will drift later, so each one is its own group.

   index.html

   copy code

   <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
   <g class="gg-cloud gg-cloud1" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" opacity="0.78">
     <path d="M18 38 C18 33 22 29 27 30 C30 24 39 24 42 31 C48 30 52 35 52 40 C52 45 48 48 42 48 H27 C22 48 18 44 18 38 Z"/>
   </g>
   <g class="gg-cloud gg-cloud2" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.62">
     <path d="M150 28 C150 24 153 21 157 22 C159 17 166 17 168 23 C173 22 176 26 176 30 C176 34 173 36 168 36 H157 C153 36 150 33 150 28 Z"/>
   </g>
   <path class="gg-spark gg-spark1" d="M34 78 L38 86 L34 94 L30 86 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.8" stroke-linejoin="round"/>
   <path class="gg-spark gg-spark2" d="M168 70 L171 76 L168 82 L165 76 Z" fill="#6FA8FF" stroke="none"/>
   <circle class="gg-spark gg-dot1" cx="156" cy="52" r="2.6" fill="#FFD84D" stroke="none"/>
   <circle class="gg-spark gg-dot2" cx="46" cy="54" r="2.2" fill="#6FA8FF" stroke="none"/>
   

   a cozy sky waiting for its penguin.

2. 2

   Build the penguin silhouette

   Paint back-to-front: yellow feet flat on the ground, a big cream body ellipse, a lighter belly patch on top, two small wing ellipses angled outward, and a tiny triangular orange beak. Everything lives inside one group so the whole body can waddle together later.

   index.html

   copy code

   <g class="gg-penguin" stroke-linecap="round" stroke-linejoin="round">
     <!-- feet first so the body overlaps them -->
     <ellipse class="gg-foot gg-foot-l" cx="82" cy="158" rx="13" ry="7" fill="#FFD84D" stroke="#2B3A55" stroke-width="3"/>
     <ellipse class="gg-foot gg-foot-r" cx="118" cy="158" rx="13" ry="7" fill="#FFD84D" stroke="#2B3A55" stroke-width="3"/>
     <!-- body -->
     <ellipse class="gg-body" cx="100" cy="112" rx="48" ry="54" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
     <!-- belly patch -->
     <ellipse class="gg-belly" cx="100" cy="122" rx="28" ry="34" fill="#F7F1E6" stroke="none"/>
     <!-- wings -->
     <ellipse class="gg-wing gg-wing-l" cx="54" cy="112" rx="10" ry="24" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" transform="rotate(18 54 112)"/>
     <ellipse class="gg-wing gg-wing-r" cx="146" cy="112" rx="10" ry="24" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" transform="rotate(-18 146 112)"/>
     <!-- beak -->
     <path class="gg-beak" d="M92 84 L100 76 L108 84 L100 90 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="2.6" stroke-linejoin="round"/>
   </g>
   

   a faceless penguin — already round enough to waddle.

3. 3

   Add the face and speech bubble

   Give the penguin big navy eyes with white shines, coral blush spots, and a rounded speech bubble with 'gugu gaga' text. The bubble is a separate group so it can bounce on its own beat.

   index.html

   copy code

   <g class="gg-face">
     <circle class="gg-eye gg-eye-l" cx="84" cy="72" r="7" fill="#2B3A55" stroke="none"/>
     <circle class="gg-eye gg-eye-r" cx="116" cy="72" r="7" fill="#2B3A55" stroke="none"/>
     <circle class="gg-shine gg-shine-l" cx="86" cy="70" r="2.4" fill="#FFFDF7" stroke="none"/>
     <circle class="gg-shine gg-shine-r" cx="118" cy="70" r="2.4" fill="#FFFDF7" stroke="none"/>
     <ellipse cx="72" cy="86" rx="5" ry="3" fill="#FF8FA3" opacity="0.7" stroke="none"/>
     <ellipse cx="128" cy="86" rx="5" ry="3" fill="#FF8FA3" opacity="0.7" stroke="none"/>
   </g>
   <g class="gg-bubble">
     <path class="gg-bubble-shape" d="M120 44 C120 34 128 26 138 26 H158 C168 26 176 34 176 44 V62 C176 72 168 80 158 80 H146 L136 90 L132 78 C126 77 120 71 120 62 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4" stroke-linejoin="round"/>
     <text x="148" y="51" text-anchor="middle" font-family="system-ui, sans-serif" font-size="12" font-weight="700" fill="#2B3A55">gugu</text>
     <text x="148" y="67" text-anchor="middle" font-family="system-ui, sans-serif" font-size="12" font-weight="700" fill="#2B3A55">gaga</text>
   </g>
   

   now it has something to say.

4. 4

   Waddle, bounce, and twinkle

   The whole penguin group rotates from an origin at its feet so the waddle stays grounded. The speech bubble bounces on a faster loop, the eye shines blink, and the sparkles twinkle — all wrapped in a prefers-reduced-motion guard.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .gg .gg-penguin { transform-box: fill-box; transform-origin: center bottom; animation: gg-waddle 2.8s ease-in-out infinite; }
     .gg .gg-bubble { transform-box: fill-box; transform-origin: center bottom; animation: gg-bubble-bob 2.4s ease-in-out infinite; }
     .gg .gg-spark1 { animation: gg-twinkle 2.8s ease-in-out infinite; }
     .gg .gg-spark2 { animation: gg-twinkle 2.8s ease-in-out 0.55s infinite; }
     .gg .gg-dot1 { animation: gg-twinkle 3.2s ease-in-out 1.1s infinite; }
     .gg .gg-dot2 { animation: gg-twinkle 3.2s ease-in-out 1.65s infinite; }
     .gg .gg-cloud1 { animation: gg-cloud-drift-a 6.8s ease-in-out infinite; }
     .gg .gg-cloud2 { animation: gg-cloud-drift-b 7.4s ease-in-out 0.8s infinite; }
     .gg .gg-shine { animation: gg-blink 3.4s ease-in-out infinite; }
   }
   @keyframes gg-waddle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
   @keyframes gg-bubble-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(1deg); } }
   @keyframes gg-twinkle { 0%, 100% { opacity: 0.34; transform: scale(0.84); } 45% { opacity: 1; transform: scale(1.14); } }
   @keyframes gg-cloud-drift-a { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
   @keyframes gg-cloud-drift-b { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.5px); } }
   @keyframes gg-blink { 0%, 44%, 56%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
   

   waddling, bubbling, and saying gugu gaga on loop.

Skipped straight to the end? Welcome. Copy the whole thing, download it, or open it in the Playground to start remixing.

<svg class="gg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A chubby chibi penguin waddling gently with a bouncing gugu gaga speech bubble, twinkling sparkles, and drifting clouds">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <g class="gg-cloud gg-cloud1" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" opacity="0.78">
    <path d="M18 38 C18 33 22 29 27 30 C30 24 39 24 42 31 C48 30 52 35 52 40 C52 45 48 48 42 48 H27 C22 48 18 44 18 38 Z"/>
  </g>
  <g class="gg-cloud gg-cloud2" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.62">
    <path d="M150 28 C150 24 153 21 157 22 C159 17 166 17 168 23 C173 22 176 26 176 30 C176 34 173 36 168 36 H157 C153 36 150 33 150 28 Z"/>
  </g>
  <path class="gg-spark gg-spark1" d="M34 78 L38 86 L34 94 L30 86 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.8" stroke-linejoin="round"/>
  <path class="gg-spark gg-spark2" d="M168 70 L171 76 L168 82 L165 76 Z" fill="#6FA8FF" stroke="none"/>
  <circle class="gg-spark gg-dot1" cx="156" cy="52" r="2.6" fill="#FFD84D" stroke="none"/>
  <circle class="gg-spark gg-dot2" cx="46" cy="54" r="2.2" fill="#6FA8FF" stroke="none"/>
  <g class="gg-penguin" stroke-linecap="round" stroke-linejoin="round">
    <!-- Feet -->
    <ellipse class="gg-foot gg-foot-l" cx="82" cy="158" rx="13" ry="7" fill="#FFD84D" stroke="#2B3A55" stroke-width="3"/>
    <ellipse class="gg-foot gg-foot-r" cx="118" cy="158" rx="13" ry="7" fill="#FFD84D" stroke="#2B3A55" stroke-width="3"/>
    <!-- Body -->
    <ellipse class="gg-body" cx="100" cy="112" rx="48" ry="54" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
    <!-- Belly -->
    <ellipse class="gg-belly" cx="100" cy="122" rx="28" ry="34" fill="#F7F1E6" stroke="none"/>
    <!-- Wings -->
    <ellipse class="gg-wing gg-wing-l" cx="54" cy="112" rx="10" ry="24" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" transform="rotate(18 54 112)"/>
    <ellipse class="gg-wing gg-wing-r" cx="146" cy="112" rx="10" ry="24" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" transform="rotate(-18 146 112)"/>
    <!-- Beak -->
    <path class="gg-beak" d="M92 84 L100 76 L108 84 L100 90 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="2.6" stroke-linejoin="round"/>
    <!-- Face -->
    <g class="gg-face">
      <circle class="gg-eye gg-eye-l" cx="84" cy="72" r="7" fill="#2B3A55" stroke="none"/>
      <circle class="gg-eye gg-eye-r" cx="116" cy="72" r="7" fill="#2B3A55" stroke="none"/>
      <circle class="gg-shine gg-shine-l" cx="86" cy="70" r="2.4" fill="#FFFDF7" stroke="none"/>
      <circle class="gg-shine gg-shine-r" cx="118" cy="70" r="2.4" fill="#FFFDF7" stroke="none"/>
      <ellipse cx="72" cy="86" rx="5" ry="3" fill="#FF8FA3" opacity="0.7" stroke="none"/>
      <ellipse cx="128" cy="86" rx="5" ry="3" fill="#FF8FA3" opacity="0.7" stroke="none"/>
    </g>
    <!-- Speech bubble -->
    <g class="gg-bubble">
      <path class="gg-bubble-shape" d="M120 44 C120 34 128 26 138 26 H158 C168 26 176 34 176 44 V62 C176 72 168 80 158 80 H146 L136 90 L132 78 C126 77 120 71 120 62 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4" stroke-linejoin="round"/>
      <text x="148" y="51" text-anchor="middle" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#2B3A55">gugu</text>
      <text x="148" y="67" text-anchor="middle" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#2B3A55">gaga</text>
    </g>
  </g>
</svg>

• Sleepy penguineasy

  Close the eyes into flat lines and add a tiny 'z' snore bubble above its head.

• Party penguineasy

  Replace the speech text with musical notes and add confetti sparkles in gold and coral.

• Penguin stackmedium

  Copy the penguin group twice, scale each down, and stack them vertically with staggered waddle delays.

• Speed mememedium

  Shorten the waddle loop to 1s and add a motion-blur tail swipe for hyper meme energy.