Accidental Baby Selfie

A tiny peachy hand holding an oversized cream phone with a light-blue screen. A screen-clipped, blurry half-face slides in from the side while the phone tilts gently and a camera flash anchored to the notch pops. It captures the accidental-selfie meme energy in one looping sticker.

You’ll learn

• Tilting a phone with a shared parent group and transform-origin
• Clipping a face to the screen rect so it reads as half-cut-off
• Adding a readable motion blur with a duplicated translucent shape and SVG filter
• Combining a tilt loop with a slide loop to sell the 'accidental' framing

1. 1

   Set the paper and sparkles

   Warm paper background and a few tiny prop sparkles. The camera flash will live on the phone itself, so the stage stays simple.

   index.html

   copy code

   <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
   <path class="as-spark as-spark1" d="M38 60 L41 68 L38 76 L35 68 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="1.8" stroke-linejoin="round"/>
   <circle class="as-spark as-dot1" cx="170" cy="110" r="2.4" fill="#FFD84D" stroke="none"/>
   <circle class="as-spark as-dot2" cx="46" cy="140" r="2" fill="#6FA8FF" stroke="none"/>
   

   a warm paper stage waiting for the phone.

2. 2

   Build the phone and hand

   Draw a tall rounded phone a little lower on the stage, then rotate the whole device a few degrees. Add a tiny peachy hand gripping the bottom-left corner — a palm, thumb, two fingers, and little knuckle highlights so it looks like it is really holding the weight.

   index.html

   copy code

   <g class="as-phone-group" stroke-linecap="round" stroke-linejoin="round" style="transform-origin: 106px 100px;">
     <g transform="rotate(-8 106 100)">
       <!-- phone body -->
       <rect class="as-phone" x="60" y="34" width="92" height="140" rx="16" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
       <!-- screen -->
       <rect class="as-screen" x="68" y="44" width="76" height="120" rx="10" fill="#E8F4F8" stroke="#2B3A55" stroke-width="2.8"/>
       <!-- camera notch + lens -->
       <rect class="as-notch" x="92" y="48" width="28" height="6" rx="3" fill="#2B3A55" stroke="none"/>
       <circle class="as-lens" cx="106" cy="41" r="2" fill="#6FA8FF" stroke="none"/>
       <!-- flash anchored to the notch -->
       <g class="as-flash" transform="translate(104, 42)">
         <path class="as-flash-star" d="M0 -12 L2.8 -2.8 L12 0 L2.8 2.8 L0 12 L-2.8 2.8 L-12 0 L-2.8 -2.8 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
         <circle class="as-flash-dot" cx="-18" cy="8" r="2.4" fill="#FFD84D" stroke="none"/>
       </g>
       <!-- on-screen shutter button -->
       <circle class="as-shutter" cx="106" cy="154" r="7" fill="#A8E6CF" stroke="#2B3A55" stroke-width="2.2"/>
       <!-- tiny hand gripping the corner -->
       <g class="as-hand" fill="#F5C6A5" stroke="#2B3A55" stroke-width="2.6" stroke-linejoin="round">
         <path class="as-palm" d="M58 176 Q62 166 76 168 Q84 172 82 182 Q74 188 60 186 Q54 184 58 176 Z"/>
         <ellipse class="as-thumb" cx="62" cy="168" rx="5.5" ry="7.5" transform="rotate(-25 62 168)"/>
         <ellipse class="as-finger1" cx="78" cy="178" rx="5" ry="7" transform="rotate(5 78 178)"/>
         <ellipse class="as-finger2" cx="86" cy="174" rx="4.5" ry="6.5" transform="rotate(15 86 174)"/>
         <circle class="as-knuckle1" cx="66" cy="170" r="1.8" fill="#FFFDF7" stroke="none"/>
         <circle class="as-knuckle2" cx="76" cy="174" r="1.6" fill="#FFFDF7" stroke="none"/>
       </g>
     </g>
   </g>
   

   a phone, a hand, no face yet.

