Cozy Coding Desk

A warm workspace scene in SVG — a wooden desk, a glowing laptop with friendly code lines, a steaming mug, a mint plant, and a softly pulsing lamp.

You’ll learn

• Block a scene with background color fields, a floor band, and a desk shadow
• Layer a laptop from base, screen, and colored code-line rectangles
• Use small props (mug, plant, notebook) to make a scene feel lived-in
• Animate steam, a lamp glow, and a blinking cursor with staggered keyframes

1. 1

   Set the room and desk

   A warm cream wall, a soft tangerine accent block, a mint floor band, and a wooden desk with chunky navy legs establish the whole scene before any props arrive.

   index.html

   copy code

   <svg class="cozy-coding-desk" viewBox="0 0 230 210" width="230" height="210">
     <rect x="0" y="0" width="230" height="210" fill="#FFF8EF" />
     <rect x="28" y="22" width="174" height="106" rx="14" fill="#FFD6A5" opacity="0.55" />
     <rect x="0" y="176" width="230" height="34" fill="#A8E6CF" />
     <ellipse cx="115" cy="180" rx="76" ry="10" fill="#2B3A55" opacity="0.16" />
     <rect x="54" y="146" width="8" height="34" rx="3" fill="#E89F6A" stroke="#2B3A55" stroke-width="4" />
     <rect x="168" y="146" width="8" height="34" rx="3" fill="#E89F6A" stroke="#2B3A55" stroke-width="4" />
     <path d="M42 146 L188 146 L198 158 L32 158 Z" fill="#F4C093" stroke="#2B3A55" stroke-width="5" />
   </svg>
   

   a warm room with a wooden desk — ready for a late-night coding session.

2. 2

   Add the laptop and mug

   The laptop is a few rectangles: base, screen, and a dark code editor. Thin colored bars stand in for code lines. A coral mug with a curved handle and a coffee surface sits beside it.

   index.html

   copy code

   <!-- laptop base + screen -->
   <path d="M72 146 L158 146 L164 152 L66 152 Z" fill="#2B3A55" stroke="#2B3A55" stroke-width="4" />
   <rect x="80" y="104" width="70" height="42" rx="5" fill="#FFF8EF" stroke="#2B3A55" stroke-width="4" />
   <rect x="84" y="108" width="62" height="34" rx="3" fill="#2B3A55" />
   <rect x="88" y="113" width="20" height="3" rx="1.5" fill="#FF6B5E" />
   <rect x="88" y="120" width="34" height="3" rx="1.5" fill="#A8E6CF" />
   <rect x="88" y="127" width="28" height="3" rx="1.5" fill="#FFF8EF" />
   <rect x="88" y="134" width="14" height="3" rx="1.5" fill="#FFD6A5" />
   
   <!-- coffee mug -->
   <g transform="translate(154, 124)">
     <path d="M6 0 L6 18 Q6 24 12 24 L22 24 Q28 24 28 18 L28 0 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="4" />
     <path d="M28 6 Q34 6 34 11 Q34 16 28 16" fill="none" stroke="#2B3A55" stroke-width="3.5" />
     <ellipse cx="17" cy="0" rx="11" ry="3" fill="#FFF8EF" stroke="#2B3A55" stroke-width="3.5" />
     <ellipse cx="17" cy="0.5" rx="8" ry="2" fill="#6B4C35" />
   </g>
   

   a laptop with code lines and a hot mug — now it feels like work.

