Charmander

A soft baby Charmander sticker in SVG — front-facing, seated, round-headed, and calm, with tiny dot eyes, a cream belly, a tucked tail, and a small pastel flame. The build stays minimal: rounded forms first, then the gentle face and tiny idle motion.

You’ll learn

• Using simple rounded SVG shapes to make chibi proportions read instantly
• Layering the tail behind the body so a seated pose stays clear
• Making an expression feel calm with dot eyes, a tiny mouth, and small blush dots
• Keeping idle animation subtle and respecting reduced-motion preferences

1. 1

   Set the soft sticker scene

   Start with a pale blush paper rectangle, a soft oval shadow, and a few tiny sparkles. The scene stays quiet so the rounded character silhouette can do most of the work.

   index.html

   copy code

   <rect x="0" y="0" width="230" height="210" rx="18" fill="#FFF0EE" stroke="none"/>
   <ellipse cx="116" cy="190" rx="60" ry="9" fill="#D9A39A" fill-opacity="0.22" stroke="none"/>
   <g class="sparkles" fill="#FFFFFF" stroke="#EFCAC5" stroke-width="2" stroke-linejoin="round" opacity="0.92">
     <path class="sparkle sparkle-one" d="M43 82 L48 92 L43 102 L38 92 Z"/>
     <path class="sparkle sparkle-two" d="M188 63 L193 72 L188 81 L183 72 Z"/>
     <path class="sparkle sparkle-three" d="M172 116 L176 123 L172 130 L168 123 Z"/>
   </g>
   

   a dreamy pastel stage with just enough sparkle and shadow to center the character.

2. 2

   Build the seated silhouette

   Draw the tucked tail first, then the body, tiny feet, little arms, and oversized head. The head is intentionally much bigger than the body for the baby-chibi read.

   index.html

   copy code

   <g class="tail-layer" fill="#F8B978" stroke="#B98982" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round">
     <path class="tail" d="M93 155 C70 148 58 128 64 105 C70 83 87 78 97 92 C81 96 77 112 82 127 C86 139 95 144 106 145 Z"/>
     <g class="flame">
       <path d="M61 75 C47 84 41 102 48 115 C55 128 75 130 84 116 C93 101 82 83 70 72 C68 81 66 86 61 75 Z" fill="#F39B98"/>
       <path d="M66 86 C57 93 54 105 59 113 C64 121 77 120 81 111 C84 102 76 92 69 86 C68 93 67 96 66 86 Z" fill="#FFF26E" stroke="none"/>
     </g>
   </g>
   <g class="baby" fill="#F8B978" stroke="#B98982" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round">
     <ellipse class="body" cx="115" cy="148" rx="34" ry="38"/>
     <ellipse class="foot foot-left" cx="90" cy="183" rx="12" ry="15" transform="rotate(-6 90 183)"/>
     <ellipse class="foot foot-right" cx="140" cy="183" rx="12" ry="15" transform="rotate(6 140 183)"/>
     <path class="head" d="M61 77 C61 42 85 23 115 23 C145 23 169 42 169 77 C169 114 145 132 115 132 C85 132 61 114 61 77 Z"/>
     <ellipse class="arm arm-left" cx="100" cy="150" rx="6" ry="15" transform="rotate(10 100 150)"/>
     <ellipse class="arm arm-right" cx="130" cy="150" rx="6" ry="15" transform="rotate(-10 130 150)"/>
   </g>
   

   a front-facing seated silhouette: big head, compact body, tiny limbs, tail tucked behind.

3. 3

   Add the quiet face

   A cream belly, tiny dot eyes, a short straight mouth, and four blush dots keep the expression soft and calm. The feet get small cream pads instead of claws.

   index.html

   copy code

   <g class="details" stroke="#B98982" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round">
     <path class="belly" d="M101 126 C108 130 122 130 129 126 L131 178 C126 189 104 189 99 178 Z" fill="#FFF9CF"/>
     <ellipse cx="90" cy="182" rx="6" ry="9" fill="#FFF9CF" transform="rotate(-6 90 182)"/>
     <ellipse cx="140" cy="182" rx="6" ry="9" fill="#FFF9CF" transform="rotate(6 140 182)"/>
     <circle class="eye eye-left" cx="96" cy="78" r="5" fill="#8F716F" stroke="none"/>
     <circle class="eye eye-right" cx="134" cy="78" r="5" fill="#8F716F" stroke="none"/>
     <path d="M112 91 Q115 93 118 91" fill="none" stroke="#8F716F" stroke-width="2.5"/>
     <g fill="#CF8785" stroke="none" opacity="0.75">
       <circle cx="83" cy="95" r="2.2"/>
       <circle cx="91" cy="99" r="1.8"/>
       <circle cx="147" cy="95" r="2.2"/>
       <circle cx="139" cy="99" r="1.8"/>
     </g>
   </g>
   

   the finished static sticker: calm dot eyes, tiny mouth, soft cheeks, and no big claws.

