Dune: Part Three

A warm desert scene with rolling sand dunes, distant mountains, two pale moons, a robed traveler walking with fading footprints, and a small flower blooming in the foreground. Built with layered SVG paths and calm CSS loops.

You’ll learn

• Layering dune curves with overlapping warm tones for depth
• Drawing a small robed traveler silhouette from basic shapes
• Adding footprints that fade behind the walker
• Creating a moon glow with soft opacity circles
• Timing walk, bloom, glow, and dust drift loops independently

1. 1

   Set the desert gradient

   Start with a vertical gradient from deep amber at the bottom to soft peach at the top. This gives the scene its warm, late-afternoon desert mood.

   index.html

   copy code

   <svg class="du" viewBox="0 0 200 200" width="200" height="200">
     <defs>
       <linearGradient id="du-sky" x1="0" y1="0" x2="0" y2="1">
         <stop offset="0%" stop-color="#F7D6A8" />
         <stop offset="100%" stop-color="#E09B5F" />
       </linearGradient>
     </defs>
     <rect x="0" y="0" width="200" height="200" rx="18" fill="url(#du-sky)" />
   </svg>
   

   warm desert light fills the canvas.

2. 2

   Layer dunes and mountains

   Add two rows of rolling dunes in slightly different warm tones. Place a jagged mountain range far in the background with low opacity so it reads as distance.

   index.html

   copy code

   <!-- distant mountains -->
   <path d="M20 90 L45 66 L70 86 L95 58 L125 84 L155 60 L180 88 L180 110 L20 110 Z" fill="#C97E4F" opacity="0.55" />
   
   <!-- dunes -->
   <path class="du-dune" d="M0 118 C40 104 80 130 120 116 C160 102 200 126 200 132 L200 200 L0 200 Z" fill="#D4935E" stroke="#2B3A55" stroke-width="1.8" />
   <path class="du-dune" d="M0 142 C50 128 100 152 150 138 C190 126 200 148 200 154 L200 200 L0 200 Z" fill="#E09B5F" stroke="#2B3A55" stroke-width="1.8" />
   

   rolling dunes lead the eye toward distant peaks.

3. 3

   Add moons, traveler, and flower

   Place two pale moons in the sky with soft glow circles. Add a tiny robed traveler silhouette walking across the nearest dune, a trail of fading footprints behind them, and one small flower in the foreground.

   index.html

   copy code

   <!-- moons -->
   <circle class="du-moon" cx="54" cy="52" r="14" fill="#FFFDF7" opacity="0.85" />
   <circle class="du-moon" cx="158" cy="42" r="10" fill="#FFFDF7" opacity="0.7" />
   
   <!-- traveler -->
   <g class="du-traveler" fill="#2B3A55">
     <path d="M104 128 L100 118 L104 114 L108 118 L104 128 Z" />
     <path d="M98 130 Q104 126 110 130 L108 146 L100 146 Z" />
   </g>
   
   <!-- footprints -->
   <ellipse class="du-print" cx="86" cy="144" rx="2.2" ry="1.2" fill="#2B3A55" opacity="0.25" />
   <ellipse class="du-print" cx="80" cy="144" rx="2" ry="1.1" fill="#2B3A55" opacity="0.15" />
   
   <!-- flower -->
   <g class="du-flower" stroke-linecap="round" stroke-linejoin="round">
     <path d="M160 172 L160 158" stroke="#7BA05B" stroke-width="2" />
     <circle cx="160" cy="156" r="4" fill="#FF8FA3" stroke="#2B3A55" stroke-width="1.2" />
   </g>
   

   a lone walker crosses the dunes beneath two moons.

4. 4

   Animate the desert

   Add CSS keyframes for the moons to glow, the traveler to walk across the dune, the footprints to fade, the flower to bloom larger, and a dust drift layer to slide slowly across the scene.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .du .du-moon { animation: du-glow 4s ease-in-out infinite; }
     .du .du-traveler { animation: du-walk 8s linear infinite; }
     .du .du-print { animation: du-fade 8s linear infinite; }
     .du .du-flower { transform-box: fill-box; transform-origin: bottom center; animation: du-bloom 3s ease-in-out infinite; }
     .du .du-dust { animation: du-drift 12s linear infinite; }
   }
   @keyframes du-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
   @keyframes du-walk { 0% { transform: translateX(0); } 100% { transform: translateX(24px); } }
   @keyframes du-fade { 0% { opacity: 0; } 20% { opacity: 0.25; } 100% { opacity: 0; } }
   @keyframes du-bloom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
   

   the walker moves, the flower blooms, and the moons pulse over the dunes.

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

