Skip to content
CoDdleCoDoodle home
CoDdle
Share your art
Fan Art PracticeBeginnerSVG + CSS

Charmander

A standing, waving chibi Charmander in SVG — navy ink outline, warm orange body, big teal-iris eyes, a cream belly, three claws per hand and foot, and a long tail curling up to a large layered flame.

This coded drawing is a fan-art practice example created for educational purposes only. Pokémon, Charmander, and related characters are trademarks and copyrighted properties of Nintendo, Game Freak, and Creatures Inc. CoDoodle is not affiliated with, endorsed by, or sponsored by Nintendo, Game Freak, or Creatures Inc.

← you, in 35 minutes.

what you'll build

Here's the plan

A standing, waving chibi Charmander sticker in SVG — navy ink outline, warm orange body, a big cream belly, large teal-iris eyes with two little fangs, coral cheeks, three claws on each hand and foot, and a long tail curling up to the right with a large layered flame. The build goes scene first, then the standing silhouette and flaming tail, then the face and claws, then subtle idle motion.

You’ll learn

  • Blocking in a standing pose from simple rounded shapes: planted legs, a compact body, and an oversized head
  • Giving one arm a friendly raised wave while the tail curls out to a layered flame
  • Building expressive eyes by stacking a white oval, a teal iris, a navy pupil, and a tiny highlight
  • Layering 2–3 flame shapes and a soft glow, and keeping every idle loop subtle + reduced-motion friendly
Skill level
Beginner
Time
~35 min
Tools
Just a browser
Code type
SVG + CSS
Lines
~60

the steps

Build it, one change at a time

  1. Set the warm paper scene

    Start with a warm cream paper rectangle, a ground shadow drawn as a few short navy hatch strokes (not a flat oval), and a couple of tiny navy + coral sparkles. The scene stays quiet so the character reads as the clear focal point.

    <rect x="0" y="0" width="250" height="240" rx="20" fill="#FBF2E5" stroke="none"/>
<g class="cm-shadow" fill="none" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round" opacity="0.22">
  <path d="M74 227 L152 227"/>
  <path d="M82 232 L158 232"/>
  <path d="M66 227 L58 232"/>
  <path d="M150 224 L162 230"/>
  <path d="M112 230 L104 235"/>
</g>
<g class="cm-doodads" stroke-linecap="round" stroke-linejoin="round">
  <path class="cm-spark cm-spark1" d="M38 152 L42 160 L38 168 L34 160 Z" fill="#2B3A55" stroke="none"/>
  <path class="cm-spark cm-spark2" d="M190 150 L193 156 L190 162 L187 156 Z" fill="#FF8FA3" stroke="none"/>
  <path class="cm-spark cm-spark3" d="M56 40 L59 46 L56 52 L53 46 Z" fill="#2B3A55" stroke="none"/>
  <path d="M36 40 l5 5 M41 40 l-5 5" stroke="#FF8FA3" stroke-width="2.4" fill="none"/>
</g>

    a warm paper stage: a hatched ground shadow and a couple of sparkles, ready for the character.

  2. Stand up the body and flaming tail

    Draw the tail (with its layered flame) first so its base tucks behind the body, then the two planted legs and feet, the round body, the bent right arm, and the oversized head. The raised left arm and its little hand live in their own group so it can wave later.

    <g class="cm-tail" fill="#F2913C" stroke="#2B3A55" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M150 168 C188 182 214 168 216 128 C217 106 206 94 210 90 C214 96 224 108 223 130 C221 178 186 196 152 184 Z"/>
  <g class="cm-flame">
    <ellipse class="cm-glow" cx="211" cy="60" rx="23" ry="42" fill="#FFC24D" stroke="none" opacity="0.18"/>
    <path class="cm-flame-1" d="M198 94 C188 72 196 46 210 26 C215 44 226 40 222 54 C233 62 230 82 231 94 C222 101 206 101 198 94 Z" fill="#EF7A2E" stroke-width="4"/>
    <path class="cm-flame-2" d="M204 92 C197 76 202 56 212 40 C215 55 223 54 220 66 C227 74 226 86 219 92 C214 96 209 96 204 92 Z" fill="#FFB03A" stroke="none"/>
    <path class="cm-flame-3" d="M207 89 C202 78 205 66 212 55 C214 66 220 66 218 74 C222 80 221 87 216 90 C213 92 210 92 207 89 Z" fill="#FFE07A" stroke="none"/>
  </g>
