Strawberry Cake Slice

A cute triangular slice of strawberry shortcake on a small plate — cream sponge, pink strawberry layers, fluffy white frosting, a tiny strawberry on top, and a happy little face. All in one self-contained SVG.

You’ll learn

• Layer an SVG scene from back (plate) to front (cake, frosting, strawberry, face)
• Use simple quadratic Bézier curves for soft cake layers and fluffy frosting
• Add tiny details (seeds, calyx, mint leaf) that sell the subject
• Animate a sparkle and a gentle bob with CSS keyframes

1. 1

   Plate and cake base

   Start with a small cream plate and a simple triangular cake shape with rounded bottom corners. The whole dessert will sit on this base, so keep the triangle centered and balanced.

   index.html

   copy code

   <!-- small plate -->
   <ellipse cx="115" cy="184" rx="88" ry="17" fill="#FFFDF7" stroke="#2B3A55" stroke-width="4"/>
   <ellipse cx="115" cy="184" rx="62" ry="10" fill="none" stroke="#2B3A55" stroke-width="2" opacity="0.15"/>
   
   <!-- cake base -->
   <path d="M72 176 L115 56 L158 176 Q145 182 115 182 Q85 182 72 176 Z" fill="#FFF8E7" stroke="#2B3A55" stroke-width="5" stroke-linejoin="round"/>
   

   a plate and a plain cake slice — the blank canvas for frosting.

2. 2

   Layer frosting and strawberry bands

   Add two soft pink strawberry layers sandwiched between white cream bands, then top with fluffy white frosting. The curves follow the top edge of the cake so every layer reads as part of the slice.

   index.html

   copy code

   <!-- strawberry layers -->
   <path d="M78 150 Q115 156 152 150 L156 130 Q115 136 74 130 Z" fill="#FFA6B5" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
   <path d="M85 104 Q115 109 145 104 L149 84 Q115 89 81 84 Z" fill="#FFA6B5" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
   
   <!-- cream layers -->
   <path d="M75 132 Q115 138 155 132 L152 150 Q115 156 78 150 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" stroke-linejoin="round" opacity="0.9"/>
   <path d="M82 86 Q115 91 148 86 L145 104 Q115 109 85 104 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" stroke-linejoin="round" opacity="0.9"/>
   
   <!-- fluffy frosting top -->
   <path d="M74 84 Q85 70 96 80 Q107 66 115 78 Q123 66 134 80 Q145 70 156 84 L149 84 Q115 89 81 84 Z" fill="#FFFFFF" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
   

   the slice now has pink strawberry bands and fluffy white frosting.

3. 3

   Add the top strawberry, mint leaf, and face

   Crown the cake with a tiny strawberry (seed dots and a little calyx included), add a mint leaf, and give the front a happy face. These small marks turn a dessert into a character.

   index.html

   copy code

   <!-- tiny strawberry on top -->
   <g class="top-berry">
     <path d="M107 62 C107 44 123 44 123 62 C123 76 115 84 115 84 C115 84 107 76 107 62 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
     <circle cx="112" cy="58" r="1.4" fill="#FFE5A0" stroke="none"/>
     <circle cx="118" cy="62" r="1.4" fill="#FFE5A0" stroke="none"/>
     <circle cx="113" cy="68" r="1.4" fill="#FFE5A0" stroke="none"/>
     <path d="M112 48 L115 44 L118 48 L122 46 L118 50 L122 54 L115 52 L108 54 L112 50 L108 46 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
   </g>
   
   <!-- mint leaf -->
   <path d="M128 74 Q142 62 148 78 Q140 86 128 82 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="3" stroke-linejoin="round"/>
   <path d="M128 78 Q138 72 144 78" fill="none" stroke="#2B3A55" stroke-width="1.5" opacity="0.4"/>
   
   <!-- tiny happy face -->
   <g class="face">
     <circle cx="100" cy="124" r="2.6" fill="#2B3A55" stroke="none"/>
     <circle cx="130" cy="124" r="2.6" fill="#2B3A55" stroke="none"/>
     <path d="M108 132 Q115 138 122 132" fill="none" stroke="#2B3A55" stroke-width="2.5" stroke-linecap="round"/>
   </g>
   

   a strawberry, a mint leaf, and a little smile — the cake has personality now.

