Skip to content
CoDdleCoDoodle home
CoDdle
Share your art
Food DoodlesBeginnerSVG + CSS

Banana Barista

A tiny banana barista making banana milk iced coffee, one doodle at a time.

← you, in 30 minutes.

what you'll build

Here's the plan

A tiny banana barista running a little coffee cart and presenting a banana-milk iced coffee — warm cream paper, navy ink outlines, and flat pastel fills. Built back-to-front: the cart backdrop first, then the banana character, then the counter and the layered iced drink, then subtle idle motion.

You’ll learn

  • Composing a small scene in paint order (back to front) so the barista sits behind the counter
  • Drawing a cute character from a few rounded shapes — a peeled body, a cap, an apron, and a simple face
  • Faking a transparent iced drink with stacked coffee + banana-milk layers, ice cubes, and a straw
  • Adding gentle, layered idle animation (bob, blink, present, wobble) with reduced-motion support
Skill level
Beginner
Time
~30 min
Tools
Just a browser
Code type
SVG + CSS
Lines
~58

the steps

Build it, one change at a time

  1. Set up the coffee cart

    Lay down the warm paper, a hatched ground shadow, a hanging BANANA BARISTA sign, a couple of sparkles, and a compact coffee machine — the backdrop everything else sits in front of.

    <rect x="0" y="0" width="230" height="210" rx="18" fill="#FBF2E5" stroke="none"/>
<!-- ground shadow -->
<g stroke="#2B3A55" stroke-width="2.2" stroke-linecap="round" opacity="0.16" fill="none">
  <path d="M40 197 L188 197"/>
  <path d="M52 201 L176 201"/>
</g>
<!-- hanging sign -->
<g stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
  <path d="M120 12 L116 30 M150 12 L154 30" opacity="0.6"/>
  <rect x="102" y="28" width="70" height="30" rx="5" fill="#FFFDF7" stroke-width="3"/>
  <text x="137" y="42" font-family="'Comic Sans MS', ui-rounded, system-ui" font-size="10" font-weight="700" fill="#2B3A55" text-anchor="middle">BANANA</text>
  <text x="137" y="53" font-family="'Comic Sans MS', ui-rounded, system-ui" font-size="10" font-weight="700" fill="#FF6B5E" text-anchor="middle">BARISTA</text>
</g>
<path class="bb-spark bb-spark1" d="M30 70 L33 77 L30 84 L27 77 Z" fill="#FF6B5E" stroke="none"/>
<path class="bb-spark bb-spark2" d="M198 66 L201 72 L198 78 L195 72 Z" fill="#2B3A55" stroke="none"/>
<!-- coffee machine -->
<g stroke="#2B3A55" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
  <rect x="170" y="96" width="44" height="42" rx="5" fill="#A9C7D6"/>
  <rect x="176" y="102" width="32" height="12" rx="3" fill="#EAF3F7"/>
  <circle cx="182" cy="124" r="3" fill="#FF6B5E" stroke-width="2.4"/>
  <circle cx="192" cy="124" r="3" fill="#FFFDF7" stroke-width="2.4"/>
  <path d="M200 120 L200 130 L196 134" fill="none"/>