</g>
<g class="cm-body" fill="#F2913C" stroke="#2B3A55" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M92 168 C78 172 74 190 78 208 C80 222 100 224 104 210 C108 194 106 176 100 168 Z"/>
  <path d="M150 168 C164 172 170 190 166 208 C164 222 144 224 140 210 C136 194 140 176 148 168 Z"/>
  <path d="M68 210 C60 210 56 220 62 226 C70 233 96 233 100 224 C102 216 96 210 88 210 Z"/>
  <path d="M150 210 C142 210 136 216 138 224 C142 233 168 233 176 226 C182 220 176 210 168 210 Z"/>
  <ellipse cx="120" cy="150" rx="46" ry="46"/>
  <path d="M162 136 C178 140 184 156 179 170 C175 181 163 180 159 169 C156 157 154 143 162 136 Z"/>
  <path d="M64 78 C64 44 86 24 118 24 C150 24 172 44 172 78 C172 116 150 132 118 132 C86 132 64 116 64 78 Z"/>
</g>
<g class="cm-wave" fill="#F2913C" stroke="#2B3A55" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M86 126 C70 116 58 98 54 84 C64 92 78 108 92 120 Z"/>
  <path d="M44 90 C37 81 39 66 52 62 C65 60 75 72 73 85 C71 95 54 98 44 90 Z"/>
  <g fill="#FFF3D6" stroke-width="2.4">
    <path d="M46 68 C43 61 46 55 51 57 C55 59 53 65 51 70 Z"/>
    <path d="M57 62 C55 54 60 50 63 53 C66 56 62 62 60 65 Z"/>
    <path d="M68 66 C68 58 73 55 75 59 C77 63 73 68 71 70 Z"/>
  </g>
</g>

    the standing silhouette: planted legs, a big head, a raised waving arm, and the tail curling up to its flame.

  3. Add the belly, claws, and cheerful face

    Lay a big cream belly patch over the body, then three cream claws on each foot and hand. Add coral cheeks, then the face: each eye stacks a white oval, a teal iris, a navy pupil, and a tiny white highlight. Finish with small nostrils, a wide open mouth, and two little fangs.

    <path class="belly" d="M100 128 C110 136 130 136 140 128 C146 150 146 174 138 190 C128 202 112 202 102 190 C94 174 94 150 100 128 Z" fill="#FFF3D6" stroke="#2B3A55" stroke-width="4"/>
<!-- three cream claws on each foot -->
<g fill="#FFF3D6" stroke="#2B3A55" stroke-width="2.2" stroke-linejoin="round">
  <path d="M64 224 C62 230 64 234 68 234 C72 234 72 228 70 224 Z"/>
  <path d="M76 226 C74 232 76 236 80 236 C84 236 84 230 82 226 Z"/>
  <path d="M88 226 C86 232 88 236 92 236 C96 236 96 230 94 226 Z"/>
  <path d="M150 226 C148 232 150 236 154 236 C158 236 158 230 156 226 Z"/>
  <path d="M162 226 C160 232 162 236 166 236 C170 236 170 230 168 226 Z"/>
  <path d="M174 224 C172 230 174 234 178 234 C182 234 182 228 180 224 Z"/>
</g>
<!-- cheeks -->
<g fill="#FF8FA3" stroke="none" opacity="0.7">
  <ellipse cx="86" cy="96" rx="8" ry="5.5"/>
  <ellipse cx="150" cy="96" rx="8" ry="5.5"/>
</g>
<!-- eyes: white oval, teal iris, navy pupil, highlight -->
<g class="cm-eye cm-eye-l">
  <ellipse cx="100" cy="76" rx="13" ry="16" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
  <circle cx="102" cy="80" r="9" fill="#4FB5A8"/>
  <circle cx="102" cy="76" r="8" fill="#2B3A55"/>
  <circle cx="99" cy="71" r="2.6" fill="#FFFFFF"/>
</g>
<g class="cm-eye cm-eye-r">
  <ellipse cx="140" cy="76" rx="13" ry="16" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
  <circle cx="142" cy="80" r="9" fill="#4FB5A8"/>
  <circle cx="142" cy="76" r="8" fill="#2B3A55"/>
  <circle cx="139" cy="71" r="2.6" fill="#FFFFFF"/>
