Food DoodlesBeginnerSVG + CSS

Fibermaxxing

A cozy fiber-bowl mascot made of warm oats, chia seeds, and berry friends. It holds a tiny spoon and gently steams while the berries bounce and the seeds twinkle — the cutest way to celebrate hitting your fiber goal.

← you, in 25 minutes.

what you'll build

Here's the plan

A cozy fiber-bowl mascot drawn in SVG: a cream oatmeal bowl with a sleepy face, three berry friends, twinkling chia seeds, a tiny spoon, and gentle steam. The bowl bobs, berries bounce, and steam rises in a calm morning loop.

You’ll learn

Building a food character from a bowl shape, face, and small props
Layering berries and seeds so the bowl feels full without looking crowded
Animating steam with opacity and translateY for a soft rise effect
Keeping a wellness doodle cute rather than clinical with rounded shapes and warm colors

Skill level: Beginner
Time: ~25 min
Tools: Just a browser
Code type: SVG + CSS
Lines: ~108

the steps

Build it, one change at a time

Set the breakfast table

Start with the warm paper square and one soft shadow under where the bowl will sit. This grounds the mascot before it appears.

<svg class="fm" 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="174" rx="58" ry="8" fill="#2B3A55" opacity="0.12"/>
</svg>

just the table, waiting for breakfast.

Build the bowl

Draw the bowl as a rounded U-shape with a flat oatmeal surface on top. The cream bowl and warm oat fill read as oatmeal before any toppings arrive.

<g class="fm-bowl" stroke-linecap="round" stroke-linejoin="round">
  <path d="M56 88 C56 88 52 138 100 138 C148 138 144 88 144 88" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
  <path d="M56 88 H144" fill="none" stroke="#2B3A55" stroke-width="3.5"/>
  <ellipse cx="100" cy="88" rx="44" ry="12" fill="#F5E6C8" stroke="#2B3A55" stroke-width="2.4"/>
</g>

a bowl of warm oats, no toppings yet.

Add face, berries, and seeds

Give the bowl a simple face on the oatmeal surface, then add three berry buddies and tiny chia seeds. Keep the berries evenly spaced so the bowl feels balanced.

<!-- face -->
<circle cx="88" cy="96" r="4" fill="#2B3A55"/>
<circle cx="112" cy="96" r="4" fill="#2B3A55"/>
<circle cx="89" cy="95" r="1.4" fill="#FFFDF7"/>
<circle cx="113" cy="95" r="1.4" fill="#FFFDF7"/>
<path d="M96 104 Q100 107 104 104" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>

<!-- berries -->
<g class="fm-berries">
  <circle cx="72" cy="86" r="7" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.2"/>
  <circle cx="128" cy="86" r="7" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.2"/>
  <circle cx="100" cy="80" r="6" fill="#5ECBB4" stroke="#2B3A55" stroke-width="2.2"/>
</g>

<!-- chia seeds -->
<g class="fm-seeds" fill="#2B3A55" opacity="0.35">
  <circle cx="80" cy="78" r="1.8"/>
  <circle cx="120" cy="78" r="1.8"/>
  <circle cx="84" cy="106" r="1.6"/>
  <circle cx="116" cy="106" r="1.6"/>
</g>

now it has a face, berries, and little seeds.

Add spoon, steam, and motion

The final pass adds a tiny spoon resting on the bowl, two wispy steam paths, and four calm animations: bowl bob, berry bounce, seed twinkle, and steam rise. All wrapped in prefers-reduced-motion.

/* spoon in the SVG */
<g class="fm-spoon" stroke-linecap="round" stroke-linejoin="round">
  <path d="M146 120 L160 96" fill="none" stroke="#2B3A55" stroke-width="3"/>
  <ellipse cx="162" cy="94" rx="7" ry="5" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4" transform="rotate(-30 162 94)"/>
</g>

/* steam in the SVG */
<path class="fm-steam" d="M92 70 Q96 62 92 54" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
<path class="fm-steam" d="M108 70 Q104 62 108 54" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" opacity="0.35"/>

