Animal DoodlesBeginnerSVG + CSS

Chonky Capybara

A soft chubby capybara sitting still like it has already solved every problem in the world. It wears a tiny orange on its head and gently bobs while a single sparkle twinkles nearby.

← you, in 25 minutes.

what you'll build

Here's the plan

A soft chubby capybara sitting on warm paper with a tiny orange balanced on its head, simple sleepy features, and one twinkling sparkle. It gently bobs and the orange wobbles in the same calm loop.

You’ll learn

Building a friendly animal sticker from layered SVG ellipses and paths
Using transform-box and transform-origin to keep SVG animations predictable
Timing one shared bob loop across the body and a small prop
Keeping the palette limited: warm paper, cream body, navy ink, one accent prop

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

the steps

Build it, one change at a time

Set the warm paper stage

Start with a rounded warm-paper square and one soft navy shadow oval. The shadow reads as ground before the capybara arrives, so the finished doodle feels like it is sitting instead of floating.

<svg class="cc" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A warm paper stage with a soft ground shadow">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <ellipse cx="100" cy="168" rx="56" ry="8" fill="#2B3A55" opacity="0.12"/>
</svg>

just the stage and a little shadow ground.

Shape the chubby body

One wide ellipse becomes the body, and two smaller rotated ellipses become ears. Keep the outline thick and the fill cream so it reads as a CoDoodle sticker right away.

<g class="cc-capy" stroke-linecap="round" stroke-linejoin="round">
  <ellipse cx="100" cy="120" rx="60" ry="44" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
  <ellipse cx="58" cy="92" rx="10" ry="15" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" transform="rotate(-18 58 92)"/>
  <ellipse cx="142" cy="92" rx="10" ry="15" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" transform="rotate(18 142 92)"/>
</g>

a very round capybara silhouette appears.

Add face, orange, and paws

Two dot eyes with tiny shines, a small nose, a gentle smile arc, coral blush circles, and two cream paws give the capybara personality. A tiny orange on the head adds the single sunny accent that makes the sticker memorable.

<circle cx="84" cy="112" r="5" fill="#2B3A55"/>
<circle cx="116" cy="112" r="5" fill="#2B3A55"/>
<circle cx="85" cy="110" r="1.8" fill="#FFFDF7"/>
<circle cx="117" cy="110" r="1.8" fill="#FFFDF7"/>
<ellipse cx="100" cy="124" rx="7" ry="5" fill="#2B3A55"/>
<path d="M94 130 Q100 134 106 130" fill="none" stroke="#2B3A55" stroke-width="2" stroke-linecap="round"/>
<ellipse cx="72" cy="124" rx="5" ry="3" fill="#FF8FA3" opacity="0.7"/>
<ellipse cx="128" cy="124" rx="5" ry="3" fill="#FF8FA3" opacity="0.7"/>
<g class="cc-orange" transform="translate(104, 66)">
  <circle cx="0" cy="0" r="10" fill="#FFD84D" stroke="#2B3A55" stroke-width="2.4"/>
  <path d="M-2 -6 Q2 -10 6 -4" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" opacity="0.6"/>
  <path d="M-4 4 Q0 8 4 4" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" opacity="0.6"/>
</g>
<ellipse cx="76" cy="158" rx="11" ry="7" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.8"/>
<ellipse cx="124" cy="158" rx="11" ry="7" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.8"/>

now it has a face, an orange, and calm little paws.

Make it bob and twinkle

The final pass ties the body bob and the orange wobble to one shared three-second loop, and adds a tiny four-pointed sparkle that twinkles on its own rhythm. All motion is wrapped in prefers-reduced-motion so the still frame is the default for anyone who needs it.

@media (prefers-reduced-motion: no-preference) {
  .cc .cc-capy { transform-box: fill-box; transform-origin: center bottom; animation: cc-bob 3.2s ease-in-out infinite; }
  .cc .cc-orange { transform-box: fill-box; transform-origin: center; animation: cc-wobble 3.2s ease-in-out infinite; }
  .cc .cc-sparkle { transform-box: fill-box; transform-origin: center; animation: cc-twinkle 2.6s ease-in-out infinite; }
}
@keyframes cc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes cc-wobble { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
@keyframes cc-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1.12); } }