</g>
<!-- nostrils, open mouth, two fangs -->
<circle cx="112" cy="104" r="1.6" fill="#2B3A55"/>
<circle cx="128" cy="104" r="1.6" fill="#2B3A55"/>
<path d="M99 111 C108 131 132 131 141 111 C132 118 108 118 99 111 Z" fill="#E9607A" stroke="#2B3A55" stroke-width="3"/>
<path d="M104 112 l3.2 7 l3.2 -7 Z" fill="#FFFDF7"/>
<path d="M129 112 l3.2 7 l3.2 -7 Z" fill="#FFFDF7"/>

    the finished static sticker: big teal eyes, a fanged open smile, coral cheeks, cream belly and claws.

  4. Bring it to life

    The final CSS layers subtle idle loops: a gentle body bob, a brief hand wave every few seconds, a slow natural blink, a soft tail sway, 2–3 flame layers flickering on their own timings plus a glow pulse, and twinkling sparkles. Each transform-origin is set in the SVG's own units. A reduced-motion media query switches every loop off (DoodleFrame also auto-pauses), leaving a stable pose.

    .charmander .cm-all { animation: cm-bob 3.6s ease-in-out infinite; }
@keyframes cm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
.charmander .cm-wave { transform-origin: 88px 126px; animation: cm-wave 6.5s ease-in-out infinite; }
@keyframes cm-wave {
  0%, 70%, 100% { transform: rotate(0deg); }
  77% { transform: rotate(-12deg); }
  84% { transform: rotate(4deg); }
  91% { transform: rotate(-9deg); }
  97% { transform: rotate(0deg); }
}
.charmander .cm-tail { transform-origin: 150px 174px; animation: cm-sway 3.1s ease-in-out infinite; }
@keyframes cm-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.charmander .cm-flame-1 { transform-origin: 210px 92px; animation: cm-flick1 0.9s ease-in-out infinite alternate; }
.charmander .cm-flame-2 { transform-origin: 210px 90px; animation: cm-flick2 0.65s ease-in-out infinite alternate; }
.charmander .cm-flame-3 { transform-origin: 211px 88px; animation: cm-flick3 1.05s ease-in-out infinite alternate; }
@keyframes cm-flick1 { from { transform: scaleY(1) rotate(-1deg); } to { transform: scaleY(1.08) rotate(2deg); } }
@keyframes cm-flick2 { from { transform: scaleY(1); } to { transform: scaleY(1.12) translateY(-1px); } }
@keyframes cm-flick3 { from { transform: scaleY(0.98); } to { transform: scaleY(1.1); } }
.charmander .cm-glow { transform-origin: 211px 60px; animation: cm-glow 1.7s ease-in-out infinite; }
@keyframes cm-glow { 0%, 100% { opacity: 0.14; } 50% { opacity: 0.26; } }
.charmander .cm-eye-l { transform-origin: 100px 77px; }
.charmander .cm-eye-r { transform-origin: 140px 77px; }
.charmander .cm-eye { animation: cm-blink 5.4s ease-in-out infinite; }
@keyframes cm-blink {
  0%, 52%, 60%, 93%, 100% { transform: scaleY(1); }
  56%, 96% { transform: scaleY(0.1); }
}
.charmander .cm-spark { transform-box: fill-box; transform-origin: center; }
.charmander .cm-spark2 { animation: cm-tw 3s ease-in-out 0.8s infinite; }
@keyframes cm-tw { 0%, 100% { opacity: 0.4; transform: scale(0.85); } 45% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .charmander .cm-all, .charmander .cm-wave, .charmander .cm-tail,
  .charmander .cm-flame-1, .charmander .cm-flame-2, .charmander .cm-flame-3,
  .charmander .cm-glow, .charmander .cm-eye, .charmander .cm-spark { animation: none; }
}

    the finished Charmander: a soft bob, a friendly wave, blinks, a swaying tail and a flickering layered flame.

the complete code

