Squirtle Fan-Art Code Study

A front-facing seated chibi Squirtle sticker built from layered SVG shapes — a tiny water puddle, a few floating bubbles, a round teal-blue head with sleepy half-lidded eyes, a cream segmented belly, a teal shell with a cream rim, a curled tail, and a gentle blink. Educational fan art: the same shape-layering works for any character portrait.

You’ll learn

• Sculpting a very round head and compact seated body from simple SVG circles and ellipses
• Layering a shell and curled tail behind a front-facing character so they peek out at the sides
• Building sleepy half-lidded eyes from a dark circle, a body-colored lid, and a tiny highlight
• Combining several gentle keyframes (blink + breathe + tail wiggle + bubble float) without making the motion chaotic

1. 1

   Make the water backdrop

   A simple teal water puddle grounds the character, a soft ink ellipse adds a tiny shadow, and three or four small bubbles are the only extras. Keeping the background simple is what makes the character read at small sizes.

   index.html

   copy code

   <!-- water puddle base -->
   <path d="M 42 188 C 42 172, 78 166, 115 166 C 152 166, 188 172, 188 188 C 188 200, 152 206, 115 206 C 78 206, 42 200, 42 188 Z" fill="#B8EEF4" stroke="#2B3A55" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
   <!-- soft ground shadow -->
   <ellipse cx="115" cy="198" rx="55" ry="5" fill="#2B3A55" opacity="0.12"/>
   <!-- tiny floating bubbles -->
   <g fill="#E0F7FA" stroke="#2B3A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
     <circle cx="38" cy="58" r="6"/>
     <circle cx="190" cy="70" r="4"/>
     <circle cx="30" cy="118" r="3"/>
     <circle cx="182" cy="40" r="2.5"/>
   </g>
   

   a water puddle and a few bubbles — the sticker frame is ready.

2. 2

   Build the seated body

   Work from back to front: curled tail on the left, then the teal shell with a cream rim behind the body, then the chubby seated body, cream segmented belly, very round head, small forward arms, and tucked feet. Paint order does the layering — no z-index needed.

   index.html

   copy code

   <!-- curled tail behind the shell -->
   <g fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path d="M 78 162 C 48 176, 36 144, 52 120 C 64 104, 90 112, 82 136" stroke="#2B3A55" stroke-width="12"/>
     <path d="M 78 162 C 48 176, 36 144, 52 120 C 64 104, 90 112, 82 136" stroke="#7ED8E3" stroke-width="8"/>
   </g>
   <!-- teal shell with cream rim -->
   <ellipse cx="115" cy="138" rx="62" ry="48" fill="#6AC9D5" stroke="#2B3A55" stroke-width="6"/>
   <path d="M 58 134 Q 115 94 172 134" fill="none" stroke="#FFF1B8" stroke-width="7" stroke-linecap="round"/>
   <!-- body + segmented belly + head -->
   <ellipse cx="115" cy="152" rx="52" ry="44" fill="#7ED8E3" stroke="#2B3A55" stroke-width="6"/>
   <ellipse cx="115" cy="162" rx="34" ry="26" fill="#FFF1B8" stroke="#2B3A55" stroke-width="5.5"/>
   <circle cx="115" cy="80" r="50" fill="#7ED8E3" stroke="#2B3A55" stroke-width="6"/>
   

   shell, body, head, and limbs — a seated silhouette waiting for a face.

3. 3

   Add the sleepy face

   The recognizability lives here: large sleepy eyes made from a dark circle, a body-colored half-lid, and a tiny white highlight, a small two-dot nose, a relaxed smile, segmented belly seams, and a glossy head highlight. Baby proportions come from the oversized head and close-together eyes.

   index.html

   copy code

   <!-- sleepy half-lidded eyes -->
   <g class="eye">
     <circle cx="95" cy="80" r="11" fill="#2B3A55"/>
     <path d="M 84 80 A 11 11 0 0 1 106 80 L 106 76 Q 95 65 84 76 Z" fill="#7ED8E3"/>
     <path d="M 84 80 Q 95 69 106 80" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/>
     <circle cx="91" cy="75" r="2.8" fill="#FFFFFF"/>
   </g>
   <g class="eye">
     <circle cx="135" cy="80" r="11" fill="#2B3A55"/>
     <path d="M 124 80 A 11 11 0 0 1 146 80 L 146 76 Q 135 65 124 76 Z" fill="#7ED8E3"/>
     <path d="M 124 80 Q 135 69 146 80" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/>
     <circle cx="131" cy="75" r="2.8" fill="#FFFFFF"/>
   </g>
   <!-- tiny nose and smile -->
   <circle cx="113" cy="92" r="1.5" fill="#2B3A55"/>
   <circle cx="121" cy="92" r="1.5" fill="#2B3A55"/>
   <path d="M 104 100 Q 115 106 126 100" fill="none" stroke="#2B3A55" stroke-width="3.5" stroke-linecap="round"/>
   <!-- belly seams + head highlight -->
   <path d="M 115 141 L 115 183" stroke="#2B3A55" stroke-width="3" opacity="0.45"/>
   <path d="M 90 156 Q 115 160 140 156" stroke="#2B3A55" stroke-width="3" opacity="0.45"/>
   <path d="M 92 60 Q 108 54 128 60" fill="none" stroke="#FFFFFF" stroke-width="3.5" opacity="0.85"/>
   

   sleepy eyes, tiny smile, and glossy highlight — now it's unmistakably Squirtle.

