body {
  background: linear-gradient(to bottom, white, #999);
  margin: 0;
  overflow: hidden;
  padding:20vh;
  height: 100vh;
}
.dark {
  background:#111;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
}
svg {
  height: 50vh;
  width: 50vw;
  position:absolute;  
  transform-origin:bottom center;
  left:-5vw;
  bottom:20vh;
  transform:scale(.5);
}
svg:nth-child(4) {
  left:10vw;
  bottom:20vh;
}
svg:nth-child(5) {
  left:25vw;
  bottom:20vh;
  z-index:2;
}
svg:nth-child(6) {
  left:40vw;
  bottom:20vh;
  z-index:1;
}
svg:nth-child(7) {
  left:55vw;
  bottom:20vh;
}

svg path:nth-child(odd) {
  transform: rotate(2deg);
  transform-origin: center center;  
}

.cls-1 {
  fill: #4ba11f;
}
.cls-2 {
  fill: #5db32b;
}
.cls-3 {
  fill: #96c12a;
}
.cls-4 {
  fill: #87c827;
}
.cls-5 {
  fill: #468d21;
}
.cls-6 {
  fill: #629927;
}
.cls-7 {
  fill: #619428;
}
.cls-8 {
  fill: #80bd2c;
}
.cls-9 {
  fill: #8eca32;
}
.cls-10 {
  fill: #7fbf35;
}
.cls-11 {
  fill: #aec355;
}
.cls-12 {
  fill: #839e4c;
}
.cls-13 {
  fill: #66a429;
}
.cls-14 {
  fill: #a2ce2c;
}
.cls-15 {
  fill: #a6c944;
}
.cls-16 {
  fill: #bac768;
}
.cls-17 {
  fill: #cae229;
}
.cls-18 {
  fill: #bfda42;
}
.cls-19 {
  fill: #eaeda0;
}
.cls-20 {
  fill: #f2f5a5;
}
.cls-21 {
  fill: #bedb25;
}
.cls-22 {
  fill: #cbe21f;
}
.cls-23 {
  fill: #92bb30;
}
.cls-24 {
  fill: #a5d124;
}
.cls-25 {
  fill: #a1d423;
}
.cls-26 {
  fill: #d7ec57;
}
.cls-27 {
  fill: #72ac21;
}
.cls-28 {
  fill: #74be21;
}
.cls-29 {
  fill: #5ab225;
}
.cls-30 {
  fill: #6cbb26;
}
.cls-31 {
  fill: #4aa927;
}
.cls-32 {
  fill: #74bc22;
}
.cls-33 {
  fill: #67a429;
}
.cls-34 {
  fill: #67b426;
}
.cls-35 {
  fill: #61b325;
}
.cls-36 {
  fill: #74aa18;
}
.cls-37 {
  fill: #6da222;
}
.cls-38 {
  fill: #419d29;
}
.cls-39 {
  fill: #68b51f;
}
.cls-40 {
  fill: #50a021;
}
.cls-41 {
  fill: #56a421;
}
.cls-42 {
  fill: #007d33;
}
.cls-43 {
  fill: #117031;
}
.cls-44 {
  fill: #258d2c;
}
.cls-45 {
  fill: #7baf16;
}
.cls-46 {
  fill: #76b221;
}
.cls-47 {
  fill: #688d21;
}
.cls-48 {
  fill: #a7c810;
}
.cls-49 {
  fill: #69981e;
}
.cls-50 {
  fill: #3ca42f;
}
.cls-51 {
  fill: #179232;
}
.cls-52 {
  fill: #127331;
}
.cls-53 {
  fill: #6fb121;
}
.cls-54 {
  fill: #509c24;
}
.cls-55 {
  fill: #389829;
}
.cls-56 {
  fill: #72be29;
}
.cls-57 {
  fill: #69ab36;
}
.cls-58 {
  fill: #0e521e;
}
.cls-59 {
  fill: #115b22;
}
.cls-60 {
  fill: #3a8b3a;
}
.cls-61 {
  fill: #0c6326;
}
.cls-62 {
  fill: #106926;
}
.cls-63 {
  fill: #388e26;
}
.cls-64 {
  fill: #0f5f2b;
}
.cls-65 {
  fill: #00682a;
}
.cls-66 {
  fill: #077c31;
}
.cls-67 {
  fill: #008837;
}
.cls-68 {
  fill: #127130;
}
.cls-69 {
  fill: #005321;
}
.cls-70 {
  fill: #2e812b;
}
.cls-71 {
  fill: #618940;
}
.cls-72 {
  fill: #4c802e;
}
.cls-73 {
  fill: #11531d;
}
.cls-74 {
  fill: #27792f;
}
.cls-75 {
  fill: #005723;
}
.cls-76 {
  fill: #316b1e;
}
.cls-77 {
  fill: #255d1b;
}
.cls-78 {
  fill: #015f26;
}
.cls-79 {
  fill: #105526;
}
.cls-80 {
  fill: #1e7227;
}
.cls-81 {
  fill: #79af1a;
}
.cls-82 {
  fill: #007730;
}
.cls-83 {
  fill: #399f2b;
}
.cls-84 {
  fill: #2b8c28;
}
.cls-85 {
  fill: #156e29;
}
.cls-86 {
  fill: #10642a;
}
.cls-87 {
  fill: #188132;
}
.cls-88 {
  fill: #23912e;
}
.cls-89 {
  fill: #449928;
}
.cls-90 {
  fill: #20782a;
}
.cls-91 {
  fill: #2c922d;
}
.cls-92 {
  fill: #49891f;
}
.cls-93 {
  fill: #42831e;
}
.cls-94 {
  fill: #4da626;
}
.cls-95 {
  fill: #0f5d20;
}
.cls-96 {
  fill: #53af25;
}
.cls-97 {
  fill: #9cb843;
}
.cls-98 {
  fill: #94c539;
}
.cls-99 {
  fill: #66a622;
}
.cls-100 {
  fill: #85c730;
}
.cls-101 {
  fill: #50ac26;
}
.cls-102 {
  fill: #63b023;
}
.cls-103 {
  fill: #73be23;
}
.cls-104 {
  fill: #aad941;
}
.cls-105 {
  fill: #c6e56d;
}
.cls-106 {
  fill: #94ba3d;
}
.cls-107 {
  fill: #6db023;
}
.cls-108 {
  fill: #5aa921;
}
.cls-109 {
  fill: #59a320;
}
.cls-110 {
  fill: #6ca826;
}
.cls-111 {
  fill: #88c12d;
}
.cls-112 {
  fill: #78c12a;
}
.cls-113 {
  fill: #aad241;
}
.cls-114 {
  fill: #edeecb;
}
.cls-115 {
  fill: #b8c480;
}
.cls-116 {
  fill: #bac56d;
}
.cls-117 {
  fill: #cee96b;
}
.cls-118 {
  fill: #8dc628;
}
.cls-119 {
  fill: #83c221;
}
.cls-120 {
  fill: #a3ba32;
}
.cls-121 {
  fill: #e2f35f;
}
.cls-122 {
  fill: #d8e859;
}
.cls-123 {
  fill: #abd92e;
}
.cls-124 {
  fill: #b3c92b;
}
.cls-125 {
  fill: #b3b874;
}
.cls-126 {
  fill: #afb94a;
}
.cls-127 {
  fill: #b1bd64;
}
.cls-128 {
  fill: #bac188;
}
.cls-129 {
  fill: #9cb657;
}
.cls-130 {
  fill: #aebf76;
}
.cls-131 {
  fill: #a2b952;
}
.cls-132 {
  fill: #7fab3b;
}
.cls-133 {
  fill: #125021;
}
.cls-134 {
  fill: #378c26;
}
.cls-135 {
  fill: #207a29;
}
.cls-136 {
  fill: #7c443b;
}
.cls-137 {
  fill: #003415;
}
.cls-138 {
  fill: #031e0d;
}
.cls-139 {
  fill: #260c09;
}
.cls-140 {
  fill: #5b1614;
}
.cls-141 {
  fill: #421f1c;
}
.cls-142 {
  fill: #3f7027;
}
.cls-143 {
  fill: #64a32b;
}
.cls-144 {
  fill: #99b061;
}
.cls-145 {
  fill: #8f5549;
}
.cls-146 {
  fill: #511b19;
}
.cls-147 {
  fill: #260b0a;
}
.cls-148 {
  fill: #5b1a1c;
}
.cls-149 {
  fill: #512621;
}
.cls-150 {
  fill: #9b5d4c;
}
.cls-151 {
  fill: #451312;
}
.cls-152 {
  fill: #301612;
}
.cls-153 {
  fill: #541414;
}
.cls-154 {
  fill: #632e28;
}
.cls-155 {
  fill: #1c4416;
}
.cls-156 {
  fill: #2e5718;
}