Everything, in one place

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 250 240" width="250" height="240" role="img" aria-label="Standing waving Charmander fan-art doodle">
  <rect x="0" y="0" width="250" height="240" rx="20" fill="#FBF2E5" stroke="none"/>
  <g class="cm-shadow" fill="none" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round" opacity="0.22">
    <path d="M74 227 L152 227"/>
    <path d="M82 232 L158 232"/>
    <path d="M66 227 L58 232"/>
    <path d="M150 224 L162 230"/>
    <path d="M112 230 L104 235"/>
  </g>
  <g class="cm-doodads" stroke-linecap="round" stroke-linejoin="round">
    <path class="cm-spark cm-spark1" d="M38 152 L42 160 L38 168 L34 160 Z" fill="#2B3A55" stroke="none"/>
    <path class="cm-spark cm-spark2" d="M190 150 L193 156 L190 162 L187 156 Z" fill="#FF8FA3" stroke="none"/>
    <path class="cm-spark cm-spark3" d="M56 40 L59 46 L56 52 L53 46 Z" fill="#2B3A55" stroke="none"/>
    <path d="M36 40 l5 5 M41 40 l-5 5" stroke="#FF8FA3" stroke-width="2.4" fill="none"/>
  </g>
  <g class="cm-all">
    <g class="cm-tail">
      <g fill="#F2913C" stroke="#2B3A55" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M150 168 C188 182 214 168 216 128 C217 106 206 94 210 90 C214 96 224 108 223 130 C221 178 186 196 152 184 Z"/>
        <g stroke="#2B3A55" stroke-width="1.6" opacity="0.2" fill="none">
          <path d="M196 150 q6 -3 11 -1"/>
          <path d="M200 160 q6 -3 11 -1"/>
          <path d="M188 138 q5 -3 10 -1"/>
        </g>
      </g>
      <g class="cm-flame">
        <ellipse class="cm-glow" cx="211" cy="60" rx="23" ry="42" fill="#FFC24D" stroke="none" opacity="0.18"/>
        <path class="cm-flame-1" d="M198 94 C188 72 196 46 210 26 C215 44 226 40 222 54 C233 62 230 82 231 94 C222 101 206 101 198 94 Z" fill="#EF7A2E" stroke="#2B3A55" stroke-width="4" stroke-linejoin="round"/>
        <path class="cm-flame-2" d="M204 92 C197 76 202 56 212 40 C215 55 223 54 220 66 C227 74 226 86 219 92 C214 96 209 96 204 92 Z" fill="#FFB03A" stroke="none"/>
        <path class="cm-flame-3" d="M207 89 C202 78 205 66 212 55 C214 66 220 66 218 74 C222 80 221 87 216 90 C213 92 210 92 207 89 Z" fill="#FFE07A" stroke="none"/>
      </g>
    </g>
    <g class="cm-body" fill="#F2913C" stroke="#2B3A55" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round">
      <path class="leg" d="M92 168 C78 172 74 190 78 208 C80 222 100 224 104 210 C108 194 106 176 100 168 Z"/>
      <path class="leg" d="M150 168 C164 172 170 190 166 208 C164 222 144 224 140 210 C136 194 140 176 148 168 Z"/>
      <path class="foot" d="M68 210 C60 210 56 220 62 226 C70 233 96 233 100 224 C102 216 96 210 88 210 Z"/>
      <path class="foot" d="M150 210 C142 210 136 216 138 224 C142 233 168 233 176 226 C182 220 176 210 168 210 Z"/>
      <ellipse class="torso" cx="120" cy="150" rx="46" ry="46"/>
      <path class="arm-right" d="M162 136 C178 140 184 156 179 170 C175 181 163 180 159 169 C156 157 154 143 162 136 Z"/>
      <path class="head" d="M64 78 C64 44 86 24 118 24 C150 24 172 44 172 78 C172 116 150 132 118 132 C86 132 64 116 64 78 Z"/>
      <g stroke="#2B3A55" stroke-width="1.6" opacity="0.18" fill="none">
        <path d="M150 150 q7 4 9 11"/>
        <path d="M156 140 q7 4 9 11"/>
        <path d="M88 186 q6 5 7 12"/>
        <path d="M96 190 q6 5 7 12"/>
      </g>
    </g>
    <g class="cm-wave" fill="#F2913C" stroke="#2B3A55" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M86 126 C70 116 58 98 54 84 C64 92 78 108 92 120 Z"/>
      <path d="M44 90 C37 81 39 66 52 62 C65 60 75 72 73 85 C71 95 54 98 44 90 Z"/>
      <g fill="#FFF3D6" stroke-width="2.4">
        <path d="M46 68 C43 61 46 55 51 57 C55 59 53 65 51 70 Z"/>
        <path d="M57 62 C55 54 60 50 63 53 C66 56 62 62 60 65 Z"/>
        <path d="M68 66 C68 58 73 55 75 59 C77 63 73 68 71 70 Z"/>
      </g>
    </g>
    <g class="cm-details">
      <path class="belly" d="M100 128 C110 136 130 136 140 128 C146 150 146 174 138 190 C128 202 112 202 102 190 C94 174 94 150 100 128 Z" fill="#FFF3D6" stroke="#2B3A55" stroke-width="4" stroke-linejoin="round"/>
      <g fill="#FFF3D6" stroke="#2B3A55" stroke-width="2.2" stroke-linejoin="round">
        <path d="M64 224 C62 230 64 234 68 234 C72 234 72 228 70 224 Z"/>
        <path d="M76 226 C74 232 76 236 80 236 C84 236 84 230 82 226 Z"/>
        <path d="M88 226 C86 232 88 236 92 236 C96 236 96 230 94 226 Z"/>
        <path d="M150 226 C148 232 150 236 154 236 C158 236 158 230 156 226 Z"/>
        <path d="M162 226 C160 232 162 236 166 236 C170 236 170 230 168 226 Z"/>
        <path d="M174 224 C172 230 174 234 178 234 C182 234 182 228 180 224 Z"/>
      </g>
      <g fill="#FFF3D6" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
        <path d="M172 168 C176 170 178 174 175 176 C172 177 170 172 172 168 Z"/>
        <path d="M176 162 C180 163 182 167 179 169 C176 170 174 165 176 162 Z"/>
      </g>
      <g fill="#FF8FA3" stroke="none" opacity="0.7">
        <ellipse cx="86" cy="96" rx="8" ry="5.5"/>
        <ellipse cx="150" cy="96" rx="8" ry="5.5"/>
      </g>
      <g class="cm-face">
        <g class="cm-eye cm-eye-l">
          <ellipse cx="100" cy="76" rx="13" ry="16" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
          <circle cx="102" cy="80" r="9" fill="#4FB5A8" stroke="none"/>
          <circle cx="102" cy="76" r="8" fill="#2B3A55" stroke="none"/>
          <circle cx="99" cy="71" r="2.6" fill="#FFFFFF" stroke="none"/>
        </g>
        <g class="cm-eye cm-eye-r">
          <ellipse cx="140" cy="76" rx="13" ry="16" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
          <circle cx="142" cy="80" r="9" fill="#4FB5A8" stroke="none"/>
          <circle cx="142" cy="76" r="8" fill="#2B3A55" stroke="none"/>
          <circle cx="139" cy="71" r="2.6" fill="#FFFFFF" stroke="none"/>
        </g>
        <path d="M98 99 C106 107 132 107 140 99" fill="none" stroke="#2B3A55" stroke-width="2" opacity="0.25"/>
        <circle cx="112" cy="104" r="1.6" fill="#2B3A55" stroke="none"/>
        <circle cx="128" cy="104" r="1.6" fill="#2B3A55" stroke="none"/>
        <path d="M99 111 C108 131 132 131 141 111 C132 118 108 118 99 111 Z" fill="#E9607A" stroke="#2B3A55" stroke-width="3" stroke-linejoin="round"/>
        <path d="M104 112 l3.2 7 l3.2 -7 Z" fill="#FFFDF7" stroke="none"/>
        <path d="M129 112 l3.2 7 l3.2 -7 Z" fill="#FFFDF7" stroke="none"/>
      </g>
      <g stroke="#2B3A55" stroke-width="2.2" fill="none" opacity="0.5" stroke-linecap="round">
        <path d="M30 74 q-5 4 0 9 M24 70 q-6 5 0 11"/>
        <path d="M196 132 q7 4 0 10 M203 128 q8 5 0 11"/>
      </g>
    </g>
  </g>
</svg>
Open in Playground

tips & gotchas

Mistakes we actually made

Draw the tail before the body so its base tucks behind the belly instead of sitting on top of it.

Stack the eye shapes in order — white oval, teal iris, navy pupil, then the tiny highlight last so it stays on top.

Keep the sketch feel restrained: a few low-opacity navy hatch strokes read as shading without muddying the flat shapes.

The wave is brief on purpose — a long cycle that only rotates the arm for a moment reads as friendlier than a constant swing.

make it yours

Remix it

  • New flame coloreasy

    Shift the three flame layers toward blue-white or violet while keeping the bright core.

  • Bigger cheekseasy

    Nudge the coral cheek ellipses larger for an even rosier expression.

  • Both arms wavemedium

    Give the right arm its own cm-wave-style rotation with an offset delay.

  • Calm poseeasy

    Drop the wave keyframes for a Charmander that just stands and bobs gently.

challenge extension

Same standing style, new expression: make a second mood by changing only the eyes, mouth, and cheeks — try half-closed eyes and a smaller smile for a sleepy look.

Tape it to our fridge

keep sketching

More tutorials to try

Pick another small recipe and borrow one technique for your next doodle.