Moonlit Cat Window

A quiet night window scene in SVG — a cream cat watching a crescent moon, tiny twinkling stars, and a gently swaying tail. All inside one self-contained SVG.

You’ll learn

• Layer rectangles to build a cozy window frame and dark wall
• Use an SVG linearGradient for a soft midnight sky
• Build a crescent moon by overlapping two circles
• Animate stars and a tail with CSS keyframes inside an SVG style block

1. 1

   Build the window frame

   A few stacked rectangles become the wall, frame, glass, and window bars. The dark colors make it feel like nighttime before any sky or cat appears.

   index.html

   copy code

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 160" width="200" height="160">
     <rect x="0" y="0" width="200" height="160" fill="#1a2332" rx="8" />
     <rect x="16" y="16" width="168" height="128" fill="#101820" rx="6" />
     <rect x="20" y="20" width="160" height="120" fill="#0b1018" rx="4" />
     <rect x="94" y="16" width="12" height="128" fill="#1a2332" />
     <rect x="16" y="78" width="168" height="12" fill="#1a2332" />
   </svg>
   

   a dark window frame — the stage is set.

2. 2

   Add the night sky

   A vertical gradient from deep indigo to softer blue fills the glass, and two overlapping circles trick the eye into seeing a crescent moon. A handful of tiny stars complete the view.

   index.html

   copy code

   <defs>
     <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0%" stop-color="#1e1b4b" />
       <stop offset="100%" stop-color="#312e81" />
     </linearGradient>
   </defs>
   <rect x="20" y="20" width="160" height="120" fill="url(#sky)" rx="4" />
   <circle cx="140" cy="44" r="18" fill="#fef3c7" />
   <circle cx="148" cy="40" r="16" fill="#312e81" />
   <circle cx="42" cy="38" r="1.5" fill="#fde68a" />
   <circle cx="68" cy="54" r="1.2" fill="#fde68a" />
   

   midnight sky, a crescent moon, and a few stars — already cozy.

3. 3

   Add the cat and windowsill

   A wooden sill, a cream cat made of simple circles and triangles, a curved tail, and a tiny potted plant turn the window into a little story.

   index.html

   copy code

   <rect x="16" y="116" width="168" height="28" fill="#4a3b2a" rx="2" />
   <rect x="18" y="118" width="164" height="24" fill="#5d4a35" rx="2" />
   <ellipse cx="86" cy="116" rx="14" ry="18" fill="#f5e6d3" />
   <circle cx="86" cy="100" r="12" fill="#f5e6d3" />
   <polygon points="74,92 78,78 82,92" fill="#f5e6d3" />
   <polygon points="90,92 94,78 98,92" fill="#f5e6d3" />
   <path d="M 86 108 Q 96 110 96 100" fill="none" stroke="#d4c4b0" stroke-width="1.5" />
   <circle cx="82" cy="98" r="1.2" fill="#3e3e3e" />
   <circle cx="90" cy="98" r="1.2" fill="#3e3e3e" />
   <path d="M 98 120 Q 112 116 116 100" fill="none" stroke="#f5e6d3" stroke-width="5" />
   <rect x="140" y="110" width="12" height="14" fill="#8b5a2b" rx="1" />
   <path d="M 146 110 L 140 98 L 152 98 Z" fill="#65a30d" />
   <path d="M 146 110 L 136 100 L 142 104 Z" fill="#84cc16" />
   <path d="M 146 110 L 156 100 L 150 104 Z" fill="#84cc16" />
   

   the cat has arrived, and it's watching the moon.

4. 4

   Animate the stars and tail

   A tiny style block inside the SVG gives the stars a soft twinkle and the cat's tail a slow wag, all guarded by prefers-reduced-motion.

   index.html

   copy code

   <style>
     @media (prefers-reduced-motion: no-preference) {
       .star { animation: twinkle 2.4s ease-in-out infinite; }
       .star:nth-child(odd) { animation-delay: -1.2s; }
       .tail { animation: wag 4s ease-in-out infinite; transform-origin: 98px 120px; }
       @keyframes twinkle {
         0%, 100% { opacity: 0.6; transform: scale(0.9); }
         50% { opacity: 1; transform: scale(1.1); }
       }
       @keyframes wag {
         0%, 100% { transform: rotate(-2deg); }
         50% { transform: rotate(4deg); }
       }
     }
   </style>
   <circle class="star" cx="42" cy="38" r="1.5" fill="#fde68a" />
   <path class="tail" d="M 98 120 Q 112 116 116 100" ... />
   

   the finished moonlit window — twinkling, wagging, and calm.

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

<svg class="moonlit-cat-window" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 160" width="200" height="160">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1e1b4b" />
      <stop offset="100%" stop-color="#312e81" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="200" height="160" fill="#1a2332" rx="8" />
  <rect x="16" y="16" width="168" height="128" fill="#101820" rx="6" />
  <rect x="20" y="20" width="160" height="120" fill="url(#sky)" rx="4" />
  <circle cx="140" cy="44" r="18" fill="#fef3c7" />
  <circle cx="148" cy="40" r="16" fill="#312e81" />
  <circle class="star" cx="42" cy="38" r="1.5" fill="#fde68a" />
  <circle class="star" cx="68" cy="54" r="1.2" fill="#fde68a" />
  <circle class="star" cx="160" cy="72" r="1.4" fill="#fde68a" />
  <circle class="star" cx="52" cy="90" r="1" fill="#fde68a" />
  <circle class="star" cx="120" cy="28" r="1.1" fill="#fde68a" />
  <rect x="94" y="16" width="12" height="128" fill="#1a2332" />
  <rect x="16" y="78" width="168" height="12" fill="#1a2332" />
  <rect x="16" y="116" width="168" height="28" fill="#4a3b2a" rx="2" />
  <rect x="18" y="118" width="164" height="24" fill="#5d4a35" rx="2" />
  <ellipse cx="86" cy="116" rx="14" ry="18" fill="#f5e6d3" />
  <circle cx="86" cy="100" r="12" fill="#f5e6d3" />
  <polygon points="74,92 78,78 82,92" fill="#f5e6d3" />
  <polygon points="90,92 94,78 98,92" fill="#f5e6d3" />
  <path d="M 86 108 Q 96 110 96 100" fill="none" stroke="#d4c4b0" stroke-width="1.5" stroke-linecap="round" />
  <circle cx="82" cy="98" r="1.2" fill="#3e3e3e" />
  <circle cx="90" cy="98" r="1.2" fill="#3e3e3e" />
  <path class="tail" d="M 98 120 Q 112 116 116 100" fill="none" stroke="#f5e6d3" stroke-width="5" stroke-linecap="round" />
  <rect x="140" y="110" width="12" height="14" fill="#8b5a2b" rx="1" />
  <path d="M 146 110 L 140 98 L 152 98 Z" fill="#65a30d" />
  <path d="M 146 110 L 136 100 L 142 104 Z" fill="#84cc16" />
  <path d="M 146 110 L 156 100 L 150 104 Z" fill="#84cc16" />
</svg>

• Daylight versioneasy

  Swap the sky gradient for warm oranges and pinks, and change the moon to a sun.

• More starseasy

  Scatter a few more tiny circles and give each a different animation-delay.

• Different catmedium

  Recolor the cat to grey or ginger, or give it a longer curled tail.

• Raccoon visitormedium

  Add a second small face peeking over the windowsill on the right.