Fan Art Practice

Pikachu Fan-Art Practice

A layered SVG Pikachu — chibi body, ink-tipped ears, and a zigzag lightning tail — built from stacked ellipses and one hand-drawn path.

BeginnerSVG~35 min

Start tutorialOpen in Playground

This is a fan-art practice tutorial for educational purposes only. Fan-art examples are not CoDoodle branding.

what you'll build

Here's the plan

You’ll learn

Layer simple SVG shapes the way you'd layer divs in CSS art
Draw a jagged shape like a lightning-bolt tail with one multi-point path
Use transform: rotate() on individual shapes to angle ears and limbs
Animate one small part independently with its own transform-origin

the steps

Build it, one change at a time

Block in the body

A squat body ellipse, two back-stripe arcs, two rotated arm ellipses, two feet, and a big head ellipse on top — six shapes, zero details, and it already reads as a chibi silhouette.

HTML

<ellipse class="body" cx="105" cy="164" rx="40" ry="36"/>
<path d="M75 170 Q105 179 135 170" fill="none" stroke="#C98A5B" stroke-width="9"/>
<path d="M82 185 Q105 193 128 185" fill="none" stroke="#C98A5B" stroke-width="9"/>
<ellipse cx="68" cy="152" rx="9" ry="16" transform="rotate(28 68 152)"/>
<ellipse cx="142" cy="152" rx="9" ry="16" transform="rotate(-28 142 152)"/>
<ellipse cx="85" cy="199" rx="15" ry="9"/>
<ellipse cx="125" cy="199" rx="15" ry="9"/>
<ellipse class="head" cx="105" cy="86" rx="66" ry="55"/>

Add ink-tipped ears

Each ear is two stacked ellipses — a long yellow ellipse, plus a small ink-colored one at the tip. Mirroring the rotation angle (-24deg / 24deg) is what makes the pair feel symmetric without duplicating math.

HTML

<g class="ear ear-left">
  <ellipse cx="56" cy="34" rx="14" ry="36" transform="rotate(-24 56 34)"/>
  <ellipse cx="44" cy="6" rx="10" ry="14" transform="rotate(-24 44 6)" fill="#2B3A55" stroke="none"/>
</g>
<g class="ear ear-right">
  <ellipse cx="154" cy="34" rx="14" ry="36" transform="rotate(24 154 34)"/>
  <ellipse cx="166" cy="6" rx="10" ry="14" transform="rotate(24 166 6)" fill="#2B3A55" stroke="none"/>
</g>

Draw the zigzag tail
The whole tail is one path with sharp corners — no smoothing, no curves, just straight lines drawn like a lightning bolt, with its base tucked under the body so it reads as attached, not pasted on.
HTML
 <path class="tail" d="M128 170 L143 166 L168 122 L155 117 L178 82 L165 78 L186 44 L211 36 L200 76 L212 80 L190 118 L201 123 L170 168 Z"/>
a zigzag tail sneaking out from behind the body — one path, drawn like a lightning bolt.

Finish the face and twitch an ear

Eyes, tiny highlight dots, cheeks, a nose, and a small curved mouth finish the face. Then one keyframe on the right ear's own transform-origin makes it twitch every few seconds without touching anything else.

CSS

<circle cx="77" cy="82" r="7" fill="#2B3A55" stroke="none"/>
<circle cx="133" cy="82" r="7" fill="#2B3A55" stroke="none"/>
<circle cx="56" cy="108" r="13" fill="#FF6B5E" stroke="none"/>
<circle cx="154" cy="108" r="13" fill="#FF6B5E" stroke="none"/>
<path d="M92 104 Q99 112 105 104 Q111 112 118 104" fill="none" stroke-width="4"/>

/* one tiny idle motion: the right ear twitches every few seconds */
.pikachu .ear-right {
  transform-origin: 150px 58px;
  animation: ear-twitch 3.8s ease-in-out infinite;
}
@keyframes ear-twitch {
  0%, 84%, 100% { transform: rotate(0deg); }
  89% { transform: rotate(9deg); }
  94% { transform: rotate(-4deg); }
}

make it yours

Make it yours

Change the moodTry a new color paletteAdd a sparkleMake it rainTurn into a food mascot

related doodles

Pikachu Fan-Art Practice

Here's the plan

Build it, one change at a time

Block in the body

Add ink-tipped ears

Draw the zigzag tail

Finish the face and twitch an ear

Make it yours

Tiny Sleepy Cloud

CSS Food Mascot

Charmander

Pikachu Fan-Art Practice

Here's the plan

Build it, one change at a time

Block in the body

Add ink-tipped ears

Draw the zigzag tail

Finish the face and twitch an ear

Make it yours

Try one of these next

Tiny Sleepy Cloud

CSS Food Mascot

Charmander