4. 4

   Add tiny idle motion

   The final CSS adds a tiny body bob, slow blink, soft flame flicker, and sparkle twinkle. A reduced-motion media query turns those loops off cleanly.

   style.css

   copy code

   .charmander .baby,
   .charmander .details {
     transform-origin: 115px 164px;
     animation: charmander-breathe 3.8s ease-in-out infinite;
   }
   .charmander .flame {
     transform-origin: 66px 110px;
     animation: charmander-flame 1.8s ease-in-out infinite;
   }
   .charmander .sparkle-one {
     animation: charmander-twinkle 3.2s ease-in-out infinite;
   }
   .charmander .sparkle-two {
     animation: charmander-twinkle 3.2s ease-in-out 0.7s infinite;
   }
   .charmander .sparkle-three {
     animation: charmander-twinkle 3.2s ease-in-out 1.3s infinite;
   }
   .charmander .eye {
     transform-origin: center;
     animation: charmander-blink 5.5s ease-in-out infinite;
   }
   @keyframes charmander-breathe {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(1.5px); }
   }
   @keyframes charmander-flame {
     0%, 100% { transform: scale(1) rotate(-1deg); opacity: 0.96; }
     50% { transform: scale(1.035, 1.08) rotate(2deg); opacity: 1; }
   }
   @keyframes charmander-twinkle {
     0%, 100% { opacity: 0.55; transform: scale(0.96); }
     45% { opacity: 1; transform: scale(1.04); }
   }
   @keyframes charmander-blink {
     0%, 92%, 100% { transform: scaleY(1); }
     95% { transform: scaleY(0.16); }
   }
   @media (prefers-reduced-motion: reduce) {
     .charmander .baby,
     .charmander .details,
     .charmander .flame,
     .charmander .sparkles path,
     .charmander .eye {
       animation: none;
     }
   }
   

   the finished chibi Charmander with a soft bob, blink, sparkle, and tiny flame flicker.

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

<svg class="charmander" viewBox="0 0 230 210" width="230" height="210" role="img" aria-label="Seated chibi Charmander fan-art doodle">
  <rect x="0" y="0" width="230" height="210" rx="18" fill="#FFF0EE" stroke="none"/>
  <ellipse cx="116" cy="190" rx="60" ry="9" fill="#D9A39A" fill-opacity="0.22" stroke="none"/>
  <g class="sparkles" fill="#FFFFFF" stroke="#EFCAC5" stroke-width="2" stroke-linejoin="round" opacity="0.92">
    <path class="sparkle sparkle-one" d="M43 82 L48 92 L43 102 L38 92 Z"/>
    <path class="sparkle sparkle-two" d="M188 63 L193 72 L188 81 L183 72 Z"/>
    <path class="sparkle sparkle-three" d="M172 116 L176 123 L172 130 L168 123 Z"/>
  </g>
  <g class="tail-layer" fill="#F8B978" stroke="#B98982" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round">
    <path class="tail" d="M93 155 C70 148 58 128 64 105 C70 83 87 78 97 92 C81 96 77 112 82 127 C86 139 95 144 106 145 Z"/>
    <g class="flame">
      <path d="M61 75 C47 84 41 102 48 115 C55 128 75 130 84 116 C93 101 82 83 70 72 C68 81 66 86 61 75 Z" fill="#F39B98"/>
      <path d="M66 86 C57 93 54 105 59 113 C64 121 77 120 81 111 C84 102 76 92 69 86 C68 93 67 96 66 86 Z" fill="#FFF26E" stroke="none"/>
    </g>
  </g>
  <g class="baby" fill="#F8B978" stroke="#B98982" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round">
    <ellipse class="body" cx="115" cy="148" rx="34" ry="38"/>
    <ellipse class="foot foot-left" cx="90" cy="183" rx="12" ry="15" transform="rotate(-6 90 183)"/>
    <ellipse class="foot foot-right" cx="140" cy="183" rx="12" ry="15" transform="rotate(6 140 183)"/>
    <path class="head" d="M61 77 C61 42 85 23 115 23 C145 23 169 42 169 77 C169 114 145 132 115 132 C85 132 61 114 61 77 Z"/>
    <ellipse class="arm arm-left" cx="100" cy="150" rx="6" ry="15" transform="rotate(10 100 150)"/>
    <ellipse class="arm arm-right" cx="130" cy="150" rx="6" ry="15" transform="rotate(-10 130 150)"/>
  </g>
  <g class="details" stroke="#B98982" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round">
    <path class="belly" d="M101 126 C108 130 122 130 129 126 L131 178 C126 189 104 189 99 178 Z" fill="#FFF9CF"/>
    <ellipse cx="90" cy="182" rx="6" ry="9" fill="#FFF9CF" transform="rotate(-6 90 182)"/>
    <ellipse cx="140" cy="182" rx="6" ry="9" fill="#FFF9CF" transform="rotate(6 140 182)"/>
    <circle class="eye eye-left" cx="96" cy="78" r="5" fill="#8F716F" stroke="none"/>
    <circle class="eye eye-right" cx="134" cy="78" r="5" fill="#8F716F" stroke="none"/>
    <path d="M112 91 Q115 93 118 91" fill="none" stroke="#8F716F" stroke-width="2.5"/>
    <g fill="#CF8785" stroke="none" opacity="0.75">
      <circle cx="83" cy="95" r="2.2"/>
      <circle cx="91" cy="99" r="1.8"/>
      <circle cx="147" cy="95" r="2.2"/>
      <circle cx="139" cy="99" r="1.8"/>
    </g>
  </g>
</svg>

• New flame coloreasy

  Swap the pink outer flame for lavender or peach while keeping the yellow core bright.

• Bigger blusheasy

  Increase the cheek-dot radii by a pixel for an even softer sticker face.

• Steady flameeasy

  Remove the animation for a calm, sleeping Charmander.

• Sleepy posemedium

  Turn the eyes into short arcs and lower the head a few pixels for a dozy version.