a gentle bob, a tiny wobble, one calm sparkle.

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="cc" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A soft chubby capybara sitting peacefully with floating golden motes">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <ellipse cx="100" cy="172" rx="64" ry="9" fill="#2B3A55" opacity="0.1"/>
  <g class="cc-capy" stroke-linecap="round" stroke-linejoin="round">
    <!-- body -->
    <path d="M72 142 C66 120 68 88 84 72 C96 60 116 60 126 72 C138 86 140 114 134 138 C130 154 116 164 100 164 C86 164 76 156 72 142 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="3.2"/>
    <!-- ears -->
    <ellipse cx="82" cy="68" rx="8" ry="11" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.8" transform="rotate(-20 82 68)"/>
    <ellipse cx="118" cy="68" rx="8" ry="11" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.8" transform="rotate(20 118 68)"/>
    <ellipse cx="82" cy="68" rx="4" ry="6" fill="#C78D55" stroke="none" transform="rotate(-20 82 68)"/>
    <ellipse cx="118" cy="68" rx="4" ry="6" fill="#C78D55" stroke="none" transform="rotate(20 118 68)"/>
    <!-- closed eyes -->
    <path d="M86 94 Q92 98 98 94" fill="none" stroke="#2B3A55" stroke-width="2.4"/>
    <path d="M102 94 Q108 98 114 94" fill="none" stroke="#2B3A55" stroke-width="2.4"/>
    <!-- nose and mouth -->
    <ellipse cx="100" cy="104" rx="5" ry="4" fill="#2B3A55"/>
    <path d="M98 108 Q100 112 102 108" fill="none" stroke="#2B3A55" stroke-width="1.8"/>
    <path d="M100 108 L100 112" fill="none" stroke="#2B3A55" stroke-width="1.8"/>
    <!-- cheeks -->
    <ellipse cx="78" cy="106" rx="6" ry="4" fill="#FF8FA3" opacity="0.5"/>
    <ellipse cx="122" cy="106" rx="6" ry="4" fill="#FF8FA3" opacity="0.5"/>
    <!-- front paws -->
    <ellipse cx="84" cy="134" rx="10" ry="7" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.6"/>
    <ellipse cx="116" cy="134" rx="10" ry="7" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.6"/>
    <path d="M80 134 L80 138" fill="none" stroke="#2B3A55" stroke-width="1.6" opacity="0.6"/>
    <path d="M84 134 L84 138" fill="none" stroke="#2B3A55" stroke-width="1.6" opacity="0.6"/>
    <path d="M112 134 L112 138" fill="none" stroke="#2B3A55" stroke-width="1.6" opacity="0.6"/>
    <path d="M116 134 L116 138" fill="none" stroke="#2B3A55" stroke-width="1.6" opacity="0.6"/>
    <!-- feet -->
    <ellipse cx="74" cy="158" rx="14" ry="9" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.6"/>
    <ellipse cx="126" cy="158" rx="14" ry="9" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.6"/>
    <path d="M70 156 L70 160" fill="none" stroke="#2B3A55" stroke-width="1.6" opacity="0.6"/>
    <path d="M76 156 L76 160" fill="none" stroke="#2B3A55" stroke-width="1.6" opacity="0.6"/>
    <path d="M122 156 L122 160" fill="none" stroke="#2B3A55" stroke-width="1.6" opacity="0.6"/>
    <path d="M128 156 L128 160" fill="none" stroke="#2B3A55" stroke-width="1.6" opacity="0.6"/>
    <!-- soft fur texture -->
    <path d="M86 78 Q90 82 94 78" fill="none" stroke="#C78D55" stroke-width="1.4" opacity="0.4"/>
    <path d="M106 78 Q110 82 114 78" fill="none" stroke="#C78D55" stroke-width="1.4" opacity="0.4"/>
    <path d="M92 118 Q96 122 100 118" fill="none" stroke="#C78D55" stroke-width="1.4" opacity="0.35"/>
    <path d="M104 126 Q108 130 112 126" fill="none" stroke="#C78D55" stroke-width="1.4" opacity="0.35"/>
  </g>
  <!-- floating motes like the reference -->
  <circle class="cc-mote" cx="44" cy="56" r="2.2" fill="#E4B06A" opacity="0.55"/>
  <circle class="cc-mote" cx="164" cy="80" r="1.8" fill="#E4B06A" opacity="0.45"/>
  <circle class="cc-mote" cx="152" cy="148" r="2" fill="#E4B06A" opacity="0.5"/>
  <circle class="cc-mote" cx="36" cy="132" r="1.6" fill="#E4B06A" opacity="0.4"/>
</svg>

Open in Playground

tips & gotchas

Mistakes we actually made

I put transform-origin at the bottom center of the body group so the bob stays grounded instead of drifting sideways.

The orange sits inside the same group as the body, but it gets its own transform-origin at center so it can wobble independently.

I keep the sparkle outside the capybara group so it can twinkle without picking up the body’s translateY.

All shapes share the same 3.5px–2.4px stroke weight range so the doodle feels like one consistent sticker.

make it yours

Remix it

Swap the fruiteasy
Replace the orange with a tiny mint leaf, a strawberry, or a sunflower while keeping the same wobble loop.
Add a friendmedium
Duplicate the capybara at a smaller scale and offset the second bob loop so they bob on opposite beats.

challenge extension

Turn this into a tiny 'capybara spa' scene by adding a small hot-spring tub, two steam wisps rising in the background, and a second capybara bobbing on the opposite beat.

Tape it to our fridge

keep sketching

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