.ray-container {
  position:absolute;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height:100%;
  width:100%;
}
.ray {
  position:absolute;
  width:100%;
  height:10px;
  background: -moz-linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(255, 255, 255,0.1) 50%,rgba(0, 0, 0,0) 100%);
  background: linear-gradient(to bottom, hsl(53.88deg 100% 61.57% / 29%) 0%,rgba(0, 0, 0,0) 100%);
  transform-origin:100% 50%;
}
.ray1 {
  transform: perspective(50px) rotateY(30deg);
}
.ray2 {
  transform: rotate(-10deg) perspective(50px) rotateY(30deg);  
}
.ray3 {
  transform: rotate(-20deg) perspective(50px) rotateY(30deg);
}
.ray4 {
  transform: rotate(-30deg) perspective(50px) rotateY(30deg);
}
.ray5 {
  transform: rotate(-40deg) perspective(50px) rotateY(30deg);  
}
.ray6 {
  transform: rotate(-50deg) perspective(50px) rotateY(30deg);
}
.ray7 {
  transform: rotate(-60deg) perspective(50px) rotateY(30deg);
}
.ray8 {
  transform: rotate(-70deg) perspective(50px) rotateY(30deg);  
}
.ray9 {
  transform: rotate(-80deg) perspective(50px) rotateY(30deg);
}

.ray10 {
  transform: rotate(10deg) perspective(50px) rotateY(30deg);  
}
.ray11 {
  transform: rotate(20deg) perspective(50px) rotateY(30deg);
}
.ray12 {
  transform: rotate(30deg) perspective(50px) rotateY(30deg);
}
.ray13 {
  transform: rotate(-90deg) perspective(50px) rotateY(30deg);  
}
.ray14 {
  transform: rotate(-100deg) perspective(50px) rotateY(30deg);
}
.ray14 {
  transform: rotate(-110deg) perspective(50px) rotateY(30deg);
}