<div class="nature-1"></div>
<div class="nature-2"></div>
<div class="nature-3"></div>
<div class="nature-4"></div>
<div class="nature-5"></div>
<div class="nature-6"></div>
<div class="nature-7"></div>
<div class="nature-8"></div>
<div class="nature-9"></div>
<div class="nature-10"></div>

.nature-1 {
  width:50px;
  height:50px;
  background: #ffd738;
  border-radius: 50%;
  display: grid;
}
.nature-1::before,
.nature-1::after {
  content: "";
  grid-area: 1/1;
  background:inherit;
  clip-path: polygon(0 0,50% 40%,100% 0,60% 50%,100% 100%,50% 60%,0 100%,40% 50%);
  animation:n1 1s infinite alternate;
  transform:rotate(var(--r,0)) scale(1) 
}
.nature-1::after {
  --r:45deg; 
}

@keyframes n1 {
  100% {transform:rotate(var(--r,0)) scale(1.4) }
}


.nature-2 {
  width: 60px;
  height: 60px;
  display: grid;
  border-radius: 50%;
  background:radial-gradient(circle 15px, #ffd738 90%,#0000 );
  filter:drop-shadow(0px 0px 1px #ffd738);
  animation:n2 1s infinite alternate linear;
}

.nature-2::before, 
.nature-2::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: 
      linear-gradient(#ffd738 0 0) center/100% 5px,
      linear-gradient(#ffd738 0 0) center/5px 100%;
  background-repeat: no-repeat;
  -webkit-mask: radial-gradient(farthest-side,#0000 60%,#000 61%);
}
.nature-2::after {
    transform: rotate(45deg);
}

@keyframes n2 {
  100% {filter:drop-shadow(0px 0px 20px #ffd738)}
}

.nature-3 {
  width:50px;
  height:50px;
  display: flex;
  filter:drop-shadow(0px 0px 1px #8d847f);
  animation:n3 1s infinite alternate linear;
}
.nature-3:before {
  content: "";
  flex: 1;
  background: #8d847f;
  border-radius: 50%;
  -webkit-mask:radial-gradient(circle closest-side at 66% 40%,#0000 115%,#000 118%);
}

@keyframes n3 {
  100% {filter:drop-shadow(0px 0px 20px #8d847f)}
}


.nature-4 {
  width:50px;
  height:50px;
  background-color:#8d847f;
  border-radius: 50%;
  animation:n4 3s infinite;
}

@keyframes n4 {
  12.5% {background-image:radial-gradient(80% 65% at left, #0000 94%,#fff9)}
  25%   {background-image:linear-gradient(90deg,#0000 50%,#fff9 0)}
  37.5% {background-image:radial-gradient(80% 65% at right,#fff9 94%,#0000)}
  50%   {background-image:linear-gradient(#fff9 0 0)}
  62.5% {background-image:radial-gradient(80% 65% at left, #fff9 94%,#0000)}
  75%   {background-image:linear-gradient(-90deg,#0000 50%,#fff9 0)}
  87.5% {background-image:radial-gradient(80% 65% at right,#0000 94%,#fff9)}
}

.nature-5 {
  width:80px;
  height:40px;
  border-radius: 100px 100px 0 0;
  position: relative;
  overflow: hidden;
}
.nature-5:before {
  content: "";
  position: absolute;
  inset:0 0 -100%;
  background: 
    radial-gradient(farthest-side,#ffd738 80%,#0000) left 70% top    20%/15px 15px,
    radial-gradient(farthest-side,#020308 92%,#0000) left 65% bottom 19%/12px 12px,
    radial-gradient(farthest-side,#ecfefe 92%,#0000) left 70% bottom 20%/15px 15px,
    linear-gradient(#9eddfe 50%,#020308 0);
  background-repeat: no-repeat;
  animation:n5 2s infinite;
}

@keyframes n5 {
  0%,20%   {transform: rotate(0)}
  40%,60%  {transform: rotate(.5turn)}
  80%,100% {transform: rotate(1turn)}
}

.nature-6 {
  width:80px;
  height:40px;
  border-radius: 100px 100px 0 0;
  background: 
    linear-gradient(0deg, #0000,#fff,#0000) 70% 30%,    
    linear-gradient(90deg,#0000,#fff,#0000) 72% 32%,
    linear-gradient(0deg, #0000,#fff,#0000) 26% 42%,    
    linear-gradient(90deg,#0000,#fff,#0000) 23% 44%,
    linear-gradient(0deg, #0000,#fff,#0000) 51% 54%,    
    linear-gradient(90deg,#0000,#fff,#0000) 51% 53% 
    #020308;
  background-size: 2px 10px,10px 2px;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.nature-6:before,
.nature-6:after {
  content: "";
  position: absolute;
  inset:100% auto auto 20px;
  height: 3px;
  width: 20px;
  background:linear-gradient(90deg,#0000,#fff);
  transform-origin: right;
  transform: rotate(-20deg) translate(-20px);
  animation:n6 2s infinite;
}

.nature-6:after {
  inset:100% auto auto -5px;
  animation-delay: .75s;
}

@keyframes n6 {
  100% {transform: rotate(-20deg) translate(120px)}
}

.nature-7 {
  width:80px;
  height:40px;
  background:
    radial-gradient(circle 11px at top,#0000 94%,#b0e5f3) 0 20px,
    radial-gradient(circle 11px at top,#0000 94%,#5dc1e4) 0 10px,
    radial-gradient(circle 11px at top,#0000 94%,#008cd9) 0 0   ;
  background-size:20px 100%;
  background-repeat: repeat-x;
  animation:n7 1s infinite linear;
}

@keyframes n7 {
  50%  {background-position: 10px 15px,-10px 12px,15px 8px}
  100% {background-position: 20px 20px,-20px 10px,20px 0px}
}

.nature-8 {
  width:100px;
  height:50px;
  border-radius: 100px 100px 0 0;
  position: relative;
  overflow: hidden;
}
.nature-8:before {
  content: "";
  position: absolute;
  inset:0 0 -100%;
  background: radial-gradient(farthest-side at top,#0000 35%,#aa47be,#039be6,#26c6dc,#459e44,#f9ec44,#f68524,#fa3536,#0000) bottom/100% 50% no-repeat;
  animation:n8 2s infinite;
}

@keyframes n8 {
  0%,20%   {transform: rotate(0)}
  40%,60%  {transform: rotate(.5turn)}
  80%,100% {transform: rotate(1turn)}
}


.nature-9 {
  width: 80px;
  height: 40px;
  background:  #4dbefa;
  position: relative;
  overflow:hidden;
  animation:n9-0 1.5s infinite steps(10);
}
.nature-9:before,
.nature-9:after{
  content:"";
  position:absolute;
  inset:-50%;
  --rad: radial-gradient(1px 4px,#eee 92%,#0000);
  background: var(--rad) 20% 0, var(--rad) 70% 7%;
  background-size: var(--w,20px) var(--h,18px);
  animation:n9-1 0.2s linear infinite;
  transform:skew(-10deg);
}
.nature-9:after {
   --h: 12px;
   --w: 16px;
   animation-duration: 0.3s;
}

@keyframes n9-0{
  0%,15%,20%,30%,100% {background:#4dbefa}
  10%,22% {background:#7accf7}
}


@keyframes n9-1{
  100% {transform:skew(-10deg) translateY(var(--h,18px))}
}


.nature-10 {
  width: 80px;
  height: 40px;
  background:
    radial-gradient(circle 25px at top right, #ffd738 40%,#0000 ),
    #4dbefa;
  position: relative;
  overflow:hidden;
}
.nature-10:before,
.nature-10:after{
  content:"";
  position:absolute;
  top:4px;
  left:-40px;
  width:36px;
  height:20px;
  --c: radial-gradient(farthest-side,#fff 96%,#0000);
  background: 
    var(--c) 100% 100% /30% 60%, 
    var(--c) 70% 0 /50% 100%, 
    var(--c) 0 100% /36% 68%, 
    var(--c) 27% 18% /26% 40%,
    linear-gradient(#fff 0 0) bottom/67% 58%;
  background-repeat: no-repeat;
  animation:n10 2s linear infinite;
}
.nature-10:after {
   top:15px;
   --l:200%;
}

@keyframes n10{
  100% {left:var(--l,105%)}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}


* {
  box-sizing: border-box;
}