Blueberry Milk

A tall glass of blueberry milk in a soft lavender-blue palette, sitting on warm paper with chunky navy sticker outlines, a striped straw, a gentle milk swirl, and two tiny blueberry buddies beside it. The finished doodle feels like a calm summer drink trend turned into a fridge sticker: creamy motion, sleepy bubbles, little faces, and just enough sparkle around the edges.

You’ll learn

• Layering an SVG drink scene from paper stage to glass silhouette to tiny character details
• Using one lavender-blue color family for milk, shadow, shine, and bubbles without making the drawing feel flat
• Building cute blueberry buddies with simple circles, leaf crowns, dot eyes, blush, and tiny mouth paths
• Animating a calm drink with transform and opacity only, wrapped in reduced-motion support

1. 1

   Set the summer paper

   Start with the warm paper stage, a soft navy shadow where the glass will sit, and a few edge sparkles and flecks. These little props frame the drink without crowding it, so the pale milk color can stay peaceful in the center.

   index.html

   copy code

   <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
   <ellipse class="bm-shadow" cx="101" cy="160" rx="58" ry="12" fill="#2B3A55" opacity="0.14" stroke="none"/>
   <path class="bm-spark bm-spark1" d="M31 51 L35 59 L31 67 L27 59 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
   <path class="bm-spark bm-spark2" d="M165 50 L169 57 L165 64 L161 57 Z" fill="#FF8FA3" stroke="none"/>
   <path class="bm-spark bm-spark3" d="M34 134 L37 140 L34 146 L31 140 Z" fill="#FFD84D" stroke="none" opacity="0.9"/>
   <circle class="bm-spark bm-dot1" cx="151" cy="33" r="3" fill="#FFD84D" stroke="none"/>
   <circle class="bm-spark bm-dot2" cx="171" cy="133" r="2.5" fill="#FF6B5E" stroke="none"/>
   <path class="bm-fleck bm-fleck1" d="M43 78 l8 -3" fill="none" stroke="#AAB9E8" stroke-width="3" stroke-linecap="round"/>
   <path class="bm-fleck bm-fleck2" d="M158 151 l8 4" fill="none" stroke="#2B3A55" stroke-width="2.5" stroke-linecap="round" opacity="0.65"/>
   

   paper warm, sparkles placed, blueberry mood incoming.

2. 2

   Pour the milk

   Draw the glass as one slightly tapered shape with a thick navy outline and a flat lavender-blue fill. The pale milk line below the rim gives it a poured look before any straw, swirl, or berry friends arrive.

   index.html

   copy code

   <g class="bm-glass">
     <path class="bm-milk-body" d="M66 49 H134 L127 153 H73 Z" fill="#C9D4F2" stroke="#2B3A55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
     <path class="bm-milk-line" d="M74 62 C88 66 111 66 126 62" fill="none" stroke="#E3E9FA" stroke-width="4" stroke-linecap="round"/>
   </g>
   

   one tall blueberry pour, calm and very pastel.

