<input type="range" value="50" min="0" max="100" style="--size:50" oninput="this.style='--size:'+this.value" role="img" aria-label="An interactive cartoon of a landscape painting with a tree. It slides and shows the contrast between summer and winter." />

input {
  --trunk: maroon;
  --ground: white;
  --sky: #dde;
  --sky2: #bbd;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 70vmin;
  height: 50vmin;
  background:
    /* tree */
    conic-gradient(at 50% -20%, #0000 177deg, var(--trunk) 177.25deg 182.75deg, #0000 183deg) 30vmin 50% / 10vmin 30vmin,
    
    
    conic-gradient(at 110% 30%, #0000 237deg, var(--trunk) 237.25deg 245.75deg, #0000 247deg) 35vmin 60% / 10vmin 20vmin,
    conic-gradient(at 110% 40%, #0000 217deg, var(--trunk) 217.25deg 225.75deg, #0000 227deg) 38vmin 48% / 4vmin 10vmin,
    conic-gradient(at 110% 30%, #0000 287deg, var(--trunk) 287.25deg 295.75deg, #0000 297deg) 43vmin 60% / 3vmin 10vmin,
    
    conic-gradient(at 120% 30%, #0000 217deg, var(--trunk) 217.25deg 222.75deg, #0000 223deg) 35vmin 24% / 6vmin 14vmin,
    conic-gradient(at 110% 30%, #0000 277deg, var(--trunk) 277.25deg 282.75deg, #0000 283deg) 39.75vmin 34% / 4vmin 10vmin,
    conic-gradient(at 110% 40%, #0000 237deg, var(--trunk) 227.25deg 235.75deg, #0000 247deg) 41.75vmin 28% / 2vmin 8vmin,
    
    conic-gradient(at 120% 30%, #0000 207deg, var(--trunk) 207.25deg 212.75deg, #0000 213deg) 35vmin 10% / 3vmin 9vmin,
    conic-gradient(at 120% 30%, #0000 217deg, var(--trunk) 217.25deg 223.75deg, #0000 224deg) 35vmin 21% / 3vmin 9vmin,
    
    conic-gradient(at -40% 30%, #0000 95deg, var(--trunk) 0 100deg, #0000 0) 26vmin 50% / 9vmin 10vmin,
    conic-gradient(at -40% 10%, #0000 115deg, var(--trunk) 0 120deg, #0000 0) 28vmin 47% / 4vmin 6vmin,
    conic-gradient(at -40% 80%, #0000 36deg, var(--trunk) 0 40deg, #0000 0) 31vmin 60% / 9vmin 10vmin,
    
     conic-gradient(at -40% -20%, #0000 110deg, var(--trunk) 0 115deg, #0000 0) 27.5vmin 38% / 7.5vmin 6vmin,
    conic-gradient(at 0% -20%, #0000 160deg, var(--trunk) 0 165deg, #0000 0) 29vmin 30% / 7.5vmin 4vmin,
    
    conic-gradient(at 0% -20%, #0000 150deg, var(--trunk) 0 158deg, #0000 0) 31.5vmin 25% / 4vmin 6vmin,
    
    /* snow */
    radial-gradient(closest-side, white 40%, #0000 0) 70% 70% / 1vmin 1vmin,
    radial-gradient(closest-side, white 50%, #0000 0) 60% 60% / 1vmin 1vmin,
    radial-gradient(closest-side, white 60%, #0000 0) 80% 30% / 1vmin 1vmin,
    radial-gradient(closest-side, white 70%, #0000 0) 90% 60% / 1vmin 1vmin,
    radial-gradient(closest-side, white 40%, #0000 0) 50% 10% / 1vmin 1vmin,
    radial-gradient(closest-side, white 50%, #0000 0) 55% 25% / 1vmin 1vmin,
    radial-gradient(closest-side, white 60%, #0000 0) 65% 15% / 1vmin 1vmin,
    radial-gradient(closest-side, white 70%, #0000 0) 75% 34% / 1vmin 1vmin,
    radial-gradient(closest-side, white 40%, #0000 0) 85% 10% / 1vmin 1vmin,
    radial-gradient(closest-side, white 50%, #0000 0) 95% 77% / 1vmin 1vmin,
    radial-gradient(closest-side, white 60%, #0000 0) 72% 50% / 1vmin 1vmin,
    radial-gradient(closest-side, white 70%, #0000 0) 92% 35% / 1vmin 1vmin,
    
    radial-gradient(closest-side, white 40%, #0000 0) 5% 70% / 1vmin 1vmin,
    radial-gradient(closest-side, white 50%, #0000 0) 15% 60% / 1vmin 1vmin,
    radial-gradient(closest-side, white 60%, #0000 0) 25% 30% / 1vmin 1vmin,
    radial-gradient(closest-side, white 70%, #0000 0) 35% 60% / 1vmin 1vmin,
    radial-gradient(closest-side, white 40%, #0000 0) 45% 10% / 1vmin 1vmin,
    radial-gradient(closest-side, white 50%, #0000 0) 17% 25% / 1vmin 1vmin,
    radial-gradient(closest-side, white 60%, #0000 0) 37% 15% / 1vmin 1vmin,
    radial-gradient(closest-side, white 70%, #0000 0) 27% 34% / 1vmin 1vmin,
    radial-gradient(closest-side, white 40%, #0000 0) 46% 70% / 1vmin 1vmin,
    radial-gradient(closest-side, white 50%, #0000 0) 22% 77% / 1vmin 1vmin,
    radial-gradient(closest-side, white 60%, #0000 0) 28% 50% / 1vmin 1vmin,
    radial-gradient(closest-side, white 70%, #0000 0) 10% 10% / 1vmin 1vmin,
    /* background */
    radial-gradient(175vmin 50% at 35vmin 95%, var(--ground) 30%, #0000 30.25%),
    radial-gradient(farthest-side at 50% 70%, #bb6, #aa5 99%, #0000) 6.5vmin 84% / 11vmin 7vmin,
    radial-gradient(farthest-side at 50% 70%, #fff 99%, #0000 0) 7vmin 84% / 10vmin 8vmin,
    radial-gradient(farthest-side at 50% 110%, #def 99%, #0000 0) 38vmin 87% / 100vmin 10vmin,
    linear-gradient(var(--sky2), var(--sky))
    ;
  background-repeat: no-repeat;
  background-color: #f002;
  overflow: hidden;
  border: 5vmin ridge #963;
  box-shadow: 
    -21vmin 38vmin 0 -29.25vmin #fff,
    -26.75vmin 38vmin 0 -29.5vmin #222,
    -27vmin 40vmin 0 -29.75vmin #888,
    -26vmin 40vmin 0 -29.75vmin #fff,
    -22vmin 40vmin 0 -29.75vmin #888,
    -21.5vmin 41.5vmin 0 -29.75vmin #888,
    -22.5vmin 41.5vmin 0 -29.75vmin #fff,
    -27vmin 41.5vmin 0 -29.75vmin #888,
    -21vmin 43vmin 0 -29.75vmin #fff,
    -27vmin 43vmin 0 -29.75vmin #888,
    -25vmin 40vmin 0 -25vmin white,
    -24.75vmin 40.25vmin 0 -25vmin #0002,
    0 0 0 100vmax #def;
}

input::before {
  --trunk: brown;
  --ground: green;
  --sky2: #aef;
  --sky: #8ce;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--size) * 1%);
  height: 100%;
  background:
    /* leaves */
    radial-gradient(closest-side, #00c300 90%, #0000 0) 23vmin 27% / 9vmin 9vmin,
    radial-gradient(closest-side, #0b0 99%, #0000 0) 35vmin 30% / 10vmin 9vmin,
    radial-gradient(closest-side, #0b0 99%, #0000 0) 31vmin 42% / 10vmin 9vmin,
    radial-gradient(closest-side, #0b0 99%, #0000 0) 35vmin 49% / 7vmin 6vmin,
    radial-gradient(closest-side, #0b0 90%, #0000 0) 27vmin 23% / 12vmin 9vmin,
    radial-gradient(closest-side, #0b0 99%, #0000 0) 26vmin 47% / 9vmin 6vmin,
    radial-gradient(closest-side, #0b0 80%, #0000 0) 39vmin 50% / 9vmin 9vmin,
    radial-gradient(closest-side, #0b0 70%, #0000 0) 28vmin 57% / 9vmin 9vmin,
    radial-gradient(closest-side, #0b0 84%, #0000 0) 30.5vmin 10% / 9vmin 9vmin,
    /* tree */
    conic-gradient(at 50% -20%, #0000 177deg, var(--trunk) 177.25deg 182.75deg, #0000 183deg) 30vmin 50% / 10vmin 30vmin,
    
    conic-gradient(at 110% 30%, #0000 237deg, var(--trunk) 237.25deg 245.75deg, #0000 247deg) 35vmin 60% / 10vmin 20vmin,
    conic-gradient(at 110% 40%, #0000 217deg, var(--trunk) 217.25deg 225.75deg, #0000 227deg) 37.75vmin 48% / 4vmin 10vmin,
    conic-gradient(at 110% 30%, #0000 287deg, var(--trunk) 287.25deg 295.75deg, #0000 297deg) 42.75vmin 60% / 3vmin 10vmin,
    
    conic-gradient(at 120% 30%, #0000 217deg, var(--trunk) 217.25deg 222.75deg, #0000 223deg) 35vmin 24% / 6vmin 14vmin,
    conic-gradient(at 110% 30%, #0000 277deg, var(--trunk) 277.25deg 282.75deg, #0000 283deg) 40vmin 34% / 4vmin 10vmin,
    conic-gradient(at 110% 40%, #0000 237deg, var(--trunk) 227.25deg 235.75deg, #0000 247deg) 42vmin 28% / 2vmin 8vmin,
    
    conic-gradient(at 120% 30%, #0000 207deg, var(--trunk) 207.25deg 212.75deg, #0000 213deg) 35vmin 10% / 3vmin 9vmin,
    conic-gradient(at 120% 30%, #0000 217deg, var(--trunk) 217.25deg 223.75deg, #0000 224deg) 35vmin 21% / 3vmin 9vmin,
    
    conic-gradient(at -40% 30%, #0000 95deg, var(--trunk) 0 100deg, #0000 0) 26vmin 50% / 9vmin 10vmin,
    conic-gradient(at -40% 10%, #0000 115deg, var(--trunk) 0 120deg, #0000 0) 28vmin 47% / 4vmin 6vmin,
    conic-gradient(at -40% 80%, #0000 36deg, var(--trunk) 0 40deg, #0000 0) 31vmin 60% / 9vmin 10vmin,
    
     conic-gradient(at -40% -20%, #0000 110deg, var(--trunk) 0 115deg, #0000 0) 27.5vmin 38% / 7.5vmin 6vmin,
    conic-gradient(at 0% -20%, #0000 160deg, var(--trunk) 0 165deg, #0000 0) 29vmin 30% / 7.5vmin 4vmin,
    
    conic-gradient(at 0% -20%, #0000 150deg, var(--trunk) 0 158deg, #0000 0) 31.5vmin 25% / 4vmin 6vmin,
    /* leaves */
    radial-gradient(closest-side, #090 90%, #0000 0) 25vmin 22% / 12vmin 12vmin,
    
    radial-gradient(closest-side, #080 99%, #0000 0) 35vmin 25% / 9vmin 9vmin,
    radial-gradient(closest-side, #070 80%, #0000 0) 39vmin 50% / 9vmin 9vmin,
    radial-gradient(closest-side, #090 80%, #0000 0) 23vmin 47% / 10vmin 10vmin,
    radial-gradient(closest-side, #080 84%, #0000 0) 27.5vmin 57% / 9vmin 9vmin,
    radial-gradient(closest-side, #080 84%, #0000 0) 30.5vmin 60% / 9vmin 9vmin,
    radial-gradient(closest-side, #080 84%, #0000 0) 25.5vmin 35% / 9vmin 9vmin,
    radial-gradient(closest-side, #070 90%, #0000 0) 30vmin 42% / 16vmin 16vmin,
    /* sun */
    radial-gradient(circle at 14vmin 20%, #ff8e 4vmin, #fff0 12vmin),
    /* background */
    radial-gradient(175vmin 50% at 35vmin 95%, var(--ground) 30%, #0000 0),
    radial-gradient(farthest-side at 50% 70%, #0b0 99%, #0000) 6.5vmin 84% / 11vmin 7vmin,
    
    radial-gradient(farthest-side at 50% 110%, #0a0 99%, #0000 0) 38vmin 87% / 100vmin 10vmin,
    linear-gradient(var(--sky2), var(--sky))
    ;
  box-shadow:
    inset -2px 0, 0 0 0 2px;
  background-repeat: no-repeat;
  background-color: #f002;
}


input::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-shadow: 
    inset 0 0 0 2vmin #ffd,
    inset 0 0 1vmin 1.5vmin;
}

/* hide the range handler */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: transparent;
  border: 0 solid transparent;
  width: 10%;
  height: 10%;
  display: block;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  background: transparent;
  border: 0 solid transparent;
  width: 10%;
  height: 10%;
  display: block;
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; 
  border-color: transparent;
  color: transparent;
}