3. 3

   Add the screen-clipped blurry half-face

   Define a clip path that matches the screen, then draw a soft face that extends past the left edge. Only one eye, the nose tip, and a tiny smile remain visible inside the screen. A translucent blurred duplicate behind the main face sells the accidental motion blur.

   index.html

   copy code

   <defs>
     <clipPath id="as-screen-clip"><rect x="68" y="44" width="76" height="120" rx="10"/></clipPath>
     <filter id="as-blur"><feGaussianBlur stdDeviation="0.6"/></filter>
   </defs>
   <!-- blurry duplicate -->
   <g class="as-face-blur" clip-path="url(#as-screen-clip)" filter="url(#as-blur)" opacity="0.32">
     <ellipse cx="78" cy="120" rx="30" ry="34" fill="#FFE8D6" stroke="#2B3A55" stroke-width="2.4"/>
     <path d="M40 80 C60 68 100 76 112 100 C118 114 114 132 108 138 C108 124 98 112 82 110 C66 108 54 116 48 128 C44 112 40 92 40 80 Z" fill="#8B6F47" stroke="#2B3A55" stroke-width="2.4"/>
   </g>
   <!-- main face -->
   <g class="as-face" clip-path="url(#as-screen-clip)">
     <!-- hair -->
     <path class="as-hair" d="M40 80 C60 68 100 76 112 100 C118 114 114 132 108 138 C108 124 98 112 82 110 C66 108 54 116 48 128 C44 112 40 92 40 80 Z" fill="#8B6F47" stroke="#2B3A55" stroke-width="2.4" opacity="0.9"/>
     <!-- face shape -->
     <ellipse class="as-face-shape" cx="78" cy="120" rx="30" ry="34" fill="#FFE8D6" stroke="#2B3A55" stroke-width="2.4"/>
     <!-- one visible eye -->
     <circle class="as-eye" cx="88" cy="116" r="4.5" fill="#2B3A55" stroke="none"/>
     <circle class="as-eye-shine" cx="89.5" cy="114.5" r="1.6" fill="#FFFDF7" stroke="none"/>
     <!-- nose and smile -->
     <path class="as-nose" d="M94 124 Q98 126 94 128" fill="none" stroke="#2B3A55" stroke-width="1.8" stroke-linecap="round"/>
     <path class="as-smile" d="M86 136 Q92 139 98 134" fill="none" stroke="#2B3A55" stroke-width="1.8" stroke-linecap="round"/>
     <ellipse class="as-blush" cx="90" cy="130" rx="4" ry="2.6" fill="#FF8FA3" opacity="0.5" stroke="none"/>
   </g>
   

   a face that did not mean to be in this photo.

4. 4

   Tilt, slide, flash, twinkle

   The phone group tilts gently around a single origin, the face slides horizontally in and out of frame to mimic accidental reframing, the camera flash pops, and the sparkles twinkle. Everything sits inside a prefers-reduced-motion guard.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .as .as-phone-group { animation: as-tilt 3.2s ease-in-out infinite; }
     .as .as-face { animation: as-face-slide 3.6s ease-in-out infinite; }
     .as .as-flash { animation: as-flash-pop 2.8s ease-in-out infinite; }
     .as .as-flash-star { animation: as-flash-twinkle 2.8s ease-in-out infinite; }
     .as .as-spark1 { animation: as-twinkle 2.8s ease-in-out infinite; }
     .as .as-dot1 { animation: as-twinkle 3.2s ease-in-out 0.8s infinite; }
     .as .as-dot2 { animation: as-twinkle 3.2s ease-in-out 1.4s infinite; }
     .as .as-eye { transform-origin: center; animation: as-blink 3.4s ease-in-out infinite; }
   }
   @keyframes as-tilt { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-5deg); } }
   @keyframes as-face-slide { 0%, 100% { transform: translate(-12px, 0); } 50% { transform: translate(0, 0); } }
   @keyframes as-flash-pop { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } 52% { opacity: 1; } }
   @keyframes as-flash-twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
   @keyframes as-twinkle { 0%, 100% { opacity: 0.34; transform: scale(0.84); } 45% { opacity: 1; transform: scale(1.14); } }
   @keyframes as-blink { 0%, 44%, 56%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.1); } }
   

   the eternal accidental selfie loop.

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

