Bulbasaur

A soft chibi strawberry-Bulbasaur sticker in SVG — a squat plush body-and-head blob, little ears and stubby feet peeking out from behind, a ripe strawberry nestled on its back, and a tiny pouty face with soft cheeks — built the CoDoodle way: the body first, then the bits that peek from behind it, then the one detail that makes it unmistakable (the strawberry), then a face, then one gentle sway.

You’ll learn

• Drawing a squat body and head as a single rounded blob instead of separate head and body shapes
• Using paint order (document order) to tuck ears, feet, and a whole strawberry behind the body so they peek out naturally
• Getting a soft sticker look from flat mint fills and one green-grey "single-hand" outline, with no heavy ink
• Wrapping the strawberry in one group so a single keyframe sways the whole thing from one pivot

1. 1

   Rough the plush body

   Everything lives inside one group that sets the mint fill (#E4F0EA) and a single soft green-grey outline (#92A79B), so most shapes need no fill of their own. Start with the body and head as ONE squat, rounded blob that leans a touch left — not a separate circle head on a body.

   index.html

   copy code

   <!-- 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"/>
   

   one squat plush blob — the body and head in a single rounded shape.

2. 2

   Add ears and stubby feet

   The ears and three stubby feet are drawn BEFORE the body in the markup, so the body paints over their inner edges and they read as peeking out from behind — the same tuck you'll use for the strawberry next. Two soft ears sit above, three little feet below.

   index.html

   copy code

   <!-- 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"/>
   

   little ears and three stubby feet peeking out from behind the body.

3. 3

   Nestle the strawberry on its back

   The signature detail, and it's drawn first of all — furthest back — so the body overlaps its lower-left and it reads as sitting on the back. A pink berry with a soft shade down one side, pale seeds scattered off the grid, a little sage crown, and two leaves peeking past the body's right edge. It's wrapped in a .bulbasaur-strawberry group so it can move as one piece later.

   index.html

   copy code

   <!-- 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 (one group so it can sway later) -->
   <g class="bulbasaur-strawberry">
     <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"/>
     <path d="M199 62 C214 72 214 96 189 120 C200 100 203 80 199 62 Z" fill="#D98B92" stroke="none" opacity="0.55"/>
     <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>
     <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>
   

   a ripe strawberry nestled on the back, tucked in behind the body.

4. 4

   Give it a face and soft patches

   Tiny near-black eyes set low and close together, a small pouty mouth (two little curves, no smile), and soft pink blush. Then three teal patches — one on the forehead, two sparse on the body — and a little doodled heart off to the left. Varying the patch shapes keeps them reading as soft markings, not identical stamps.

   index.html

   copy code

   <!-- soft teal patches: forehead + two 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 + a small pouty mouth -->
   <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"/>
   <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"/>
   

   a soft pouty face, pink blush, teal patches, and a doodled heart — the full sticker.

5. 5

   Make the strawberry sway

   The whole strawberry lives in one .bulbasaur-strawberry group with a shared transform-origin where it nestles on the back, so a single keyframe rocks the entire berry — seeds, crown and all — as one unit, like a slow daydream. A reduced-motion guard lives in the CSS because the sandbox has no global motion kill-switch.

   style.css

   copy code

   /* one subtle motion: the strawberry sways from where it nestles on the back */
   .bulbasaur .bulbasaur-strawberry {
     transform-origin: 172px 122px;
     animation: berry-sway 4.2s ease-in-out infinite;
   }
   @keyframes berry-sway {
     0%, 100% { transform: rotate(-2deg); }
     50% { transform: rotate(2deg); }
   }
   /* the sandbox has no global reduced-motion kill-switch, so guard it here */
   @media (prefers-reduced-motion: reduce) {
     .bulbasaur .bulbasaur-strawberry { animation: none; }
   }
   

   the finished strawberry-Bulbasaur, its berry swaying gently 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 berry coloreasy

  Shift the pink berry toward blueberry-blue or golden — recolor the berry, its shade, and the seeds together.

• More patcheseasy

  Copy a teal patch, nudge its position, and vary its curve so it doesn't look stamped.

• Sleepier eyeseasy

  Flatten the eye ellipses and lower them a touch for a droopier, dozier mood.

• Bigger swaymedium

  Widen the berry-sway rotation or slow its timing for a dreamier drift.