Bulbasaur

A low, crouching SVG Bulbasaur — planted front legs, a broad angular head with a confident narrow-eyed expression, and a layered, dimensional bulb on its back — built the same way as the other fan-art doodles: body, then head, then the one detail that makes it unmistakable (the bulb), then a face.

You’ll learn

• Suggesting a forward-leaning crouch with an asymmetric body path instead of literally rotating the whole shape
• Layering darker background shapes behind a lighter one to fake the depth of a folded, dimensional bulb
• Drawing a confident expression with an asymmetric almond eye shape instead of a plain circle
• Applying one shared animation to a whole layered group so it moves together as one unit

1. 1

   Build the crouching body

   The hind legs are drawn first and mostly tucked behind the body path, so only their feet peek out — that's the "tucked under" read. The body itself leans: lower and rounder on the front-left where the weight sits, tucked higher at the back.

   index.html

   copy code

   <path d="M142 140 L148 172 C150 179 140 180 136 174 L124 146 Z" fill="#49B49D"/>
   <path d="M162 142 L168 170 C170 176 161 178 157 172 L146 148 Z" fill="#49B49D"/>
   <path class="body" d="M34 112 C34 90 62 80 108 82 C158 84 197 92 198 116 C199 136 182 154 120 156 C64 156 36 134 34 112 Z"/>
   <path d="M32 144 L20 190 C20 198 40 200 48 191 L70 150 Z"/>
   <path d="M88 150 L80 192 C80 200 98 201 105 192 L120 154 Z"/>
   <ellipse cx="24" cy="193" rx="2.8" ry="2.2" fill="#FFFDF7"/>
   <ellipse cx="32" cy="197" rx="2.8" ry="2.2" fill="#FFFDF7"/>
   <ellipse cx="41" cy="193" rx="2.8" ry="2.2" fill="#FFFDF7"/>
   <ellipse cx="84" cy="197" rx="2.8" ry="2.2" fill="#FFFDF7"/>
   <ellipse cx="92" cy="200" rx="2.8" ry="2.2" fill="#FFFDF7"/>
   <ellipse cx="101" cy="196" rx="2.8" ry="2.2" fill="#FFFDF7"/>
   

   a low, wide body already leaning forward — front legs planted, hind legs tucked in.

2. 2

   Add the head and short ears

   The head is a rounded path with a jaw notch at the bottom, not a plain ellipse — that little break in the curve is what reads as a cheek instead of a perfectly round face. The ears stay short and wide-set at the sides, which is what keeps them from reading as a cat's.

   index.html

   copy code

   <path d="M64 46 L54 32 L82 40 Z"/>
   <path d="M166 46 L176 32 L148 40 Z"/>
   <path class="head" d="M58 68 Q56 42 92 34 Q135 28 158 50 Q172 66 160 86 Q150 102 120 106 Q92 108 72 98 Q58 86 58 68 Z"/>
   

   a broad head with a hint of jaw. Still no face — patiently waiting.

3. 3

   Layer the dimensional bulb

   Two darker green ellipses sit behind one lighter, bigger lobe — the sliver of each ellipse that peeks out from behind the front lobe is what sells the folded, layered look, the same depth trick as the darker far legs.

   index.html

   copy code

   <g class="bulb">
     <ellipse cx="207" cy="55" rx="22" ry="30" transform="rotate(20 207 55)" fill="#3E9B7E"/>
     <ellipse cx="165" cy="72" rx="20" ry="27" transform="rotate(-15 165 72)" fill="#3E9B7E"/>
     <path d="M155 95 Q145 55 185 32 Q222 28 228 62 Q224 92 190 100 Q165 98 155 95 Z" fill="#57BD96"/>
     <path d="M170 92 Q178 65 170 42" fill="none" stroke-width="3.5"/>
     <path d="M195 96 Q204 68 198 44" fill="none" stroke-width="3.5"/>
   </g>
   

   the bulb — two shadowed lobes behind one bright one, sitting clear above the head.