<svg class="as" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="An accidental baby selfie with a tilted phone, screen-clipped blurry half-face sliding into frame, popping camera flash, and twinkling sparkles">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <path class="as-spark as-spark1" d="M38 60 L41 68 L38 76 L35 68 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="1.8" stroke-linejoin="round"/>
  <circle class="as-spark as-dot1" cx="170" cy="110" r="2.4" fill="#FFD84D" stroke="none"/>
  <circle class="as-spark as-dot2" cx="46" cy="140" r="2" fill="#6FA8FF" stroke="none"/>
  <g class="as-phone-group" stroke-linecap="round" stroke-linejoin="round" style="transform-origin: 106px 100px;">
    <defs>
      <clipPath id="as-screen-clip"><rect x="68" y="44" width="76" height="120" rx="10"/></clipPath>
      <filter id="as-blur"><feGaussianBlur stdDeviation="0.6"/></filter>
    </defs>
    <g transform="rotate(-8 106 100)">
      <!-- Phone body -->
      <rect class="as-phone" x="60" y="34" width="92" height="140" rx="16" fill="#FFFDF7" stroke="#2B3A55" stroke-width="3.5"/>
      <!-- Screen -->
      <rect class="as-screen" x="68" y="44" width="76" height="120" rx="10" fill="#E8F4F8" stroke="#2B3A55" stroke-width="2.8"/>
      <!-- Camera notch -->
      <rect class="as-notch" x="92" y="48" width="28" height="6" rx="3" fill="#2B3A55" stroke="none"/>
      <circle class="as-lens" cx="106" cy="41" r="2" fill="#6FA8FF" stroke="none"/>
      <!-- Camera flash anchored to the notch -->
      <g class="as-flash" transform="translate(104, 42)">
        <path class="as-flash-star" d="M0 -12 L2.8 -2.8 L12 0 L2.8 2.8 L0 12 L-2.8 2.8 L-12 0 L-2.8 -2.8 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
        <circle class="as-flash-dot" cx="-18" cy="8" r="2.4" fill="#FFD84D" stroke="none"/>
      </g>
      <!-- On-screen shutter button -->
      <circle class="as-shutter" cx="106" cy="154" r="7" fill="#A8E6CF" stroke="#2B3A55" stroke-width="2.2"/>
      <!-- Tiny hand gripping the bottom-left corner -->
      <g class="as-hand" fill="#F5C6A5" stroke="#2B3A55" stroke-width="2.6" stroke-linejoin="round">
        <path class="as-palm" d="M58 176 Q62 166 76 168 Q84 172 82 182 Q74 188 60 186 Q54 184 58 176 Z"/>
        <ellipse class="as-thumb" cx="62" cy="168" rx="5.5" ry="7.5" transform="rotate(-25 62 168)"/>
        <ellipse class="as-finger1" cx="78" cy="178" rx="5" ry="7" transform="rotate(5 78 178)"/>
        <ellipse class="as-finger2" cx="86" cy="174" rx="4.5" ry="6.5" transform="rotate(15 86 174)"/>
        <circle class="as-knuckle1" cx="66" cy="170" r="1.8" fill="#FFFDF7" stroke="none"/>
        <circle class="as-knuckle2" cx="76" cy="174" r="1.6" fill="#FFFDF7" stroke="none"/>
      </g>
      <!-- Blurry half-face on screen -->
      <g class="as-face-blur" clip-path="url(#as-screen-clip)" filter="url(#as-blur)" opacity="0.32">
        <ellipse cx="78" cy="120" rx="30" ry="34" fill="#FFE8D6" stroke="#2B3A55" stroke-width="2.4"/>
        <path d="M40 80 C60 68 100 76 112 100 C118 114 114 132 108 138 C108 124 98 112 82 110 C66 108 54 116 48 128 C44 112 40 92 40 80 Z" fill="#8B6F47" stroke="#2B3A55" stroke-width="2.4"/>
      </g>
      <g class="as-face" clip-path="url(#as-screen-clip)">
        <!-- Hair -->
        <path class="as-hair" d="M40 80 C60 68 100 76 112 100 C118 114 114 132 108 138 C108 124 98 112 82 110 C66 108 54 116 48 128 C44 112 40 92 40 80 Z" fill="#8B6F47" stroke="#2B3A55" stroke-width="2.4" opacity="0.9"/>
        <!-- Face shape -->
        <ellipse class="as-face-shape" cx="78" cy="120" rx="30" ry="34" fill="#FFE8D6" stroke="#2B3A55" stroke-width="2.4"/>
        <!-- Visible eye (the other is off-screen) -->
        <circle class="as-eye" cx="88" cy="116" r="4.5" fill="#2B3A55" stroke="none"/>
        <circle class="as-eye-shine" cx="89.5" cy="114.5" r="1.6" fill="#FFFDF7" stroke="none"/>
        <!-- Nose tip peeking in -->
        <path class="as-nose" d="M94 124 Q98 126 94 128" fill="none" stroke="#2B3A55" stroke-width="1.8" stroke-linecap="round"/>
        <!-- Tiny smile -->
        <path class="as-smile" d="M86 136 Q92 139 98 134" fill="none" stroke="#2B3A55" stroke-width="1.8" stroke-linecap="round"/>
        <ellipse class="as-blush" cx="90" cy="130" rx="4" ry="2.6" fill="#FF8FA3" opacity="0.5" stroke="none"/>
      </g>
    </g>
  </g>
</svg>

• Cat selfieeasy

  Replace the face with a fuzzy cat ear and whiskers poking into the frame.

• Mirror modeeasy

  Flip the phone horizontally and move the hand to the bottom-right corner.

• Photo boothmedium

  Add a row of three tiny thumbnail previews at the bottom of the screen.

• Group shotmedium

  Add a second face squeezed in from the other side, both looking surprised.