/* animation */
@media (prefers-reduced-motion: no-preference) {
  .fm .fm-bowl { transform-box: fill-box; transform-origin: center bottom; animation: fm-bob 3s ease-in-out infinite; }
  .fm .fm-berries { transform-box: fill-box; transform-origin: center; animation: fm-berries 2.4s ease-in-out infinite; }
  .fm .fm-seeds { animation: fm-twinkle 2.8s ease-in-out infinite; }
  .fm .fm-steam { animation: fm-steam 3.2s ease-out infinite; }
}
@keyframes fm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes fm-berries { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fm-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } }
@keyframes fm-steam { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 0.35; } 100% { opacity: 0; transform: translateY(-12px); } }

a fiber bowl that steams, bobs, and twinkles.

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="fm" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A fiber bowl mascot gently steaming with bouncing berries and twinkling chia seeds">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <ellipse cx="100" cy="174" rx="58" ry="8" fill="#2B3A55" opacity="0.12"/>
  <g class="fm-bowl" stroke-linecap="round" stroke-linejoin="round">
    <path d="M56 88 C56 88 52 138 100 138 C148 138 144 88 144 88" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
    <path d="M56 88 H144" fill="none" stroke="#2B3A55" stroke-width="3.5"/>
    <ellipse cx="100" cy="88" rx="44" ry="12" fill="#F5E6C8" stroke="#2B3A55" stroke-width="2.4"/>
    <circle cx="88" cy="96" r="4" fill="#2B3A55"/>
    <circle cx="112" cy="96" r="4" fill="#2B3A55"/>
    <circle cx="89" cy="95" r="1.4" fill="#FFFDF7"/>
    <circle cx="113" cy="95" r="1.4" fill="#FFFDF7"/>
    <path d="M96 104 Q100 107 104 104" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>
  </g>
  <g class="fm-berries">
    <circle cx="72" cy="86" r="7" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.2"/>
    <circle cx="128" cy="86" r="7" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.2"/>
    <circle cx="100" cy="80" r="6" fill="#5ECBB4" stroke="#2B3A55" stroke-width="2.2"/>
  </g>
  <g class="fm-seeds" fill="#2B3A55" opacity="0.35">
    <circle cx="80" cy="78" r="1.8"/>
    <circle cx="120" cy="78" r="1.8"/>
    <circle cx="84" cy="106" r="1.6"/>
    <circle cx="116" cy="106" r="1.6"/>
  </g>
  <g class="fm-spoon" stroke-linecap="round" stroke-linejoin="round">
    <path d="M146 120 L160 96" fill="none" stroke="#2B3A55" stroke-width="3"/>
    <ellipse cx="162" cy="94" rx="7" ry="5" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4" transform="rotate(-30 162 94)"/>
  </g>
  <path class="fm-steam" d="M92 70 Q96 62 92 54" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
  <path class="fm-steam" d="M108 70 Q104 62 108 54" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
</svg>

Open in Playground

tips & gotchas

Mistakes we actually made

I draw the bowl rim as one straight line across the top so the oatmeal surface reads as flat and full.

The berries are grouped separately from the bowl so they can bounce without following the bowl's bob.

I keep the chia seeds at low opacity so they add texture without distracting from the face and berries.

The steam animation starts at opacity 0 and fades out as it rises, which feels softer than a looping opacity pulse.

make it yours

Remix it

Swap the toppingseasy
Replace the berries with banana slices, kiwi, or tiny nuts while keeping the same bounce loop.
Add a bowl patterneasy
Draw small dots or stripes on the outside of the cream bowl to give it a handmade ceramic look.
Make a fiber jarmedium
Change the bowl to a mason jar shape and layer the oats and berries as visible parfait layers.

challenge extension

Add a tiny progress ring above the bowl that fills up over six seconds like a fiber-goal meter, using stroke-dasharray and stroke-dashoffset.

Tape it to our fridge

keep sketching

Pick another small recipe and borrow one technique for your next doodle.