3. 3

   Add plant, lamp, and details

   A mint plant in a terracotta pot, a coral desk lamp with a warm glow halo, a tiny notebook, and a pen make the desk feel occupied instead of staged.

   index.html

   copy code

   <!-- mint plant -->
   <g transform="translate(48, 120)">
     <path d="M6 26 L28 26 L24 42 L10 42 Z" fill="#E89F6A" stroke="#2B3A55" stroke-width="4" />
     <ellipse cx="17" cy="26" rx="11" ry="3" fill="#FFF8EF" stroke="#2B3A55" stroke-width="3.5" />
     <path d="M17 26 Q8 12 6 18 Q10 24 17 26" fill="#A8E6CF" stroke="#2B3A55" stroke-width="3.5" />
     <path d="M17 26 Q26 8 30 14 Q24 22 17 26" fill="#A8E6CF" stroke="#2B3A55" stroke-width="3.5" />
     <path d="M17 26 Q17 8 17 4 Q17 8 17 26" fill="#A8E6CF" stroke="#2B3A55" stroke-width="3.5" />
   </g>
   
   <!-- desk lamp with warm glow -->
   <g transform="translate(14, 98)">
     <circle class="lamp-glow" cx="28" cy="30" r="38" fill="#FFD6A5" opacity="0.28" />
     <ellipse cx="20" cy="54" rx="14" ry="5" fill="#FF6B5E" stroke="#2B3A55" stroke-width="4" />
     <path d="M20 54 L14 34 L30 22" fill="none" stroke="#2B3A55" stroke-width="4" />
     <path d="M18 24 L44 18 L48 30 L22 36 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="4" />
     <ellipse cx="35" cy="30" rx="7" ry="5" fill="#FFF8EF" stroke="#2B3A55" stroke-width="3" />
   </g>
   
   <!-- notebook and pen -->
   <rect x="122" y="150" width="22" height="14" rx="2" fill="#A8E6CF" stroke="#2B3A55" stroke-width="3.5" />
   <line x1="128" y1="150" x2="128" y2="164" stroke="#2B3A55" stroke-width="2" />
   <rect x="150" y="148" width="4" height="18" rx="1.5" fill="#2B3A55" />
   <circle cx="152" cy="147" r="2.5" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.5" />
   

   plant, lamp, notebook — the desk now has a personality.

4. 4

   Bring it to life

   Gentle steam wisps rise from the mug, the desk-lamp halo pulses, and the cursor blinks. Everything sits inside a prefers-reduced-motion guard so the scene stays calm for anyone who needs it.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .cozy-coding-desk .steam { animation: steam-rise 2.6s ease-in-out infinite; transform-origin: center bottom; }
     .cozy-coding-desk .steam-right { animation-delay: 1.3s; }
     .cozy-coding-desk .lamp-glow { transform-origin: 28px 30px; animation: glow-pulse 3.2s ease-in-out infinite; }
     .cozy-coding-desk .cursor { animation: cursor-blink 1.1s step-end infinite; }
   }
   @keyframes steam-rise {
     0% { transform: translateY(0) scale(1); opacity: 0.7; }
     50% { opacity: 0.35; }
     100% { transform: translateY(-10px) scale(1.15); opacity: 0; }
   }
   @keyframes glow-pulse {
     0%, 100% { opacity: 0.22; transform: scale(1); }
     50% { opacity: 0.34; transform: scale(1.08); }
   }
   

   the finished cozy desk — steam rising, lamp glowing, cursor blinking.

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