4. 4

   Sparkle and happy bob

   Add two tiny yellow sparkles on the strawberry, then animate them with a gentle pulse. The top berry and face also bob up and down together, keeping the motion small and sweet.

   style.css

   copy code

   /* sparkle accents on the strawberry */
   <g class="sparkle" fill="#FFD84D" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
     <path d="M102 52 L104 46 L106 52 L112 54 L106 56 L104 62 L102 56 L96 54 Z"/>
     <path d="M126 48 L127 44 L128 48 L132 49 L128 50 L127 54 L126 50 L122 49 Z"/>
   </g>
   
   @media (prefers-reduced-motion: no-preference) {
     .strawberry-cake .top-berry,
     .strawberry-cake .face {
       transform-origin: 115px 120px;
       animation: happy-bob 2.6s ease-in-out infinite;
     }
     .strawberry-cake .sparkle {
       transform-origin: 115px 54px;
       animation: sparkle-pulse 2.6s ease-in-out infinite;
     }
   }
   @keyframes happy-bob {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-2px); }
   }
   @keyframes sparkle-pulse {
     0%, 100% { transform: scale(1); opacity: 1; }
     50% { transform: scale(1.15); opacity: 0.85; }
   }
   

   the finished cake slice sparkles and bobs happily on its plate.

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

<svg class="strawberry-cake" viewBox="0 0 230 210" width="230" height="210" role="img" aria-label="Animated strawberry cake slice doodle">
  <!-- small plate -->
  <ellipse cx="115" cy="184" rx="88" ry="17" fill="#FFFDF7" stroke="#2B3A55" stroke-width="4"/>
  <ellipse cx="115" cy="184" rx="62" ry="10" fill="none" stroke="#2B3A55" stroke-width="2" opacity="0.15"/>
  
  <path d="M72 176 L115 56 L158 176 Q145 182 115 182 Q85 182 72 176 Z" fill="#FFF8E7" stroke="#2B3A55" stroke-width="5" stroke-linejoin="round"/>
  <!-- strawberry layers -->
  <path d="M78 150 Q115 156 152 150 L156 130 Q115 136 74 130 Z" fill="#FFA6B5" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
  <path d="M85 104 Q115 109 145 104 L149 84 Q115 89 81 84 Z" fill="#FFA6B5" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
  <!-- cream layers -->
  <path d="M75 132 Q115 138 155 132 L152 150 Q115 156 78 150 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" stroke-linejoin="round" opacity="0.9"/>
  <path d="M82 86 Q115 91 148 86 L145 104 Q115 109 85 104 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3" stroke-linejoin="round" opacity="0.9"/>
  <!-- frosting top -->
  <path d="M74 84 Q85 70 96 80 Q107 66 115 78 Q123 66 134 80 Q145 70 156 84 L149 84 Q115 89 81 84 Z" fill="#FFFFFF" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
  <!-- tiny strawberry on top -->
  <g class="top-berry">
    <path d="M107 62 C107 44 123 44 123 62 C123 76 115 84 115 84 C115 84 107 76 107 62 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="3.5" stroke-linejoin="round"/>
    <circle cx="112" cy="58" r="1.4" fill="#FFE5A0" stroke="none"/>
    <circle cx="118" cy="62" r="1.4" fill="#FFE5A0" stroke="none"/>
    <circle cx="113" cy="68" r="1.4" fill="#FFE5A0" stroke="none"/>
    <path d="M112 48 L115 44 L118 48 L122 46 L118 50 L122 54 L115 52 L108 54 L112 50 L108 46 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
  </g>
  <!-- sparkle accents on the strawberry -->
  <g class="sparkle" fill="#FFD84D" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
    <path d="M102 52 L104 46 L106 52 L112 54 L106 56 L104 62 L102 56 L96 54 Z"/>
    <path d="M126 48 L127 44 L128 48 L132 49 L128 50 L127 54 L126 50 L122 49 Z"/>
  </g>
  <!-- mint leaf -->
  <path d="M128 74 Q142 62 148 78 Q140 86 128 82 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="3" stroke-linejoin="round"/>
  <path d="M128 78 Q138 72 144 78" fill="none" stroke="#2B3A55" stroke-width="1.5" opacity="0.4"/>
  <!-- tiny happy face -->
  <g class="face">
    <circle cx="100" cy="124" r="2.6" fill="#2B3A55" stroke="none"/>
    <circle cx="130" cy="124" r="2.6" fill="#2B3A55" stroke="none"/>
    <path d="M108 132 Q115 138 122 132" fill="none" stroke="#2B3A55" stroke-width="2.5" stroke-linecap="round"/>
  </g>
</svg>

• New flavoreasy

  Swap the pink strawberry layers for chocolate brown or matcha green bands.

• Extra toppingseasy

  Add a second strawberry, a blueberry, or a tiny dollop of whipped cream.

• Bigger smilemedium

  Widen the face curve and add two small blush circles on the cake front.

• Candle glowmedium

  Add a tiny candle on top and animate a small flame with opacity and scale.