Reusable Water Bottle

A friendly reusable water bottle character drawn in SVG: mint body, navy cap, cream label panel, sleepy face, a bouncing sky-blue droplet sidekick, and a sunshine refill badge. Everything bobs on its own calm loop.

You’ll learn

• Layering a bottle shape from rounded rectangles so it reads as a reusable tumbler
• Adding a tiny face and props without cluttering the main silhouette
• Using transform-box and transform-origin to keep a bottle, droplet, and badge bobbing independently
• Timing multiple small loops so the doodle feels alive but not chaotic

1. 1

   Set the paper stage

   Start with the warm paper square and one soft navy shadow. The shadow grounds the bottle before it arrives, so the final doodle does not float in space.

   index.html

   copy code

   <svg class="wb" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Warm paper stage with a soft shadow">
     <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
     <ellipse cx="100" cy="172" rx="44" ry="7" fill="#2B3A55" opacity="0.12"/>
   </svg>
   

   just the stage and a little shadow.

2. 2

   Build the bottle body

   Stack three rounded rectangles: the mint bottle, the navy cap band, and a smaller mint sip-lip on top. Add a cream label panel so the bottle has a place for a face later.

   index.html

   copy code

   <g class="wb-bottle" stroke-linecap="round" stroke-linejoin="round">
     <rect x="70" y="60" width="60" height="100" rx="20" fill="#5ECBB4" stroke="#2B3A55" stroke-width="3.5"/>
     <rect x="75" y="42" width="50" height="22" rx="6" fill="#2B3A55" stroke="#2B3A55" stroke-width="2"/>
     <rect x="80" y="36" width="40" height="12" rx="4" fill="#5ECBB4" stroke="#2B3A55" stroke-width="2.4"/>
     <rect x="78" y="74" width="44" height="58" rx="12" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
   </g>
   

   a mint bottle with a navy cap and cream label.

3. 3

   Add the face and props

   Give the bottle two dot eyes, tiny shines, a small smile, and a subtle measurement line on the label. Add a sky-blue droplet sidekick and a sunshine refill badge so the scene tells a tiny story.

   index.html

   copy code

   <!-- face on the label -->
   <circle cx="92" cy="98" r="4.5" fill="#2B3A55"/>
   <circle cx="108" cy="98" r="4.5" fill="#2B3A55"/>
   <circle cx="93" cy="96.5" r="1.6" fill="#FFFDF7"/>
   <circle cx="109" cy="96.5" r="1.6" fill="#FFFDF7"/>
   <path d="M96 108 Q100 111 104 108" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>
   <path d="M86 88 Q100 82 114 88" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
   
   <!-- droplet sidekick -->
   <g class="wb-droplet" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4" stroke-linejoin="round">
     <path d="M144 58 C144 48 150 42 152 36 C154 42 160 48 160 58 C160 66 154 72 152 72 C150 72 144 66 144 58 Z"/>
     <circle cx="149" cy="56" r="2.2" fill="#FFFDF7" stroke="none"/>
   </g>
   
   <!-- refill badge -->
   <g class="wb-badge" fill="#FFD84D" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
     <circle cx="48" cy="56" r="14"/>
     <path d="M43 56 L47 60 L53 52" fill="none" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round"/>
   </g>
   

   now it has a face, a droplet friend, and a sunshine badge.

4. 4

   Make it bob and sparkle

   Three independent animations keep the doodle calm: the bottle bobs gently from its base, the droplet bounces a little higher, and the badge pulses. Everything is wrapped in prefers-reduced-motion so the still frame is the default for anyone who needs it.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .wb .wb-bottle { transform-box: fill-box; transform-origin: center bottom; animation: wb-bob 3s ease-in-out infinite; }
     .wb .wb-droplet { transform-box: fill-box; transform-origin: center bottom; animation: wb-drop 2.4s ease-in-out infinite; }
     .wb .wb-badge { transform-box: fill-box; transform-origin: center; animation: wb-pop 2.8s ease-in-out infinite; }
   }
   @keyframes wb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
   @keyframes wb-drop { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-5px) scaleY(1.05); } }
   @keyframes wb-pop { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }
   

   a bottle that bobs, a droplet that bounces, a badge that sparkles.

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

<svg class="wb" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A friendly reusable water bottle bobbing gently with a bouncing droplet and sparkling refill badge">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <ellipse cx="100" cy="172" rx="44" ry="7" fill="#2B3A55" opacity="0.12"/>
  <g class="wb-bottle" stroke-linecap="round" stroke-linejoin="round">
    <rect x="70" y="60" width="60" height="100" rx="20" fill="#5ECBB4" stroke="#2B3A55" stroke-width="3.5"/>
    <rect x="75" y="42" width="50" height="22" rx="6" fill="#2B3A55" stroke="#2B3A55" stroke-width="2"/>
    <rect x="80" y="36" width="40" height="12" rx="4" fill="#5ECBB4" stroke="#2B3A55" stroke-width="2.4"/>
    <rect x="78" y="74" width="44" height="58" rx="12" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
    <circle cx="92" cy="98" r="4.5" fill="#2B3A55"/>
    <circle cx="108" cy="98" r="4.5" fill="#2B3A55"/>
    <circle cx="93" cy="96.5" r="1.6" fill="#FFFDF7"/>
    <circle cx="109" cy="96.5" r="1.6" fill="#FFFDF7"/>
    <path d="M96 108 Q100 111 104 108" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>
    <path d="M86 88 Q100 82 114 88" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
  </g>
  <g class="wb-droplet" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4" stroke-linejoin="round">
    <path d="M144 58 C144 48 150 42 152 36 C154 42 160 48 160 58 C160 66 154 72 152 72 C150 72 144 66 144 58 Z"/>
    <circle cx="149" cy="56" r="2.2" fill="#FFFDF7" stroke="none"/>
  </g>
  <g class="wb-badge" fill="#FFD84D" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
    <circle cx="48" cy="56" r="14"/>
    <path d="M43 56 L47 60 L53 52" fill="none" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round"/>
  </g>
</svg>

• Change the body coloreasy

  Swap the mint bottle fill for coral or sky to match a different theme or brand accent.

• Add a straweasy

  Draw a striped straw poking out of the cap and make it sway on the same loop as the bottle bob.

• Make a hydration rowmedium

  Duplicate the bottle at smaller sizes and stagger the bob loops so they look like a little reusable-bottle family.