4. 4

   Animate the blink and wiggle

   Four tiny keyframes work together: a scaleY blink on the eyes, a gentle translateY/rotate breathe on the whole body group, a small tail wiggle, and a tiny bubble float. Each one is subtle; together they make the sticker feel alive without stealing focus from the pose.

   style.css

   copy code

   .body-group {
     transform-origin: 115px 190px;
     animation: squirtle-breathe 3.6s ease-in-out infinite;
   }
   .eye {
     transform-origin: center;
     animation: squirtle-blink 4.5s ease-in-out infinite;
   }
   .tail {
     transform-origin: 70px 150px;
     animation: tail-wiggle 3.2s ease-in-out infinite;
   }
   .bubbles {
     animation: bubble-float 4s ease-in-out infinite;
   }
   @keyframes squirtle-blink {
     0%, 90%, 100% { transform: scaleY(1); }
     95% { transform: scaleY(0.1); }
   }
   @keyframes squirtle-breathe {
     0%, 100% { transform: translateY(0) rotate(0deg); }
     50% { transform: translateY(-2px) rotate(-0.6deg); }
   }
   

   blink, breathe, tail wiggle, and bubble float — just enough life for a sticker.

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

<svg class="squirtle" viewBox="0 0 230 210" width="230" height="210" style="width:100%;height:auto;max-width:230px;display:block;" role="img" aria-label="Squirtle fan-art code study sticker">
  <!-- simple water puddle base -->
  <path class="puddle" d="M 28 190 C 28 175, 70 168, 115 168 C 160 168, 202 175, 202 190 C 202 203, 160 210, 115 210 C 70 210, 28 203, 28 190 Z" fill="#B8EEF4" stroke="#2B3A55" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
  <!-- soft puddle highlight -->
  <path d="M 60 188 Q 115 182 170 188 Q 115 194 60 188 Z" fill="#FFFFFF" opacity="0.35" stroke="none"/>
  <!-- soft ground shadow -->
  <ellipse cx="115" cy="200" rx="58" ry="5" fill="#2B3A55" opacity="0.12" stroke="none"/>
  <!-- tiny floating bubbles -->
  <g class="bubbles" fill="#FFD9C2" stroke="#2B3A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="40" cy="52" r="6.5"/>
    <circle cx="188" cy="64" r="4"/>
    <circle cx="28" cy="112" r="3.5"/>
    <circle cx="196" cy="108" r="3"/>
    <circle cx="178" cy="36" r="2.5"/>
    <!-- bubble glints -->
    <circle cx="38" cy="50" r="1.4" fill="#FFFFFF" stroke="none"/>
    <circle cx="186" cy="62" r="1" fill="#FFFFFF" stroke="none"/>
  </g>
  <!-- curled tail behind the shell and body -->
  <g class="tail" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path d="M 76 162 C 50 174, 32 150, 46 128 C 56 112, 86 122, 78 144" fill="none" stroke="#2B3A55" stroke-width="13"/>
    <path d="M 76 162 C 50 174, 32 150, 46 128 C 56 112, 86 122, 78 144" fill="none" stroke="#FFC48A" stroke-width="9"/>
  </g>
  <!-- shell back: teal with cream rim, mostly hidden behind the body -->
  <g class="shell" stroke="#2B3A55" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
    <ellipse cx="115" cy="132" rx="66" ry="50" fill="#6AC9D5"/>
    <!-- cream rim peeking above the shoulders -->
    <path d="M 54 130 Q 115 86 176 130" fill="none" stroke="#FFE0B3" stroke-width="8" stroke-linecap="round"/>
    <!-- subtle scute seams visible at the top rim -->
    <path d="M 115 88 L 115 112" fill="none" stroke="#2B3A55" stroke-width="3" opacity="0.35"/>
    <path d="M 80 110 Q 115 100 150 110" fill="none" stroke="#2B3A55" stroke-width="3" opacity="0.35"/>
  </g>
  <!-- main character group: breathes as one unit -->
  <g class="body-group">
    <!-- small tucked feet -->
    <ellipse cx="84" cy="194" rx="13" ry="7" fill="#7ED8E3" stroke="#2B3A55" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
    <ellipse cx="146" cy="194" rx="13" ry="7" fill="#7ED8E3" stroke="#2B3A55" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
    <!-- round seated body -->
    <ellipse cx="115" cy="154" rx="54" ry="44" fill="#7ED8E3" stroke="#2B3A55" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
    <!-- cream segmented belly plastron -->
    <g class="belly">
      <ellipse cx="115" cy="162" rx="36" ry="28" fill="#FFE0B3" stroke="#2B3A55" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round"/>
      <!-- center seam -->
      <path d="M 115 140 L 115 184" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round" opacity="0.45"/>
      <!-- upper seam -->
      <path d="M 88 157 Q 115 161 142 157" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round" opacity="0.45"/>
      <!-- lower seam -->
      <path d="M 95 173 Q 115 176 135 173" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round" opacity="0.45"/>
    </g>
    <!-- rounded arms resting forward over the belly -->
    <g class="arms">
      <ellipse cx="82" cy="164" rx="12" ry="18" transform="rotate(55 82 164)" fill="#7ED8E3" stroke="#2B3A55" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
      <ellipse cx="148" cy="164" rx="12" ry="18" transform="rotate(-55 148 164)" fill="#7ED8E3" stroke="#2B3A55" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <!-- very round head -->
    <g class="head">
      <circle cx="115" cy="80" r="50" fill="#7ED8E3" stroke="#2B3A55" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
      <!-- tiny forehead freckles -->
      <circle cx="104" cy="46" r="1.4" fill="#2B3A55" stroke="none" opacity="0.45"/>
      <circle cx="116" cy="43" r="1.4" fill="#2B3A55" stroke="none" opacity="0.45"/>
      <circle cx="128" cy="46" r="1.4" fill="#2B3A55" stroke="none" opacity="0.45"/>
      <!-- glossy head highlight -->
      <path d="M 92 58 Q 108 52 128 58" fill="none" stroke="#FFFFFF" stroke-width="3.5" stroke-linecap="round" opacity="0.85"/>
    </g>
    <!-- cute sleepy face -->
    <g class="face">
      <g class="eye eye-left">
        <!-- dark eye -->
        <circle cx="96" cy="84" r="12" fill="#2B3A55" stroke="none"/>
        <!-- half-lid cover in body color -->
        <path d="M 84 84 A 12 12 0 0 1 108 84 L 108 78 Q 96 62 84 78 Z" fill="#7ED8E3" stroke="none"/>
        <!-- eyelid crease -->
        <path d="M 84 84 Q 96 68 108 84" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/>
        <!-- tiny white highlight -->
        <circle cx="92" cy="79" r="3" fill="#FFFFFF" stroke="none"/>
      </g>
      <g class="eye eye-right">
        <circle cx="134" cy="84" r="12" fill="#2B3A55" stroke="none"/>
        <path d="M 122 84 A 12 12 0 0 1 146 84 L 146 78 Q 134 62 122 78 Z" fill="#7ED8E3" stroke="none"/>
        <path d="M 122 84 Q 134 68 146 84" fill="none" stroke="#2B3A55" stroke-width="3" stroke-linecap="round"/>
        <circle cx="130" cy="79" r="3" fill="#FFFFFF" stroke="none"/>
      </g>
      <!-- tiny nostrils -->
      <circle cx="111" cy="96" r="1.5" fill="#2B3A55" stroke="none"/>
      <circle cx="121" cy="96" r="1.5" fill="#2B3A55" stroke="none"/>
      <!-- small relaxed smile -->
      <path d="M 105 104 Q 115 110 125 104" fill="none" stroke="#2B3A55" stroke-width="3.5" stroke-linecap="round"/>
    </g>
  </g>
</svg>

• Recolor the shelleasy

  Swap the teal #6AC9D5 for purple or mint to invent your own turtle species.

• Change the eye moodeasy

  Raise the eyelid path to open the eyes wide, or lower it for an extra-sleepy look.

• Add a second expressionmedium

  Draw a winking eye by replacing one eye group with a closed lid arc.