<svg id="main" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 505">
  <defs>
    <clipPath id="clip-path">
      <circle id="circle" cx="250" cy="250" r="200"/>
    </clipPath>
    <radialGradient id="sunGlare" cx="146.18" cy="185.52" r="90"  gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="var(--sun)"/>
      <stop offset="1" stop-color="var(--sky)" />
    </radialGradient>
  </defs>
  <g id="world" clip-path="url(#clip-path)">
    <g id="sky">
      <circle id="sky_disk" fill="var(--sky)" cx="250" cy="450" r="524.95"/>
      <circle id="glare" fill="url(#sunGlare)" cx="146.18" cy="185.52" r="90"/>
      <circle id="sun_core" fill="var(--sun)" cx="146.18" cy="185.52" r="25"/>  
    </g>
    <path id="mountains" fill="var(--mountains)" d="M500 500H0V366c27.18-20.91 87.73-70 104.37-88.25l4.89 10.49 12.39-12.39 10.14 12.39 23.34-24.79L183 293.3l61.38-50.36 4.52 19.39 21.4 6.76 26.34-14.36c13.93 17.18 30 35.2 38.43 38.58 16.9 6.76 54.07 13.52 54.07 13.52L500 393z"/>
    <path id="snow2" fill="var(--snow)" d="M296.67 254.72l-26.34 14.36-21.4-6.76-4.52-19.39 26.48-21.73s11.84 16.35 25.78 33.52z"/>
    <path id="snow1" fill="var(--snow)" d="M155.13 263.44l-23.34 24.79-10.14-12.39-12.39 12.39-4.89-10.49a459.84 459.84 0 0 0 30.23-36.26z"/>
    <path id="trees_z4" fill="var(--trees-z4)" d="M170 360l14-54 4.81 20.33 4.19-29.08 3.32 24.09 4.15-18 3 32.4 5.26-26.59 1.66 29.63 5-41.54 2.77 41.54 4.15-28.25s1.66 32.68 2.22 31.3 5.54-31.85 5.82-31 2.77 30.74 3.32 28.8 5.54-31.85 5.54-31.85l8.86 34.06 3.93-37.39 6 28.55 6-33 9 60z"/>
    <path fill="var(--trees-z3)" d="M402.15 302.57l-2.22 34.06-8.31-28.8-3.88 37.39-8.86-34.06s-5 29.91-5.54 31.85-3-28-3.32-28.8-5.26 29.63-5.82 31-2.2-31.28-2.2-31.28l-4.15 28.25-2.77-41.54-5 41.54-1.66-29.63-5.26 26.59-3-32.4-4.15 18-3.32-24.09-4.15 29.08-2.54-21.62L313 350h-71l-5.43-39.54-2.22 34.06-8.35-28.8-3.88 37.39-8.81-34.11s-5 29.91-5.54 31.85-3-28-3.32-28.8-5.26 29.63-5.82 31-2.22-31.29-2.22-31.29l-4.15 28.25-2.77-41.54-5 41.54-1.66-29.63-5.25 26.62-3-32.4-4.15 18-3.32-24.09-4.21 29.09-2.49-21.6-6.09 24.09v20.24L410 360v-14.78z"/>
    <ellipse id="hill_right" fill="var(--hills)" cx="308.07" cy="423.4" rx="214.58" ry="95.74"/>
    <ellipse id="hill_left" fill="var(--hills)" cx="150.38" cy="408.76" rx="105.32" ry="67.58"/>
    <path id="trees_z2" fill="var(--trees-z2)"  d="M77.72 400l24.78-100.5 10.14 87.86 16.9-118.27 13.52 98L160 293.87l12.39 131.79 21.4-108.13L200.5 438l20.28-169L232 438l16.9-114.89s6.76 132.92 9 127.28 22.58-129.49 23.7-126.11 11.26 125 13.52 117.15 22.53-129.54 22.53-129.54l36 138.55 15.77-152.06 33.79 117.15 9-138.55L433 400h67v100H0V400z"/>
    <path id="trees_z1" fill="var(--trees-z1)" d="M60.83 421l24.78-96.72 10.14 87.86 16.9-118.27 13.52 98 16.9-73.22 12.39 131.79 21.4-108.13 6.76 120.53 20.28-169 11.26 169L232 347.93s6.76 132.92 9 127.28 22.53-129.54 23.65-126.16 11.26 125 13.52 117.15 22.53-129.54 22.53-129.54l36 138.55 15.77-152.06 33.89 117.15 9-138.55L417.17 421H500v79H0v-79z"/>
    <path id="shadow" class="shadow" d="M-40.55-27.16V536h563.2V-27.16zm261.89 478.72c-101.09 0-183-90-183-201.06s81.95-201.06 183-201.06 183 90 183 201.06-81.91 201.06-183 201.06z"/>
  </g>
  <g id="rocket">
    <path d="M305.58 126.36L185.46 281.85l69.05-66.75-12.14 16.49 90.76-77.68-27.55-27.55z" fill="var(--snow)"/>
    <path id="rocket_shadow" fill="var(--rocket-2)" d="M321.56 107.24c-1 1-2.08 2.1-3.06 3.17-6.2-2.43-12.41-3.36-19.58.23-9.89 4.95-18.22 16.37-19.48 26.3a1.52 1.52 0 0 0 2.81 1c2.35-2.94 7.24-7.32 10.79-9.1a24.37 24.37 0 0 1 12.41-2.61l4.56 4.56 9.23 9.23 36.33-36.32a7.08 7.08 0 0 1 10-10L385 74.16c-15.94-1.75-41.21 10.84-63.44 33.08z"/>
    <path id="rocket-2" data-name="rocket" fill="var(--rocket-1)" d="M352.4 138.1c-1.08 1.07-2.16 2.12-3.26 3.15a2 2 0 0 1 .21.38c2.47 6.2 3.41 12.41-.16 19.59-4.92 9.89-16.32 18.26-26.25 19.56-1.6.21-2.26-1.76-1-2.81 2.92-2.36 7.29-7.25 9.06-10.81a24.11 24.11 0 0 0 2.53-13l-.07.06L319.23 140l36.33-36.32a7.08 7.08 0 1 0 10-10L385 74.16h.4c2.04 16-10.58 41.51-33 63.94z"/>
  </g>
</svg>

:root {
  --trees-z1: hsl(20, 60%, 20%);
  --trees-z2: hsl(20, 60%, 30%);
  --trees-z3: hsl(20, 60%, 50%);
  --trees-z4: hsl(20, 60%, 60%);
  --rocket-1: #f00;
  --rocket-2: #b00;
  --hills: hsl(20, 60%, 40%);
  --mountains: #f90;
  --snow: #fa0;
  --sky: #f60;
  --sun: #f90;
  --angle: -20deg;
}

svg {
  width: 100vh;
  height: 100vh;
  margin: 0 auto;
}
svg *{
  transition: all 2s;
}
svg:hover{
   --trees-z1: #0b3253;
  --trees-z2: #0c3b5b;
  --trees-z3: #1e566b;
  --trees-z4: #bcc7b0;
  --rocket-1: #bfe2cd;
  --rocket-2: #c5efd4;
  --hills: #486a72;
  --mountains: #bdd8ba;
  --snow: #d2e8cf;
  --sky: #a0cdb3;
  --sun: #fff;
  --angle: 20deg;
}

#sky {
  transform-origin: 250px 450px;
  transform: rotate(var(--angle));
}

.shadow {
  opacity: 0.24;
}

body {
  background: #0b3253;
  width: 100vw;
  height: 100vh;
  display: flex;
  padding: 0;
  margin: 0;
}