<div role="img" aria-label="Cartoon of a chameleon resting on a branch"></div>

div {
  width: 60vmin;
  height: 60vmin;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-image: 
    linear-gradient(176deg, indianred 80%, transparent 0),
    radial-gradient(at 100% 50%, #090 50%, transparent 0),
    radial-gradient(at 0% 50%, #0a0 50%, transparent 0),
    radial-gradient(farthest-side at 100% 100%, transparent calc(99.9% - 6vmin), indianred 0 99.9%, transparent 0),
    linear-gradient(transparent 80%, darksalmon 0, salmon 90%, #59361A 0, transparent 120%)
    ;
  background-size: 
    40vmin 10vmin,
    4vmin 18vmin,
    3vmin 18vmin,
    60vmin 100vmin,
    100% 100%
    ;
  background-position: 
    calc(50% - 15vmin) calc(50% + 5vmin),
    calc(50% - 5vmin) calc(50% + 14vmin),
    calc(50% - 2vmin) calc(50% + 14vmin),
    calc(50% - 64.75vmin) calc(50% + 50vmin),
    0 0
    ;
  background-repeat: no-repeat;
}

div::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  background-color: #fec;
  filter: blur(1vmin);
  background-image:
    /* lamp */
    conic-gradient(at 50% -150%, transparent 160deg, #fff 0 200deg, transparent 0),
    radial-gradient(at 50% 80vh, aqua 40%, transparent 0),
    /* ball */
    radial-gradient(circle closest-side, #36f, #14d 80% 99.9%, transparent 0),
    /* bottle */
    linear-gradient(#5007, #5007),
    radial-gradient(ellipse 120% 100% at 50% 100%, #0a0 80%, transparent 0),
    linear-gradient(#080, #080),
    linear-gradient(#0a0, #0a0),
    radial-gradient(farthest-side at 50% 55%, salmon 99.9%, transparent 0),
    linear-gradient(rgb(230, 108, 100), salmon)
    /* wall paper */
    ,
    repeating-linear-gradient(45deg, transparent 0 calc(5vmin - 0.5px), #d0c0a055 0 calc(5vmin + 0.5px), transparent 0 10vmin),
    repeating-linear-gradient(-45deg, transparent 0 calc(5vmin - 0.5px), #d0c0a055 0 calc(5vmin + 0.5px), transparent 0 10vmin)
    ;
  background-size:
    /* lamp */
    100vw 30vh,
    50vmin 80vh,
    /* ball */
    100vw 60vh,
    /* bottle */
    28vmin 39vh,
    30vmin 70vh,
    10vmin 4vh,
    8vmin 30vh,
    10vmin 4.5vh,
    6vmin 3.5vh
    ,
    100% 100%,
    100% 100%
    ; 
  background-position:
    /* lamp */
    200vw 15vh,
    calc(250vw - 25vmin) 0,
    /* ball */
    300vw 20vh,
    /* bottle */
    calc(150vw - 14vmin) 40vh,
    calc(150vw - 15vmin) 10vh,
    calc(150vw - 5vmin) 15vh,
    calc(150vw - 4vmin) 15vh,
    calc(150vw - 5vmin) 9.5vh,
    calc(150vw - 3vmin) 14vh
    ,
    0 0,
    0 0
    ;
  background-repeat: no-repeat;
  z-index: -2;
}

@property --x {
  syntax: '<length>';
  inherits: false;
  initial-value: 7vmin;
}

@property --y {
  syntax: '<length>';
  inherits: false;
  initial-value: 7vmin;
}

@keyframes moveEye {
  0%, 100% { --x: 7vmin; --y: 21vmin; }
  20% { --x: 7vmin; --y: 21vmin; }
  40% { --x: 10vmin; --y: 25vmin; }
  60% { --x: 9vmin; --y: 22vmin; }
  80% { --x: 8vmin; --y: 24vmin; }
}

div::after {
  animation: moveEye 10s infinite;
  --x: 7vmin;
  --y: 21vmin;
  content: "";
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-2deg);
  width: 70vmin;
  height: 70vmin;
  aopacity: 0.5;
  mix-blend-mode: multiply;
  backdrop-filter: opacity(0.5) blur(0.5vmin);
  pointer-events: none;
  background-image:
    /* eye */
    radial-gradient(black 60%, transparent 0),
    radial-gradient(#de3 0%, transparent 90%),
    radial-gradient(greenyellow 60%, transparent 0),
    /* head */
    radial-gradient(farthest-side at 50% 100%, transparent 99.99%, transparent 0),
    radial-gradient(farthest-side at 100% 100%, lime 99.99%, transparent 0),
    /* body */
    radial-gradient(farthest-side at 0% 50%, lime 99.99%, transparent 0),
    radial-gradient(farthest-side at 100% 50%, lime 99.99%, transparent 0),
    radial-gradient(farthest-side at 0% 50%, greenyellow 99.99%, transparent 0),
    radial-gradient(farthest-side at 100% 50%, greenyellow 99.99%, transparent 0),
    radial-gradient(farthest-side at 100% 100%, greenyellow 99.99%, transparent 0),
    radial-gradient(farthest-side at 0% 50%, lime 99.99%, transparent 0)
    
    ;
  background-size: 
    /* eye */
    1.5vmin 1.5vmin, 
    3vmin 3vmin, 
    10vmin 10vmin,
    /* head */
    50vmin 0.5vmin,
    23vmin 22vmin,
    /* body */ 
    2.5vmin 5vmin,
    4vmin 8vmin,
    6vmin 12vmin,
    10vmin 20vmin,
    40.25vmin 20vmin,
    20vmin 40vmin
    ;
  background-position: 
    /* eye */
    var(--x) var(--y), 
    calc(var(--x) - 0.75vmin) calc(var(--y) - 0.75vmin), 
    5vmin 18vmin,
    /* head */
    0 34.5vmin,
    0 13vmin,
    /* body */
    50vmin 39vmin,
    46.125vmin 39vmin,
    50vmin 35vmin,
    40.125vmin 35vmin,
    10vmin 15vmin,
    50vmin 15vmin
    
    ;
  background-repeat: no-repeat;
  z-index: -1;
}