3. 3

   Invite the buddies

   Now add the straw first, then cap the glass with a cream foam oval so the straw feels tucked into the drink. The swirl, shine, bubbles, and two blueberry buddies turn the flat glass into a little scene without making the shapes complicated.

   index.html

   copy code

   <g class="bm-straw" fill="none" stroke-linecap="round">
     <path d="M115 31 C119 55 122 82 124 112" stroke="#2B3A55" stroke-width="10"/>
     <path d="M115 31 C119 55 122 82 124 112" stroke="#FFFDF7" stroke-width="6"/>
     <path d="M113 47 l8 -2" stroke="#FF6B5E" stroke-width="5"/>
     <path d="M116 68 l8 -2" stroke="#FF6B5E" stroke-width="5"/>
     <path d="M118 91 l8 -2" stroke="#FF6B5E" stroke-width="5"/>
   </g>
   <ellipse class="bm-foam" cx="100" cy="62" rx="27" ry="9" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3"/>
   <path class="bm-swirl" d="M83 96 C92 88 102 107 112 98 C118 93 119 86 114 82" fill="none" stroke="#AAB9E8" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.78"/>
   <path class="bm-shine bm-shine1" d="M79 72 C76 92 76 119 80 139" fill="none" stroke="#E3E9FA" stroke-width="4" stroke-linecap="round" opacity="0.72"/>
   <path class="bm-shine bm-shine2" d="M118 70 C123 90 122 117 119 136" fill="none" stroke="#FFFDF7" stroke-width="3" stroke-linecap="round" opacity="0.58"/>
   <g class="bm-bubbles" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2">
     <circle class="bm-bubble bm-bubble1" cx="94" cy="129" r="3" opacity="0.64"/>
     <circle class="bm-bubble bm-bubble2" cx="112" cy="117" r="2.5" opacity="0.58"/>
     <circle class="bm-bubble bm-bubble3" cx="101" cy="143" r="2" opacity="0.52"/>
   </g>
   <g class="bm-buddy bm-buddy-left" transform="rotate(-8 57 139)">
     <g class="bm-buddy-left-bounce">
       <circle cx="57" cy="141" r="14" fill="#7187D6" stroke="#2B3A55" stroke-width="3"/>
       <path d="M48 133 C47 126 53 123 57 130 C61 123 68 126 66 133" fill="#8FBF7F" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
       <path d="M67 143 C72 141 73 136 69 133" fill="none" stroke="#5B6FC4" stroke-width="3" stroke-linecap="round"/>
       <circle class="bm-eye bm-eye-left-a" cx="52" cy="141" r="1.8" fill="#2B3A55" stroke="none"/>
       <circle class="bm-eye bm-eye-left-b" cx="61" cy="140" r="1.8" fill="#2B3A55" stroke="none"/>
       <path d="M54 147 Q57 150 61 146" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>
       <circle cx="47" cy="146" r="2.2" fill="#FF8FA3" stroke="none" opacity="0.72"/>
     </g>
   </g>
   <g class="bm-buddy bm-buddy-right">
     <circle cx="147" cy="148" r="12" fill="#7187D6" stroke="#2B3A55" stroke-width="3"/>
     <path d="M139 141 C138 135 143 132 147 138 C151 132 156 135 155 141" fill="#8FBF7F" stroke="#2B3A55" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
     <path d="M154 151 C158 149 159 145 156 142" fill="none" stroke="#5B6FC4" stroke-width="2.6" stroke-linecap="round"/>
     <circle class="bm-eye bm-eye-right-a" cx="143" cy="148" r="1.7" fill="#2B3A55" stroke="none"/>
     <circle class="bm-eye bm-eye-right-b" cx="151" cy="148" r="1.7" fill="#2B3A55" stroke="none"/>
     <path d="M144 153 Q147 155 150 153" fill="none" stroke="#2B3A55" stroke-width="1.9" stroke-linecap="round"/>
     <circle cx="154" cy="153" r="2" fill="#FF8FA3" stroke="none" opacity="0.7"/>
   </g>
   <circle class="bm-spark bm-dot3" cx="38" cy="156" r="2.5" fill="#FFD84D" stroke="none"/>
   <circle class="bm-spark bm-dot4" cx="162" cy="81" r="2" fill="#C9D4F2" stroke="#2B3A55" stroke-width="1.6"/>
   

   the drink has tiny friends now, as all good drinks should.