</g>

    the empty cart: a sign, a little machine, and a warm paper backdrop.

  2. Draw the banana barista

    Give the cart its hero — all wrapped in one group so it can bob later: a peeled banana body with drooping peel flaps, a rounded cap, a navy apron, tiny arms (one reaching out to present), and a cheerful blushing face.

    <g class="bb-all">
  <g class="bb-barista">
    <!-- peel flaps -->
    <path d="M52 104 C42 108 37 122 43 133 C48 128 51 116 56 110 Z" fill="#F3E1A8" stroke="#2B3A55" stroke-width="3"/>
    <path d="M82 104 C92 108 97 122 91 133 C86 128 83 116 78 110 Z" fill="#F3E1A8" stroke="#2B3A55" stroke-width="3"/>
    <!-- banana body -->
    <path d="M49 62 C47 49 63 43 75 48 C86 52 87 68 85 90 C83 114 81 132 69 138 C56 140 49 127 49 107 C47 89 50 74 49 62 Z" fill="#FCD34D" stroke="#2B3A55" stroke-width="4"/>
    <!-- cap -->
    <path d="M50 46 C50 32 86 32 86 46 C86 49 50 49 50 46 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="3.5"/>
    <path d="M64 46 C64 38 78 38 80 46 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.6"/>
    <path d="M52 47 C60 51 78 51 84 47 L86 50 C78 55 58 55 50 50 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="3"/>
    <!-- apron -->
    <path d="M55 106 L83 106 L85 138 L53 138 Z" fill="#2B3A55" stroke="#2B3A55" stroke-width="2"/>
    <path d="M62 106 L64 98 M76 106 L74 98" stroke="#2B3A55" stroke-width="2.6" fill="none" stroke-linecap="round"/>
    <circle cx="69" cy="120" r="3" fill="none" stroke="#F3E1A8" stroke-width="2"/>
    <!-- left arm -->
    <path d="M50 98 C41 100 37 110 41 118 C46 114 50 106 54 102 Z" fill="#FCD34D" stroke="#2B3A55" stroke-width="3.5"/>
    <!-- face -->
    <g class="bb-face">
      <ellipse class="bb-eye" cx="62" cy="74" rx="3.2" ry="4.2" fill="#2B3A55"/>
      <ellipse class="bb-eye" cx="78" cy="74" rx="3.2" ry="4.2" fill="#2B3A55"/>
      <path d="M64 82 C68 87 72 87 76 82" fill="none" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round"/>
      <circle cx="56" cy="80" r="3.6" fill="#FF8FA3" opacity="0.7"/>
      <circle cx="84" cy="80" r="3.6" fill="#FF8FA3" opacity="0.7"/>
    </g>
  </g>
  <!-- presenting arm -->
  <g class="bb-arm">
    <path d="M82 94 C98 92 110 98 117 107 C113 111 106 109 99 106 C90 102 83 99 81 96 Z" fill="#FCD34D" stroke="#2B3A55" stroke-width="3.5"/>
    <ellipse cx="118" cy="109" rx="6" ry="5.5" fill="#FCD34D" stroke="#2B3A55" stroke-width="3.5"/>
  </g>
