Happy Onigiri

A smiling onigiri (rice ball) drawn with two divs, some pseudo-elements, and one very hardworking CSS property. No images, no SVG, no libraries — just HTML and CSS you can paste anywhere.

You’ll learn

• How border-radius can sculpt almost any soft shape (the four-corner and eight-value tricks)
• Positioning face parts with position: absolute + percentages, so the face scales with the body
• Making anything look alive with a 3-line keyframe animation

1. 1

   Lay out the ingredients

   Two divs: one for the rice, one for the nori (the seaweed wrap). The face will come later, from elements inside the rice. That's the whole HTML — CSS art is mostly CSS, who knew.

   index.html

   copy code

   <div class="onigiri">
     <div class="rice">
       <div class="eye eye-left"></div>
       <div class="eye eye-right"></div>
       <div class="mouth"></div>
       <div class="blush blush-left"></div>
       <div class="blush blush-right"></div>
     </div>
     <div class="nori"></div>
   </div>
   
   .onigiri {
     position: relative;   /* everything inside positions against this */
     width: 220px;
     height: 200px;
   }
   

   nothing visible yet — that's normal. Blank page, big plans.

2. 2

   Shape the rice

   Here's the star of the show. A plain box becomes a squishy triangle-ish rice ball with one property — border-radius in its fancy eight-value form. The four values before the / round the corners horizontally; the four after round them vertically. Big top values = soft dome. Small bottom values = gently flattened base, like it's sitting politely.

   style.css

   copy code

   .rice {
     position: absolute;
     inset: 0;
     background: #FFFDF7;
     border: 6px solid #2B3A55;
     border-radius: 50% 50% 46% 46% / 76% 76% 30% 30%;
   }
   

   a plump rounded triangle. It already looks edible.

3. 3

   Wrap the nori

   The nori is just a rounded rectangle hugging the bottom. We center it with the left: 50% + translateX(-50%) trick — the classic "center an absolute child" move you'll use in every doodle from now on.

   style.css

   copy code

   .nori {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 96px;
     height: 62px;
     background: #2B3A55;
     border-radius: 10px 10px 16px 16px;
   }
   

   it's officially an onigiri. A faceless, slightly unsettling onigiri.

4. 4

   Give it a face

   Faces are where doodles get a soul, and they're cheap: two dot eyes and a half-circle mouth. The half circle is another border-radius trick — round only the bottom two corners of a short wide box.

   style.css

   copy code

   .eye {
     position: absolute;
     top: 47%;
     width: 15px;
     height: 15px;
     background: #2B3A55;
     border-radius: 50%;
   }
   .eye-left  { left: 27%; }
   .eye-right { right: 27%; }
   
   .mouth {
     position: absolute;
     top: 54%;
     left: 50%;
     transform: translateX(-50%);
     width: 26px;
     height: 13px;
     background: #2B3A55;
     border-radius: 0 0 26px 26px;   /* only the bottom corners — instant smile */
   }
   

   it's smiling at you. You did that.

5. 5

   Blush and bob

   Blush marks are the cheapest charm in CSS art: two soft pink ellipses. And a three-line keyframe makes the whole onigiri bob like it's listening to music.

   style.css

   copy code

   .blush {
     position: absolute;
     top: 56%;
     width: 22px;
     height: 11px;
     background: #FFB3AD;
     border-radius: 50%;
   }
   .blush-left  { left: 13%; }
   .blush-right { right: 13%; }
   
   .onigiri {
     animation: bob 2.4s ease-in-out infinite;
   }
   @keyframes bob {
     0%, 100% { transform: translateY(0)    rotate(-1deg); }
     50%      { transform: translateY(-7px) rotate(1.5deg); }
   }
   

   the finished, bobbing, blushing onigiri.

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

<div class="onigiri">
  <div class="rice">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
    <div class="mouth"></div>
    <div class="blush blush-left"></div>
    <div class="blush blush-right"></div>
  </div>
  <div class="nori"></div>
</div>

• New paletteeasy

  Sesame-speckled rice? Pink sakura rice? It's two background values.

• Mood swingeasy

  Flip the mouth's border-radius to 26px 26px 0 0 for a deeply concerned onigiri.

• Blinkmedium

  Animate the eyes' height to 2px for 0.1s every few seconds.

• A friendmedium

  Duplicate, shrink, and tilt a second onigiri leaning on the first.