<svg class="dune" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A robed traveler walks across warm dunes beneath two moons while a lone flower blooms in the foreground">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <g class="dune-moon" stroke="#2B3A55" stroke-width="1.4" fill="#FFFDF7">
    <circle cx="156" cy="48" r="16"/>
    <circle cx="162" cy="44" r="4" fill="#FBF2E5" stroke="none"/>
    <path d="M148 42 C150 36 156 34 160 36" fill="none" stroke="#2B3A55" stroke-width="1" opacity="0.3"/>
  </g>
  <g class="dune-moon" stroke="#2B3A55" stroke-width="1.2" fill="#FFFDF7" opacity="0.7">
    <circle cx="132" cy="74" r="9"/>
    <circle cx="136" cy="71" r="2.2" fill="#FBF2E5" stroke="none"/>
  </g>
  <path class="dune-sky" d="M0 92 C28 92 44 104 64 104 C88 104 104 96 124 96 C148 96 164 104 200 104 L200 200 L0 200 Z" fill="#E8A87C" opacity="0.4"/>
  <path d="M0 84 L24 76 L48 82 L72 74 L100 80 L132 72 L160 78 L200 70 L200 92 L0 92 Z" fill="#C77A57" opacity="0.35"/>
  <path class="dune-dune" d="M0 112 C36 112 52 136 100 136 C148 136 164 112 200 112 L200 200 L0 200 Z" fill="#C77A57"/>
  <path class="dune-dune" d="M0 140 C40 140 60 168 100 168 C140 168 160 140 200 140 L200 200 L0 200 Z" fill="#E8A87C"/>
  <g class="dune-traveler" fill="#2B3A55" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M82 144 C82 144 78 134 84 130 C88 127 94 127 98 130 C102 134 100 144 100 144 L100 160 L96 166 L90 166 L86 160 Z"/>
    <path d="M84 130 C80 126 76 128 74 134 C72 140 76 148 76 148" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    <path d="M98 130 C102 126 106 128 108 134 C110 140 106 148 106 148" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    <path d="M86 144 L84 152" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
    <path d="M96 144 L98 152" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
    <path d="M90 128 L88 122 L94 122 Z" fill="#2B3A55"/>
  </g>
  <g class="dune-prints" fill="none" stroke="#2B3A55" stroke-width="1.2" stroke-linecap="round" opacity="0.35">
    <ellipse cx="70" cy="154" rx="2" ry="1.2"/>
    <ellipse cx="62" cy="158" rx="2" ry="1.2"/>
    <ellipse cx="54" cy="162" rx="2" ry="1.2"/>
    <ellipse cx="46" cy="166" rx="2" ry="1.2"/>
  </g>
  <g class="dune-flower" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M152 176 Q150 164 152 156" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    <path d="M152 164 Q146 160 144 166" fill="none" stroke="#2B3A55" stroke-width="1.2"/>
    <path d="M152 168 Q158 164 160 170" fill="none" stroke="#2B3A55" stroke-width="1.2"/>
    <ellipse cx="152" cy="154" rx="4" ry="6" fill="#FFFDF7"/>
    <ellipse cx="152" cy="154" rx="1.6" ry="2.4" fill="#FFD84D"/>
  </g>
  <path class="dune-dust" style="animation-delay: 0s" d="M32 160 Q48 160 62 154" fill="none" stroke="#FFFDF7" stroke-width="1.6" opacity="0.35" stroke-linecap="round"/>
  <path class="dune-dust" style="animation-delay: 1.5s" d="M140 164 Q154 164 168 158" fill="none" stroke="#FFFDF7" stroke-width="1.6" opacity="0.3" stroke-linecap="round"/>
</svg>

• Add a worm ripplemedium

  Draw a subtle curved ridge in the far dune that moves slowly, as if something large is passing beneath the sand.

• Star map versioneasy

  Add faint constellation dots above the moons and connect a few into a simple line pattern.

• Oasis variantmedium

  Replace the foreground flower with a small pool of water and two palm silhouettes in the distance.