Blinking Cat

A round, blinking cat drawn with a handful of divs and the same border-radius trick from the onigiri — leveled up with mirrored ears and a two-arc mouth. Still just HTML and CSS.

You’ll learn

• Reusing one border-radius shape across ears, head, and nose by just changing the numbers
• Mirroring a shape with transform: scaleX(-1) instead of hand-tuning a second version
• Building a "w" mouth from two overlapping arcs — a trick that shows up in every doodle face
• Animating just one property (scaleY) to fake a blink without redrawing anything

1. 1

   Round the head

   One box, one border-radius, one soft head shape. The nine-value radius here isn't as extreme as the onigiri's — just enough asymmetry to feel hand-drawn instead of a perfect circle.

   style.css

   copy code

   <div class="cat">
     <div class="ear ear-left"></div>
     <div class="ear ear-right"></div>
     <div class="head">
       <div class="eye eye-left"></div>
       <div class="eye eye-right"></div>
       <div class="nose"></div>
       <div class="mouth mouth-left"></div>
       <div class="mouth mouth-right"></div>
     </div>
   </div>
   
   .cat { position: relative; width: 190px; height: 180px; }
   .head {
     position: absolute;
     inset: 24px 0 0 0;
     background: #FFFDF7;
     border: 6px solid #2B3A55;
     border-radius: 48% 48% 50% 50% / 55% 55% 45% 45%;
   }
   

   a soft round head. Off to a good start — if a little bald.

2. 2

   Add pointy ears

   A triangle-ish ear is just a square with one soft corner (border-radius: 12% 75% 8% 55%). Draw it once for the left ear, then flip it for the right one with scaleX(-1) instead of redrawing the whole shape.

   style.css

   copy code

   .ear {
     position: absolute;
     top: 4px;
     width: 52px;
     height: 52px;
     background: #FFFDF7;
     border: 6px solid #2B3A55;
     /* a triangle-ish ear is just a square with one soft corner */
     border-radius: 12% 75% 8% 55%;
   }
   .ear-left  { left: 16px;  transform: rotate(-8deg); }
   .ear-right { right: 16px; transform: rotate(8deg) scaleX(-1); }
   

   ears! Now it's unmistakably a cat (or a very alert bat).

3. 3

   Give it eyes and a nose

   Two dot eyes and a small rounded nose, positioned by percentage against the head — the same absolute-centering approach from the onigiri, just with two more dots.

   style.css

   copy code

   .eye {
     position: absolute;
     top: 44%;
     width: 16px;
     height: 16px;
     background: #2B3A55;
     border-radius: 50%;
   }
   .eye-left  { left: 24%; }
   .eye-right { right: 24%; }
   
   .nose {
     position: absolute;
     top: 56%;
     left: 50%;
     transform: translateX(-50%);
     width: 13px;
     height: 9px;
     background: #FFB3AD;
     border-radius: 50% 50% 60% 60%;
   }
   

   eyes and a little nose. It's staring right at you.

4. 4

   Draw the "w" mouth

   A cat mouth is two mismatched arcs, not one shape. Each is a bottom-only rounded border (border-top: none) so only the curve shows — overlap two of them and you get a convincing little "w".

   style.css

   copy code

   /* the "w" mouth: two little arcs */
   .mouth {
     position: absolute;
     top: 62%;
     width: 16px;
     height: 9px;
     border: 3.5px solid #2B3A55;
     border-top: none;
     border-radius: 0 0 16px 16px;
   }
   .mouth-left  { left: 41%; }
   .mouth-right { right: 41%; }
   

   a little cat smile — two mismatched arcs doing the work of one mouth.

5. 5

   Make it blink

   A blink is just scaleY squashing the eye flat for one keyframe out of a long, mostly-still cycle — no eyelid element, no extra markup, just motion.

   style.css

   copy code

   .eye {
     /* ...existing eye rules... */
     animation: cat-blink 3.6s ease-in-out infinite;
   }
   @keyframes cat-blink {
     0%, 88%, 100% { transform: scaleY(1); }
     93%           { transform: scaleY(0.08); }
   }
   

   the finished, occasionally-blinking cat.

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

<div class="cat">
  <div class="ear ear-left"></div>
  <div class="ear ear-right"></div>
  <div class="head">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
    <div class="nose"></div>
    <div class="mouth mouth-left"></div>
    <div class="mouth mouth-right"></div>
  </div>
</div>

• New coateasy

  Swap the background and border colors on .head for a tabby, black cat, or something stranger.

• Sleepy eyeseasy

  Slow the cat-blink duration to 6s for a much calmer cat.

• Winkmedium

  Give .eye-left its own keyframe so only one eye blinks.

• Whiskersmedium

  Three thin absolutely-positioned lines per cheek, angled outward.