4. 4

   Make it creamy

   Keep the motion slow and small: the swirl drifts, bubbles rise with invisible loop resets, the berries blink, and the leaning buddy bounces by just a couple of pixels. Everything sits inside @media (prefers-reduced-motion: no-preference), so reduced-motion users get the finished sticker without the loops.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .bm .bm-swirl { transform-box: fill-box; transform-origin: center; animation: bm-swirl-drift 4.6s ease-in-out infinite; }
     .bm .bm-bubble { transform-box: fill-box; transform-origin: center; animation: bm-bubble-rise 3.8s ease-in-out infinite; }
     .bm .bm-bubble2 { animation-delay: -1.1s; }
     .bm .bm-bubble3 { animation-delay: -2.1s; }
     .bm .bm-eye { transform-box: fill-box; transform-origin: center; animation: bm-blink 4.8s steps(1, end) infinite; }
     .bm .bm-eye-right-a, .bm .bm-eye-right-b { animation-delay: 1.6s; }
     .bm .bm-buddy-left-bounce { transform-box: fill-box; transform-origin: center; animation: bm-buddy-bounce 5.2s ease-in-out 0.7s infinite; }
     .bm .bm-straw { transform-box: fill-box; transform-origin: center; animation: bm-straw-bob 4.2s ease-in-out infinite; }
     .bm .bm-spark, .bm .bm-fleck { transform-box: fill-box; transform-origin: center; }
     .bm .bm-spark1 { animation: bm-twinkle 2.8s ease-in-out infinite; }
     .bm .bm-spark2 { animation: bm-twinkle 2.8s ease-in-out 0.5s infinite; }
     .bm .bm-spark3 { animation: bm-twinkle 3.2s ease-in-out 1s infinite; }
     .bm .bm-dot1 { animation: bm-twinkle 3.1s ease-in-out 1.4s infinite; }
     .bm .bm-dot2 { animation: bm-twinkle 3.1s ease-in-out 1.9s infinite; }
     .bm .bm-dot3 { animation: bm-twinkle 3.1s ease-in-out 2.2s infinite; }
     .bm .bm-dot4 { animation: bm-twinkle 3.5s ease-in-out 0.8s infinite; }
     .bm .bm-fleck1 { animation: bm-fleck-glow 3.6s ease-in-out 0.3s infinite; }
     .bm .bm-fleck2 { animation: bm-fleck-glow 3.6s ease-in-out 1.5s infinite; }
   }
   @keyframes bm-swirl-drift { 0%, 100% { opacity: 0.64; transform: translateX(0) rotate(0deg); } 50% { opacity: 0.92; transform: translateX(2px) rotate(2deg); } }
   @keyframes bm-bubble-rise { 0% { opacity: 0; transform: translateY(8px) scale(0.82); } 18% { opacity: 0.78; } 70% { opacity: 0.64; } 100% { opacity: 0; transform: translateY(-18px) scale(1.08); } }
   @keyframes bm-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.12); } }
   @keyframes bm-buddy-bounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-2px); } }
   @keyframes bm-straw-bob { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(1.2deg) translateY(-1px); } }
   @keyframes bm-twinkle { 0%, 100% { opacity: 0.34; transform: scale(0.82); } 45% { opacity: 1; transform: scale(1.12); } }
   @keyframes bm-fleck-glow { 0%, 100% { opacity: 0.48; transform: scale(1); } 45% { opacity: 0.92; transform: scale(1.08); } }
   

   soft swirl, sleepy bubbles, berries blinking on their own schedule.

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