4. 4

   Give it a face and spots

   The eyes are an asymmetric almond shape, not a circle — a sharper outer corner and a slanted upper lid is what reads as confident rather than sleepy. The mouth is an actual filled shape so the pink shows, with two small pale fangs at its corners. Six varied dark-teal patches, not three neat blobs, finish the pattern.

   index.html

   copy code

   <circle cx="106" cy="94" r="1.8" fill="#2B3A55" stroke="none"/>
   <circle cx="122" cy="94" r="1.8" fill="#2B3A55" stroke="none"/>
   <path d="M90 96 Q108 122 128 98 Q109 108 90 96 Z" fill="#FF8B8B"/>
   <path d="M96 98 L100 89 L104 98 Z" fill="#FFFDF7" stroke="none"/>
   <path d="M114 99 L118 90 L122 99 Z" fill="#FFFDF7" stroke="none"/>
   <path d="M76 68 Q88 56 100 66 Q90 78 78 76 Q74 72 76 68 Z" fill="#E0526E"/>
   <path d="M128 66 Q140 56 152 68 Q142 78 130 76 Q126 72 128 66 Z" fill="#E0526E"/>
   <circle cx="90" cy="68" r="2.2" fill="#2B3A55" stroke="none"/>
   <circle cx="138" cy="68" r="2.2" fill="#2B3A55" stroke="none"/>
   <path d="M140 55 C146 53 151 58 149 64 C147 70 140 71 137 66 C134 61 135 57 140 55 Z" fill="#3E9B7E" stroke="none"/>
   <path d="M75 95 C82 93 88 99 85 106 C82 113 73 113 69 107 C65 101 68 97 75 95 Z" fill="#3E9B7E" stroke="none"/>
   <path d="M150 92 C155 90 159 94 157 99 C155 104 149 104 146 100 C143 96 145 93 150 92 Z" fill="#3E9B7E" stroke="none"/>
   <path d="M165 140 C172 138 177 143 174 149 C171 155 163 155 160 150 C157 145 159 141 165 140 Z" fill="#3E9B7E" stroke="none"/>
   <path d="M45 160 C50 158 54 162 52 167 C50 172 44 172 41 168 C38 164 40 161 45 160 Z" fill="#3E9B7E" stroke="none"/>
   <path d="M155 165 C160 163 164 167 162 172 C160 177 154 177 151 173 C148 169 150 166 155 165 Z" fill="#3E9B7E" stroke="none"/>
   

   a confident, narrow-eyed face with small fangs, and spots scattered across the body.

5. 5

   Make the bulb sway

   Every shape in the bulb group shares one transform-origin, so a single keyframe rotates the whole layered bundle together — like it's daydreaming — instead of each lobe swaying at its own odd pivot point.

   style.css

   copy code

   /* the bulb sways gently, like it's daydreaming */
   .bulbasaur .bulb {
     transform-origin: 160px 90px;
     animation: bulb-sway 3.4s ease-in-out infinite;
   }
   @keyframes bulb-sway {
     0%, 100% { transform: rotate(-2deg); }
     50% { transform: rotate(2.5deg); }
   }
   

   the finished Bulbasaur, crouched and ready, bulb swaying like it's daydreaming.

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