</g>

    a friendly banana barista, one arm out, ready to serve.

  3. Add the counter and iced coffee

    Draw the wooden counter over the barista's base (so it reads as standing behind it), then the star: a glass with a coffee layer, a banana-milk layer, ice cubes, a coral straw, and a banana-slice garnish. A little heart floats above.

    <!-- counter (drawn over the barista's base) -->
<g stroke="#2B3A55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
  <rect x="18" y="132" width="196" height="13" rx="4" fill="#E0B77E"/>
  <rect x="26" y="145" width="180" height="48" rx="4" fill="#C9975A"/>
  <path d="M40 158 L40 180 M60 158 L60 180" stroke="#2B3A55" stroke-width="2" opacity="0.35" fill="none"/>
</g>
<!-- banana milk iced coffee -->
<g class="bb-drink">
  <path d="M118 100 L122 148 C122 152 148 152 148 148 L152 100 Z" fill="#FFFFFF" fill-opacity="0.55" stroke="#2B3A55" stroke-width="3.5"/>
  <path d="M122 128 L124 148 C124 151 146 151 146 148 L148 128 Z" fill="#8A5A3C" stroke="none"/>
  <path d="M119 106 L122 128 L148 128 L151 106 Z" fill="#FBE7A0" stroke="none" opacity="0.92"/>
  <g class="bb-ice" fill="#EAF3F7" fill-opacity="0.8" stroke="#2B3A55" stroke-width="2">
    <rect x="124" y="108" width="10" height="10" rx="2" transform="rotate(-8 129 113)"/>
    <rect x="136" y="112" width="9" height="9" rx="2" transform="rotate(10 140 116)"/>
  </g>
  <path d="M118 100 L122 148 C122 152 148 152 148 148 L152 100" fill="none" stroke="#2B3A55" stroke-width="3.5"/>
  <path d="M140 104 L150 80" stroke="#FF6B5E" stroke-width="4" stroke-linecap="round"/>
  <circle cx="150" cy="100" r="6" fill="#FCD34D" stroke="#2B3A55" stroke-width="2.4"/>
  <circle cx="150" cy="100" r="2.4" fill="#F3E1A8" stroke="none"/>
</g>
<path class="bb-spark bb-spark3" d="M164 84 C162 81 158 82 158 85 C158 88 164 91 164 91 C164 91 170 88 170 85 C170 82 166 81 164 84 Z" fill="none" stroke="#FF6B5E" stroke-width="2"/>

    the finished cart: banana milk iced coffee, presented with a heart.

  4. Bring the cart to life

    Subtle looping motion: the barista bobs, blinks, and gives a little present with its arm; the drink wobbles and its ice shifts; the sparkles twinkle. Everything lives inside @media (prefers-reduced-motion: no-preference) so it freezes to a still scene when motion isn't wanted.

    @media (prefers-reduced-motion: no-preference) {
  .bb .bb-all { animation: bb-bob 3.6s ease-in-out infinite; }
  .bb .bb-arm { transform-origin: 84px 96px; animation: bb-present 5.5s ease-in-out infinite; }
  .bb .bb-eye { transform-box: fill-box; transform-origin: center; animation: bb-blink 5s ease-in-out infinite; }
  .bb .bb-drink { transform-origin: 135px 150px; animation: bb-wobble 4s ease-in-out infinite; }
  .bb .bb-ice { animation: bb-ice 3.2s ease-in-out infinite; }
  .bb .bb-spark { transform-box: fill-box; transform-origin: center; }
  .bb .bb-spark1 { animation: bb-tw 3s ease-in-out infinite; }
  .bb .bb-spark2 { animation: bb-tw 3s ease-in-out 1s infinite; }
  .bb .bb-spark3 { animation: bb-tw 2.6s ease-in-out 0.5s infinite; }
}
@keyframes bb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes bb-present {
  0%, 68%, 100% { transform: rotate(0deg); }
  78% { transform: rotate(-6deg); }
  86% { transform: rotate(-2deg); }
  93% { transform: rotate(-5deg); }
}
@keyframes bb-blink { 0%, 46%, 52%, 92%, 100% { transform: scaleY(1); } 49%, 95% { transform: scaleY(0.1); } }
@keyframes bb-wobble { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes bb-ice { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0.6px, -0.6px); } }
@keyframes bb-tw { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 45% { opacity: 1; transform: scale(1.1); } }

    the banana barista, gently bobbing and presenting its banana milk iced coffee.

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="bb" viewBox="0 0 230 210" width="230" height="210" role="img" aria-label="A banana barista making banana milk iced coffee">
  <rect x="0" y="0" width="230" height="210" rx="18" fill="#FBF2E5" stroke="none"/>
  <g stroke="#2B3A55" stroke-width="2.2" stroke-linecap="round" opacity="0.16" fill="none">
    <path d="M40 197 L188 197"/>
    <path d="M52 201 L176 201"/>
  </g>
  <g stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M120 12 L116 30 M150 12 L154 30" opacity="0.6"/>
    <rect x="102" y="28" width="70" height="30" rx="5" fill="#FFFDF7" stroke-width="3"/>
    <text x="137" y="42" font-family="'Comic Sans MS', ui-rounded, system-ui" font-size="10" font-weight="700" fill="#2B3A55" text-anchor="middle">BANANA</text>
    <text x="137" y="53" font-family="'Comic Sans MS', ui-rounded, system-ui" font-size="10" font-weight="700" fill="#FF6B5E" text-anchor="middle">BARISTA</text>
  </g>
  <path class="bb-spark bb-spark1" d="M30 70 L33 77 L30 84 L27 77 Z" fill="#FF6B5E" stroke="none"/>
  <path class="bb-spark bb-spark2" d="M198 66 L201 72 L198 78 L195 72 Z" fill="#2B3A55" stroke="none"/>
  <g stroke="#2B3A55" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
    <rect x="170" y="96" width="44" height="42" rx="5" fill="#A9C7D6"/>
    <rect x="176" y="102" width="32" height="12" rx="3" fill="#EAF3F7"/>
    <circle cx="182" cy="124" r="3" fill="#FF6B5E" stroke-width="2.4"/>
    <circle cx="192" cy="124" r="3" fill="#FFFDF7" stroke-width="2.4"/>
    <path d="M200 120 L200 130 L196 134" fill="none"/>
  </g>
  <g class="bb-all">
    <g class="bb-barista">
      <path d="M52 104 C42 108 37 122 43 133 C48 128 51 116 56 110 Z" fill="#F3E1A8" stroke="#2B3A55" stroke-width="3" stroke-linejoin="round"/>
      <path d="M82 104 C92 108 97 122 91 133 C86 128 83 116 78 110 Z" fill="#F3E1A8" stroke="#2B3A55" stroke-width="3" stroke-linejoin="round"/>
      <path d="M49 62 C47 49 63 43 75 48 C86 52 87 68 85 90 C83 114 81 132 69 138 C56 140 49 127 49 107 C47 89 50 74 49 62 Z" fill="#FCD34D" stroke="#2B3A55" stroke-width="4" stroke-linejoin="round"/>
      <path d="M50 46 C50 32 86 32 86 46 C86 49 50 49 50 46 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
      <path d="M64 46 C64 38 78 38 80 46 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.6" stroke-linejoin="round"/>
      <path d="M52 47 C60 51 78 51 84 47 L86 50 C78 55 58 55 50 50 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="3" stroke-linejoin="round"/>
      <path d="M55 106 L83 106 L85 138 L53 138 Z" fill="#2B3A55" stroke="#2B3A55" stroke-width="2"/>
      <path d="M62 106 L64 98 M76 106 L74 98" stroke="#2B3A55" stroke-width="2.6" fill="none" stroke-linecap="round"/>
      <circle cx="69" cy="120" r="3" fill="none" stroke="#F3E1A8" stroke-width="2"/>
      <path d="M50 98 C41 100 37 110 41 118 C46 114 50 106 54 102 Z" fill="#FCD34D" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
      <g class="bb-face">
        <ellipse class="bb-eye" cx="62" cy="74" rx="3.2" ry="4.2" fill="#2B3A55" stroke="none"/>
        <ellipse class="bb-eye" cx="78" cy="74" rx="3.2" ry="4.2" fill="#2B3A55" stroke="none"/>
        <path d="M64 82 C68 87 72 87 76 82" fill="none" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round"/>
        <circle cx="56" cy="80" r="3.6" fill="#FF8FA3" stroke="none" opacity="0.7"/>
        <circle cx="84" cy="80" r="3.6" fill="#FF8FA3" stroke="none" opacity="0.7"/>
      </g>
    </g>
    <g class="bb-arm">
      <path d="M82 94 C98 92 110 98 117 107 C113 111 106 109 99 106 C90 102 83 99 81 96 Z" fill="#FCD34D" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
      <ellipse cx="118" cy="109" rx="6" ry="5.5" fill="#FCD34D" stroke="#2B3A55" stroke-width="3.5"/>
    </g>
  </g>
  <g stroke="#2B3A55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
    <rect x="18" y="132" width="196" height="13" rx="4" fill="#E0B77E"/>
    <rect x="26" y="145" width="180" height="48" rx="4" fill="#C9975A"/>
    <path d="M40 158 L40 180 M60 158 L60 180" stroke="#2B3A55" stroke-width="2" opacity="0.35" fill="none"/>
  </g>
  <g class="bb-drink">
    <path d="M118 100 L122 148 C122 152 148 152 148 148 L152 100 Z" fill="#FFFFFF" fill-opacity="0.55" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
    <path d="M122 128 L124 148 C124 151 146 151 146 148 L148 128 Z" fill="#8A5A3C" stroke="none"/>
    <path d="M119 106 L122 128 L148 128 L151 106 Z" fill="#FBE7A0" stroke="none" opacity="0.92"/>
    <g class="bb-ice" fill="#EAF3F7" fill-opacity="0.8" stroke="#2B3A55" stroke-width="2">
      <rect x="124" y="108" width="10" height="10" rx="2" transform="rotate(-8 129 113)"/>
      <rect x="136" y="112" width="9" height="9" rx="2" transform="rotate(10 140 116)"/>
    </g>
    <path d="M118 100 L122 148 C122 152 148 152 148 148 L152 100" fill="none" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
    <path d="M140 104 L150 80" stroke="#FF6B5E" stroke-width="4" stroke-linecap="round"/>
    <circle cx="150" cy="100" r="6" fill="#FCD34D" stroke="#2B3A55" stroke-width="2.4"/>
    <circle cx="150" cy="100" r="2.4" fill="#F3E1A8" stroke="none"/>
  </g>
  <path class="bb-spark bb-spark3" d="M164 84 C162 81 158 82 158 85 C158 88 164 91 164 91 C164 91 170 88 170 85 C170 82 166 81 164 84 Z" fill="none" stroke="#FF6B5E" stroke-width="2"/>
</svg>
Open in Playground

tips & gotchas

Mistakes we actually made

Paint order is the whole trick — draw the barista before the counter so the counter overlaps its base and it reads as standing behind the cart.

The transparent glass is just a near-clear shape with two flat colour bands inside (coffee under, banana milk over) and a couple of low-opacity ice squares.

Keep the idle motion tiny: a 2px bob and a 1.5° drink wobble feel alive without getting busy.

make it yours

Remix it

  • New drinkeasy

    Recolour the two layers — matcha + oat milk, or strawberry + cream.

  • Swap the capeasy

    Change the coral cap for a little visor or a tiny beanie.

  • Busier cartmedium

    Add a second cup or a small pastry on the counter — but keep it uncrowded.

  • Add steammedium

    Draw two thin wavy lines rising from the machine with a slow upward drift.

challenge extension

Same little-cart idea, new mascot: turn the barista into a strawberry or an avocado, and give the drink a matching colour.

Tape it to our fridge