<svg class="bm" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A calm animated blueberry milk sticker with a drifting swirl, rising bubbles, blinking berry buddies, and twinkling sparkles">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <ellipse class="bm-shadow" cx="101" cy="160" rx="58" ry="12" fill="#2B3A55" opacity="0.14" stroke="none"/>
  <path class="bm-spark bm-spark1" d="M31 51 L35 59 L31 67 L27 59 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
  <path class="bm-spark bm-spark2" d="M165 50 L169 57 L165 64 L161 57 Z" fill="#FF8FA3" stroke="none"/>
  <path class="bm-spark bm-spark3" d="M34 134 L37 140 L34 146 L31 140 Z" fill="#FFD84D" stroke="none" opacity="0.9"/>
  <circle class="bm-spark bm-dot1" cx="151" cy="33" r="3" fill="#FFD84D" stroke="none"/>
  <circle class="bm-spark bm-dot2" cx="171" cy="133" r="2.5" fill="#FF6B5E" stroke="none"/>
  <path class="bm-fleck bm-fleck1" d="M43 78 l8 -3" fill="none" stroke="#AAB9E8" stroke-width="3" stroke-linecap="round"/>
  <path class="bm-fleck bm-fleck2" d="M158 151 l8 4" fill="none" stroke="#2B3A55" stroke-width="2.5" stroke-linecap="round" opacity="0.65"/>
  <g class="bm-drink">
    <path class="bm-milk-body" d="M66 49 H134 L127 153 H73 Z" fill="#C9D4F2" stroke="#2B3A55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="bm-milk-line" d="M74 62 C88 66 111 66 126 62" fill="none" stroke="#E3E9FA" stroke-width="4" stroke-linecap="round"/>
    <g class="bm-straw" fill="none" stroke-linecap="round">
      <path d="M115 31 C119 55 122 82 124 112" stroke="#2B3A55" stroke-width="10"/>
      <path d="M115 31 C119 55 122 82 124 112" stroke="#FFFDF7" stroke-width="6"/>
      <path d="M113 47 l8 -2" stroke="#FF6B5E" stroke-width="5"/>
      <path d="M116 68 l8 -2" stroke="#FF6B5E" stroke-width="5"/>
      <path d="M118 91 l8 -2" stroke="#FF6B5E" stroke-width="5"/>
    </g>
    <ellipse class="bm-foam" cx="100" cy="62" rx="27" ry="9" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3"/>
    <path class="bm-swirl" d="M83 96 C92 88 102 107 112 98 C118 93 119 86 114 82" fill="none" stroke="#AAB9E8" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.78"/>
    <path class="bm-shine bm-shine1" d="M79 72 C76 92 76 119 80 139" fill="none" stroke="#E3E9FA" stroke-width="4" stroke-linecap="round" opacity="0.72"/>
    <path class="bm-shine bm-shine2" d="M118 70 C123 90 122 117 119 136" fill="none" stroke="#FFFDF7" stroke-width="3" stroke-linecap="round" opacity="0.58"/>
    <g class="bm-bubbles" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2">
      <circle class="bm-bubble bm-bubble1" cx="94" cy="129" r="3" opacity="0.64"/>
      <circle class="bm-bubble bm-bubble2" cx="112" cy="117" r="2.5" opacity="0.58"/>
      <circle class="bm-bubble bm-bubble3" cx="101" cy="143" r="2" opacity="0.52"/>
    </g>
    <g class="bm-buddy bm-buddy-left" transform="rotate(-8 57 139)">
      <g class="bm-buddy-left-bounce">
        <circle cx="57" cy="141" r="14" fill="#7187D6" stroke="#2B3A55" stroke-width="3"/>
        <path d="M48 133 C47 126 53 123 57 130 C61 123 68 126 66 133" fill="#8FBF7F" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M67 143 C72 141 73 136 69 133" fill="none" stroke="#5B6FC4" stroke-width="3" stroke-linecap="round"/>
        <circle class="bm-eye bm-eye-left-a" cx="52" cy="141" r="1.8" fill="#2B3A55" stroke="none"/>
        <circle class="bm-eye bm-eye-left-b" cx="61" cy="140" r="1.8" fill="#2B3A55" stroke="none"/>
        <path d="M54 147 Q57 150 61 146" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>
        <circle cx="47" cy="146" r="2.2" fill="#FF8FA3" stroke="none" opacity="0.72"/>
      </g>
    </g>
    <g class="bm-buddy bm-buddy-right">
      <circle cx="147" cy="148" r="12" fill="#7187D6" stroke="#2B3A55" stroke-width="3"/>
      <path d="M139 141 C138 135 143 132 147 138 C151 132 156 135 155 141" fill="#8FBF7F" stroke="#2B3A55" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M154 151 C158 149 159 145 156 142" fill="none" stroke="#5B6FC4" stroke-width="2.6" stroke-linecap="round"/>
      <circle class="bm-eye bm-eye-right-a" cx="143" cy="148" r="1.7" fill="#2B3A55" stroke="none"/>
      <circle class="bm-eye bm-eye-right-b" cx="151" cy="148" r="1.7" fill="#2B3A55" stroke="none"/>
      <path d="M144 153 Q147 155 150 153" fill="none" stroke="#2B3A55" stroke-width="1.9" stroke-linecap="round"/>
      <circle cx="154" cy="153" r="2" fill="#FF8FA3" stroke="none" opacity="0.7"/>
    </g>
    <circle class="bm-spark bm-dot3" cx="38" cy="156" r="2.5" fill="#FFD84D" stroke="none"/>
    <circle class="bm-spark bm-dot4" cx="162" cy="81" r="2" fill="#C9D4F2" stroke="#2B3A55" stroke-width="1.6"/>
  </g>
</svg>

• Strawberry milkeasy

  Swap the milk to pale pink, keep the cream highlights, and turn the buddies into tiny strawberries.

• Extra foameasy

  Add three small cream circles along the top ellipse and give them the same gentle twinkle timing as the sparkles.

• Iced café glassmedium

  Draw two rounded ice cubes inside the milk and animate them with tiny staggered translateY loops.

• Berry parademedium

  Add a third smaller blueberry behind the glass and delay its blink so the trio feels naturally unsynchronized.