<svg class="bulbasaur" viewBox="0 0 240 200" width="240" height="200" role="img" aria-label="Chibi strawberry-Bulbasaur fan-art doodle">
  <g stroke="#92A79B" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" fill="#E4F0EA">
    <!-- sage leaves peeking behind the lower-right of the body -->
    <g fill="#9DB89E" stroke="#86A588" stroke-width="2.4">
      <path d="M176 132 C192 126 208 130 214 144 C202 150 186 146 176 140 Z"/>
      <path d="M182 142 C196 144 206 154 203 166 C193 160 184 152 180 148 Z"/>
    </g>

    <!-- strawberry on the back (sways gently as one group) -->
    <g class="bulbasaur-strawberry">
      <!-- berry body -->
      <path d="M151 74 C149 56 165 44 184 44 C205 44 221 58 219 78 C217 100 200 120 184 130 C180 133 176 133 173 129 C165 118 156 98 151 74 Z" fill="#E29AA0" stroke="#CE8E95" stroke-width="3"/>
      <!-- subtle shade down the lower-right -->
      <path d="M199 62 C214 72 214 96 189 120 C200 100 203 80 199 62 Z" fill="#D98B92" stroke="none" opacity="0.55"/>
      <!-- pale seeds, scattered off the grid -->
      <g fill="#F6E0E2" stroke="none">
        <ellipse cx="170" cy="72" rx="1.7" ry="2.8" transform="rotate(-18 170 72)"/>
        <ellipse cx="187" cy="66" rx="1.7" ry="2.8" transform="rotate(6 187 66)"/>
        <ellipse cx="203" cy="74" rx="1.7" ry="2.8" transform="rotate(20 203 74)"/>
        <ellipse cx="166" cy="90" rx="1.7" ry="2.8" transform="rotate(-24 166 90)"/>
        <ellipse cx="184" cy="88" rx="1.7" ry="2.8"/>
        <ellipse cx="201" cy="95" rx="1.7" ry="2.8" transform="rotate(22 201 95)"/>
        <ellipse cx="177" cy="106" rx="1.7" ry="2.8" transform="rotate(-10 177 106)"/>
        <ellipse cx="193" cy="110" rx="1.7" ry="2.8" transform="rotate(14 193 110)"/>
      </g>
      <!-- leafy crown at the top of the berry -->
      <g fill="#9DB89E" stroke="#86A588" stroke-width="2.2">
        <path d="M184 52 C176 40 165 37 158 41 C166 47 173 51 184 54 Z"/>
        <path d="M184 52 C183 38 181 31 186 26 C191 33 191 45 186 54 Z"/>
        <path d="M184 52 C193 41 203 39 210 44 C202 48 194 52 184 54 Z"/>
      </g>
    </g>

    <!-- soft rounded ears, peeking above the head -->
    <path d="M74 78 C70 64 78 56 88 58 C94 60 96 70 94 80 Z"/>
    <path d="M112 76 C114 62 124 58 130 64 C134 70 130 80 124 84 Z"/>

    <!-- stubby feet, peeking under the front -->
    <ellipse cx="80" cy="176" rx="13" ry="11"/>
    <ellipse cx="108" cy="180" rx="13" ry="11"/>
    <ellipse cx="134" cy="176" rx="12" ry="10"/>

    <!-- squat plush body + head blob (one shape, faces slightly left) -->
    <path d="M52 120 C50 92 72 72 102 72 C140 72 170 90 170 122 C170 156 144 176 106 176 C72 176 54 152 52 120 Z"/>

    <!-- soft teal patches: one on the forehead, two sparse on the body -->
    <path d="M90 96 C86 87 95 82 106 84 C117 86 119 97 111 103 C102 108 94 103 90 96 Z" fill="#AEC7BA" stroke="none"/>
    <ellipse cx="146" cy="130" rx="11" ry="8.5" fill="#AEC7BA" stroke="none" transform="rotate(-14 146 130)"/>
    <ellipse cx="84" cy="151" rx="7.5" ry="6" fill="#AEC7BA" stroke="none"/>

    <!-- tiny near-black eyes, close-set and low on the face -->
    <ellipse cx="90" cy="126" rx="5.6" ry="7.6" fill="#33383A" stroke="none"/>
    <ellipse cx="118" cy="126" rx="5.6" ry="7.6" fill="#33383A" stroke="none"/>
    <!-- tiny pouty mouth (no smile) -->
    <path d="M100 137 C101.6 139.6 103.4 139.6 104 137 C104.6 139.6 106.4 139.6 108 137" fill="none" stroke="#5C6B66" stroke-width="2.2"/>
    <!-- soft pink blush -->
    <ellipse cx="74" cy="139" rx="9" ry="6" fill="#F2B0AD" stroke="none" opacity="0.85"/>
    <ellipse cx="132" cy="139" rx="9" ry="6" fill="#F2B0AD" stroke="none" opacity="0.85"/>

    <!-- a little doodled heart + squiggle to the left -->
    <path d="M32 92 C28 87 21 89 21 95 C21 101 32 106 32 106 C32 106 43 101 43 95 C43 89 36 87 32 92 Z" fill="none" stroke="#B7C6BC" stroke-width="2.4"/>
    <path d="M20 116 Q26 111 31 115 Q36 119 43 114" fill="none" stroke="#B7C6BC" stroke-width="2.4"/>
  </g>
</svg>

• New bulb coloreasy

  Shift the two green tones for an autumn or blue-leaf variant.

• More spotseasy

  Copy a spot path, nudge its position, and shrink it slightly.

• Softer expressioneasy

  Round out the eye shape and drop the fangs for a gentler mood.

• Deeper crouchmedium

  Lower the front legs and raise the hind legs further for a more dramatic lean.