<div></div>
div {
  --yellow: #ee0;
  --red: red;
  --grass: #3cb371;
  --grass-dark: #2ba260;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background:
    linear-gradient(to right, var(--grass) calc(50% - 2vmin), var(--yellow) 0 calc(50% + 2vmin), var(--grass) 0) 0 100% / 100% 95vmin,
    linear-gradient(to right, limegreen, limegreen) 50% calc(100% - 95vmin) / 7vmin 45vmin,
    radial-gradient(closest-side, limegreen 99.9%, transparent) 50% calc(100% - 137vmin) / 7vmin 7vmin,
    linear-gradient(to right, LawnGreen, LawnGreen) calc(50% + 6vmin) calc(100% - 85vmin) / 7vmin 45vmin,
    radial-gradient(closest-side, LawnGreen 99.9%, transparent) calc(50% + 6vmin)calc(100% - 127vmin) / 7vmin 7vmin,
    linear-gradient(to right, lime, lime) calc(50% + 12vmin) calc(100% - 78vmin) / 7vmin 45vmin,
    radial-gradient(closest-side, lime 99.9%, transparent) calc(50% + 12vmin)calc(100% - 120vmin) / 7vmin 7vmin,
    linear-gradient(to right, lime, lime) calc(50% - 5vmin) calc(100% - 88vmin) / 7vmin 45vmin,
    radial-gradient(closest-side, lime 99.9%, transparent) calc(50% - 5vmin) calc(100% - 130vmin) / 7vmin 7vmin,
    linear-gradient(to right, LawnGreen, LawnGreen) calc(50% - 11vmin) calc(100% - 83vmin) / 7vmin 45vmin,
    radial-gradient(closest-side, LawnGreen 99.9%, transparent) calc(50% - 11vmin) calc(100% - 125vmin) / 7vmin 7vmin,
    radial-gradient(closest-side, transparent 70%, #fffa 0, transparent 99%) 50% calc(100% - 100vmin) / 60vmin 60vmin,
    
    radial-gradient(farthest-side at 50% 100%, #69c 99.9%, transparent 0) 70% calc(100% - 205vmin) / 10vmin 5vmin,
    conic-gradient(at 50% 140%, #69c 20deg, transparent 0 340deg, #69c 0) 70% calc(100% - 195.25vmin) / 10vmin 10vmin,
    linear-gradient(#69c, #69c) calc(70% - 1.33vmin) calc(100% - 191vmin) / 3vmin 3vmin
 
    ;
  background-repeat: no-repeat;
  background-color: #cef;
}

div::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: calc(100% - 80vmin);
  width: 150%;
  height: 90vmin;
  background: 
    linear-gradient(to right, var(--grass-dark) 70%, var(--yellow) 0 calc(70% + 4vmin), var(--grass-dark) 0);
  transform: translate(-50%, 0) rotate(-3deg)
}

div::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% - 70vmin);
  width: 100%;
  height: 80vmin;
  background:
    /* patch spacing bug :( */
    linear-gradient(var(--red), var(--red)) 39.75vmin 39vmin / 0.5vmin 2vmin,
    repeating-linear-gradient(var(--yellow) 0 4vmin, var(--grass) 0 8vmin) 39.875vmin 11vmin / 0.25vmin 28vmin,
    repeating-linear-gradient(var(--yellow) 0 4vmin, var(--grass) 0 8vmin) 39.875vmin 39vmin / 0.25vmin 28vmin,
    /* spiral */
    radial-gradient(farthest-side, var(--red) 99.9%, #0000 0) 39vmin 39vmin / 2vmin 2vmin,
    radial-gradient(farthest-side at 100% 50%, var(--yellow) 99.9%, #0000 0) 38vmin 39vmin / 2vmin 4vmin,
    radial-gradient(farthest-side at 100% 50%, var(--grass) 99.9%, #0000 0) 36vmin 39vmin / 4vmin 8vmin,
    radial-gradient(farthest-side at 0 50%, var(--yellow) 99.9%, #0000 0) 40vmin 35vmin / 4vmin 8vmin,
    radial-gradient(farthest-side at 0 50%, var(--grass) 99.9%, #0000 0) 40vmin 31vmin / 8vmin 16vmin,
    radial-gradient(farthest-side at 100% 50%, var(--yellow) 99.9%, #0000 0) 32vmin 35vmin / 8vmin 16vmin,
    radial-gradient(farthest-side at 100% 50%, var(--grass) 99.9%, #0000 0) 28vmin 31vmin / 12vmin 24vmin,
    radial-gradient(farthest-side at 0% 50%, var(--yellow) 99.9%, #0000 0) 40vmin 27vmin / 12vmin 24vmin,
    radial-gradient(farthest-side at 100% 50%, var(--yellow) 99.9%, #0000 0) 24vmin 27vmin / 16vmin 32vmin,
    radial-gradient(farthest-side at 0% 50%, var(--grass) 99.9%, #0000 0) 40vmin 23vmin / 16vmin 32vmin,
    radial-gradient(farthest-side at 100% 50%, var(--grass) 99.9%, #0000 0) 20vmin 23vmin / 20vmin 40vmin,
    radial-gradient(farthest-side at 0% 50%, var(--yellow) 99.9%, #0000 0) 40vmin 19vmin / 20vmin 40vmin,
    radial-gradient(farthest-side at 100% 50%, var(--yellow) 99.9%, #0000 0) 16vmin 19vmin / 24vmin 48vmin,
    radial-gradient(farthest-side at 0% 50%, var(--grass) 99.9%, #0000 0) 40vmin 15vmin / 24vmin 48vmin,
    radial-gradient(farthest-side at 100% 50%, var(--grass) 99.9%, #0000 0) 12vmin 15vmin / 28vmin 56vmin,
    radial-gradient(farthest-side at 0% 50%, var(--yellow) 99.9%, #0000 0) 40vmin 11vmin / 28vmin 56vmin,
    radial-gradient(farthest-side at 100% 0%, var(--grass) 99.9%, #0000 0) 29.25vmin 0 / 11vmin 11vmin,
    radial-gradient(farthest-side at 100% 0%, var(--yellow) 99.9%, #0000 0) 25vmin 0 / 15vmin 15vmin
    
    ;
  background-repeat: no-repeat;
  background-color: var(--grass);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.