<svg class="cozy-coding-desk" viewBox="0 0 230 210" width="230" height="210" role="img" aria-label="Cozy coding desk scene">
  <!-- warm cream wall -->
  <rect x="0" y="0" width="230" height="210" fill="#FFF8EF" stroke="none"/>
  <!-- soft tangerine wall accent behind the desk -->
  <rect x="28" y="22" width="174" height="106" rx="14" fill="#FFD6A5" stroke="none" opacity="0.55"/>
  <!-- mint floor band -->
  <rect x="0" y="176" width="230" height="34" fill="#A8E6CF" stroke="none"/>
  <!-- baseboard line -->
  <rect x="0" y="174" width="230" height="5" fill="#2B3A55" stroke="none" opacity="0.12"/>
  <!-- desk shadow on the floor -->
  <ellipse cx="115" cy="180" rx="76" ry="10" fill="#2B3A55" stroke="none" opacity="0.16"/>
  <!-- back legs -->
  <rect x="54" y="146" width="8" height="34" rx="3" fill="#E89F6A" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/>
  <rect x="168" y="146" width="8" height="34" rx="3" fill="#E89F6A" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/>
  <!-- desktop top -->
  <path d="M42 146 L188 146 L198 158 L32 158 Z" fill="#F4C093" stroke="#2B3A55" stroke-width="5" stroke-linejoin="round"/>
  <!-- front legs -->
  <rect x="44" y="154" width="9" height="30" rx="3" fill="#E89F6A" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/>
  <rect x="177" y="154" width="9" height="30" rx="3" fill="#E89F6A" stroke="#2B3A55" stroke-width="4" stroke-linecap="round"/>
  <!-- laptop base -->
  <path d="M72 146 L158 146 L164 152 L66 152 Z" fill="#2B3A55" stroke="#2B3A55" stroke-width="4" stroke-linejoin="round"/>
  <rect x="74" y="144" width="82" height="5" rx="2" fill="#E89F6A" stroke="#2B3A55" stroke-width="3"/>
  <!-- laptop screen -->
  <rect x="80" y="104" width="70" height="42" rx="5" fill="#FFF8EF" stroke="#2B3A55" stroke-width="4"/>
  <!-- code editor screen -->
  <rect x="84" y="108" width="62" height="34" rx="3" fill="#2B3A55" stroke="none"/>
  <!-- friendly code lines in coral, mint, and cream -->
  <rect x="88" y="113" width="20" height="3" rx="1.5" fill="#FF6B5E"/>
  <rect x="88" y="120" width="34" height="3" rx="1.5" fill="#A8E6CF"/>
  <rect x="88" y="127" width="28" height="3" rx="1.5" fill="#FFF8EF"/>
  <rect x="88" y="134" width="14" height="3" rx="1.5" fill="#FFD6A5"/>
  <!-- tiny cursor blink -->
  <rect class="cursor" x="106" y="134" width="3" height="3" rx="0.5" fill="#FFD6A5"/>
  <!-- coffee mug -->
  <g transform="translate(154, 124)">
    <path d="M6 0 L6 18 Q6 24 12 24 L22 24 Q28 24 28 18 L28 0 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="4" stroke-linejoin="round"/>
    <path d="M28 6 Q34 6 34 11 Q34 16 28 16" fill="none" stroke="#2B3A55" stroke-width="3.5" stroke-linecap="round"/>
    <ellipse cx="17" cy="0" rx="11" ry="3" fill="#FFF8EF" stroke="#2B3A55" stroke-width="3.5"/>
    <!-- coffee surface -->
    <ellipse cx="17" cy="0.5" rx="8" ry="2" fill="#6B4C35" stroke="none"/>
    <!-- gentle steam wisps -->
    <path class="steam steam-left" d="M12 -4 Q8 -12 12 -18" fill="none" stroke="#FFF8EF" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
    <path class="steam steam-right" d="M22 -3 Q26 -11 22 -17" fill="none" stroke="#FFF8EF" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
  </g>
  <!-- mint plant -->
  <g transform="translate(48, 120)">
    <!-- pot -->
    <path d="M6 26 L28 26 L24 42 L10 42 Z" fill="#E89F6A" stroke="#2B3A55" stroke-width="4" stroke-linejoin="round"/>
    <ellipse cx="17" cy="26" rx="11" ry="3" fill="#FFF8EF" stroke="#2B3A55" stroke-width="3.5"/>
    <!-- leaves -->
    <path d="M17 26 Q8 12 6 18 Q10 24 17 26" fill="#A8E6CF" stroke="#2B3A55" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M17 26 Q26 8 30 14 Q24 22 17 26" fill="#A8E6CF" stroke="#2B3A55" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M17 26 Q17 8 17 4 Q17 8 17 26" fill="#A8E6CF" stroke="#2B3A55" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
  </g>
  <!-- desk lamp -->
  <g transform="translate(14, 98)">
    <!-- warm glow halo behind the shade -->
    <circle class="lamp-glow" cx="28" cy="30" r="38" fill="#FFD6A5" stroke="none" opacity="0.28"/>
    <!-- base -->
    <ellipse cx="20" cy="54" rx="14" ry="5" fill="#FF6B5E" stroke="#2B3A55" stroke-width="4"/>
    <!-- arm -->
    <path d="M20 54 L14 34 L30 22" fill="none" stroke="#2B3A55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
    <!-- shade -->
    <path d="M18 24 L44 18 L48 30 L22 36 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="4" stroke-linejoin="round"/>
    <!-- bulb -->
    <ellipse cx="35" cy="30" rx="7" ry="5" fill="#FFF8EF" stroke="#2B3A55" stroke-width="3"/>
  </g>
  <!-- small details: notebook and pen -->
  <g transform="translate(122, 150)">
    <rect x="0" y="0" width="22" height="14" rx="2" fill="#A8E6CF" stroke="#2B3A55" stroke-width="3.5"/>
    <line x1="6" y1="0" x2="6" y2="14" stroke="#2B3A55" stroke-width="2"/>
  </g>
  <g transform="translate(150, 148)">
    <rect x="0" y="0" width="4" height="18" rx="1.5" fill="#2B3A55" stroke="#2B3A55" stroke-width="3"/>
    <circle cx="2" cy="-1" r="2.5" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.5"/>
  </g>
</svg>

• Night modeeasy

  Darken the wall and make the lamp glow more prominent — the code lines pop against a navy editor.

• Tea insteadeasy

  Recolor the mug and coffee surface to mint or chamomile yellow.

• Bigger plantmedium

  Add a second trailing leaf hanging off the desk edge.

• Typing effectmedium

  Animate the code-line widths so they look like they're being typed.