<div role="img" aria-label="animated cartoon showing a surprised rabbit next to a finish line while a turtle passes it on a skateboard"></div>

body {
  background: skyblue;
  margin: 0;
  overflow: hidden;
}

div {
  --color: black;
  height: 100vh;
  width: 100vw;
  animation: surprise 2s infinite;
  background-image:
    /* eyes */
    radial-gradient(white 50%, transparent 0),
    radial-gradient(white 50%, transparent 0),
    radial-gradient(ellipse 80% 100%, black 50%, transparent 0),
    radial-gradient(ellipse 80% 100%, black 50%, transparent 0),
    /* nose and cheeks */
    radial-gradient(ellipse 80% 60%, black 50%, transparent 0),
    radial-gradient(ellipse, pink 50%, transparent 0),
    radial-gradient(ellipse, pink 50%, transparent 0),
    /* mouth */
    radial-gradient(at 50% 70%, white 50%, transparent 0),
    radial-gradient(at 50% 70%, black 50%, transparent 0),
    /* head */
    radial-gradient(ellipse 60% 50%, white 80%, transparent 0),
    /* legs */ 
    radial-gradient(ellipse 60% 30% at 50% 80%, white 80%, transparent 0),
    radial-gradient(ellipse 60% 30% at 50% 80%, white 80%, transparent 0),
    /* body */
    radial-gradient(ellipse 40% 60% at 50% 80%, #ddd 40%, white 0 99.9%, transparent 0),
    /* ears */
    radial-gradient(ellipse at 90% 50%, pink 50%, transparent 0),
    radial-gradient(ellipse at 85% 50%, white 50%, transparent 0),
    radial-gradient(ellipse at 10% 50%, pink 50%, transparent 0),
    radial-gradient(ellipse at 0 50%, white 50%, transparent 0),
    /* surprise lines */
    radial-gradient(circle at 0% 100%, skyblue 20%, transparent 0),
    conic-gradient(at 0% 100%, transparent 25deg, var(--color) 0 30deg, transparent 0 44deg, var(--color) 0 49deg, transparent 0 65deg, var(--color) 0 70deg, transparent 0)
    ;
  background-position:
    /* eyes */
    calc(70vw + 3.75vh) 79.125vh, calc(70vw + 6.25vh) 79.125vh, calc(70vw + 3vh) 79vh, calc(70vw + 5.5vh) 79vh,
    /* nose and cheeks*/
    calc(70vw + 4.4vh) 80.5vh,
    calc(70vw + 2vh) 80.5vh,
    calc(70vw + 6vh) 80.5vh,
    /* mouth */
    calc(70vw + 3vh) 81.9vh,
    calc(70vw + 3.5vh) 81.75vh,
    /* head */
    70vw 75vh,
    /* legs */
    calc(70vw - 3vh) 90.5vh, calc(70vw + 8vh) 90.5vh,
    /* body */
    70.125vw 80vh,
    /* ears */
    calc(70vw + 1.825vh) 68.5vh,
    calc(70vw + 0.75vh) 67vh,
    calc(70vw + 5.825vh) 68vh,
    calc(70vw + 5.33vh) 66.5vh,
    /* surprise lines */
    calc(70vw + 9vh) 72vh,
    calc(70vw + 9vh) 72vh
    ;
  background-size:
    /* eyes */
    0.5vh 0.5vh, 0.5vh 0.5vh, 1.5vh 1.5vh, 1.5vh 1.5vh, 
    /* nose and cheeks*/
    1.5vh 1.25vh,
    2vh 1.4vh,
    2vh 1.4vh,
    /* mouth */
    4vh 4vh,
    3vh 3vh,
    /* head */
    10vh 10vh,
    /* legs */
    5vh 4vh, 5vh 4vh,
    /* body */
    9.75vh 15vh,
    /* ears */
    2.5vh 10vh,
    4vh 12vh,
    2.5vh 11vh,
    4.25vh 13vh,
    /* surprise lines */
    5vh 5vh,
    5vh 5vh
    ;
  background-repeat: no-repeat;
}

div::after {
  content: "META";
  display: block;
  position: absolute;
  font-size: 3vmin;
  font-family: Arial, Arial, Helvetica, sans-serif;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 64vh;
  padding-left: 17vw;
  background-image:
    radial-gradient(circle at 80% 20%, yellow 8vh, transparent 15vh),
    /* grass */
    linear-gradient(transparent 95vh, seagreen 0 97vh, green),
    conic-gradient(transparent 175deg, seagreen 0 185deg, transparent 0),
    conic-gradient(transparent 160deg, seagreen 0 176deg, transparent 0),
    conic-gradient(transparent 175deg, seagreen 0 185deg, transparent 0),
    conic-gradient(transparent 180deg, seagreen 0 190deg, transparent 0),
    conic-gradient(transparent 185deg, seagreen 0 195deg, transparent 0),
    conic-gradient(transparent 160deg, seagreen 0 176deg, transparent 0),
    conic-gradient(transparent 175deg, green 0 185deg, transparent 0),
    conic-gradient(transparent 180deg, seagreen 0 190deg, transparent 0),
    conic-gradient(transparent 185deg, seagreen 0 195deg, transparent 0),
    conic-gradient(transparent 170deg, seagreen 0 190deg, transparent 0),
    /* finish line */
    linear-gradient(indianred 75%, brown 85%),
    linear-gradient(3deg, transparent 15%, white 15% 85%, transparent 0),
    linear-gradient(indianred 72%, brown 82%)
    ;
  background-repeat:
    no-repeat,
    /* grass */
    no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x,
    /* finish line */
    no-repeat, no-repeat, no-repeat
    ;
  background-position:
    left top,
    /* grass */
    left top, right 90vh, left 90vh, left 89.5vh, left 90vh, left 90.5vh, left 91vh, left 89.5vh, left 90vh, left 91.5vh, left 91vh,
    /* finish line */
    5vw 60vh, 5.5vw 60vh, 35vw 61.25vh
    ;
  background-size:
    100% 100%,
    /* grass */
    100% 100%, 0.4% 7%, 2.5% 5%, 1.5% 6%, 4% 5%, 1% 5%, 3.3% 5%, 1.25% 7%, 2.2% 8%, 1.35% 5%, 0.25% 5%,
    /* finish line */
    1vw 40%, 30vw 10%, 1vw 40%
    ;
}

@keyframes surprise {
  0%, 100% { --color: black; }
  50% { --color: transparent; }
}

@keyframes quick {
  0% { left: 110vw; }
  100% { left: calc(-110vw - 25vh); }
}

@media (prefers-reduced-motion) {
  div, div::before {
    animation: none !important;
  }
}

div::before {
  animation: quick 3s 1;
  animation-fill-mode: forwards;
  content: "";
  display: block;
  position: absolute;
  top: 77.5vh;
  left: 37vw;
  width: 25vh;
  height: 17vh;
  background-image:
    linear-gradient(black, black),
    /* skateboard */
    radial-gradient(circle at 100% 0%, indianred 1vh, transparent 0),
    linear-gradient(transparent 13vh, indianred 0 14vh, transparent 0),
    radial-gradient(closest-side, black 50%, orange 0 99.9%, transparent 0),
    radial-gradient(closest-side, black 50%, orange 0 99.9%, transparent 0),
    /* shell */
    repeating-linear-gradient(to right, transparent 0 11%, goldenrod 0 12%),
    repeating-linear-gradient(goldenrod 0 2%, transparent 0 50%),
    radial-gradient(ellipse 100% 150% at 50% 100%, olive 50%, transparent 0),
    conic-gradient(at 100% 100%, transparent 280deg, darkgreen 0 300deg, transparent 0),
    
    /* neck and head */
    radial-gradient(closest-side, white 99.9%, transparent 0),
    radial-gradient(closest-side, black 99.9%, transparent 0),
    radial-gradient(at 50% 60%, green 50%, transparent 0),
    radial-gradient(at 50% 60%, black 50%, transparent 0),
    radial-gradient(closest-side, green 99.9%, transparent 0),
    linear-gradient(255deg, green 60%, transparent 0),
    radial-gradient(ellipse at 50% 0%, green 50%, transparent 0),
    
    /* legs */
    radial-gradient(closest-side, green 99.9%, transparent 0),
    radial-gradient(closest-side, darkgreen 99.9%, transparent 0),
    radial-gradient(closest-side, green 99.9%, transparent 0),
    radial-gradient(closest-side, darkgreen 99.9%, transparent 0),
    /* rocket */
    linear-gradient(red, red),
    radial-gradient(100% 100%, red 50%, transparent 0),
    radial-gradient(100% 100%, yellow 50%, transparent 0),
    radial-gradient(100% 100%, orange 50%, transparent 0)
    ;
  background-position:
    15vh 0,
    /* skateboard */
    0vh 13vh, top right, 25% bottom, 80% bottom,
    /* shell */
    8vh 8vh, 8vh 8vh, 8vh top, 22vh 8.5vh,
    /* neck and head */
    4.5vh 5.25vh, 4.25vh 5vh, 5vh 6.25vh, 5.25vh 6.5vh, 3.75vh 4vh, 3.75vh 6vh, 5vh 10vh,
    /* legs */
    10vh 9vh, 8.5vh 9vh, 19.5vh 9vh, 18vh 9vh,
    /* rocket */
    11.25vh 0, 10vh 0vh, 20vh 0.75vh, 20vh 0.25vh
    ;
  background-size:
  2vh 10vh,
    /* skateboard */
    1vh 1vh, 24vh 17vh, 3vh 3vh, 3vh 3vh,
    /* shell */
    15vh 2vh, 15vh 2vh, 15vh 10vh, 2vh 2vh,
    /* neck and head */
    0.5vh 0.5vh, 1.25vh 1.5vh, 2vh 1.25vh, 2vh 1.25vh, 4.25vh 4vh, 4.25vh 4vh, 6vh 2vh,
    /* legs */
    3vh 4vh, 3vh 4vh, 3vh 4vh, 3vh 4vh,
    /* rocket */
    10vh 2.5vh, 2.5vh 2.5vh, 2.5vh 1vh, 4vh 2vh
    ;
  background-repeat: no-repeat;
}