JSFiddle - React, Tailwind, and code Playground

by Anshul Pandey

HTML

<div class="outer">
<div class="parta">

</div>
<div class="partb">

</div>
<div class="partc">

</div>
</div>

CSS

.outer{
width:600px;
height:300px;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
margin: 100px auto;
position:relative;
}
.parta,.partb,.partc{
 background: #aaa;
 height:2px;
 width:0;
 position:absolute;
 left:0;
 top:200px;
 transform: rotate(-30deg);
 transform-origin:0 0;
 animation: 3.6s parta infinite;
}
.partb{
  top:100px;
  left:174px;
  transform: rotate(40deg);
  animation: 3.6s partb infinite;
}
.partc{
    top: 230px;
    left: 326px;
  transform: rotate(-50deg);
  animation: 3.6s partc infinite;
}
@keyframes parta {
  0% {  
        width:0;
  }
  33% {
        width:200px;
  }
  66% {
        width:200px;
  }
  99% {
        width:200px;
  }
  100%{
        width:0;
  }
}
@keyframes partb {
  0% {  
        width:0;
  }
  33% {
        width:0;
  }
  66% {
        width:200px;
  }
  99% {
        width:200px;
  }
  100%{
        width:0;
  }
}
@keyframes partc {
  0% {  
        width:0;
  }
  33% {
        width:0;
  }
  66% {
        width:0;
  }
  99% {
        width:400px;
  }
  100%{
        width:0;
  }
}