<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.