/* Taken from https://www.demo2s.com/html-css/css-flowing-circuit-animation.html */

html, body {
   height:100%;
   padding:0;
   margin:0;
}

* {
   box-sizing:border-box;
}

.circuit-outer {
   position:relative;
   width:80vw;
   height:80vh;
   margin:5% 10% 0;
   padding:3px;
   background:#eee;
   /* border:1px solid #ddd; */
   border:1px solid red;
   overflow:hidden;
}

.circuit-inner {
   position:absolute;
   top:3px;
   bottom:3px;
   left:3px;
   right:3px;
   background:#fff;
   /* border:1px solid #ddd; */
   border:1px solid blue;
}

.current {
   background:orange;
   position:absolute;
   animation-iteration-count:1;
   animation-timing-function:linear;
   animation-fill-mode:forwards;
}

.current.bottom-left {
   bottom:0;
   right:80%;
   width:20%;
   height:3px;
   animation-name:zap1;
   animation-duration:.2s;
}

.current.left {
   bottom:0;
   left:0;
   width:3px;
   height:0;
   animation-name:zap2;
   animation-delay:.2s;
   animation-duration:.5s;
}

.current.top {
   top:0;
   width:0;
   height:3px;
   animation-name:zap3;
   animation-delay:.7s;
   animation-duration:1s;
}

.current.right {
   top:0;
   right:0;
   width:3px;
   height:0;
   animation-name:zap2;
   animation-delay:1.7s;
   animation-duration:.5s;
}

.current.bottom-right {
   bottom:0;
   right:0;
   width:0%;
   height:3px;
   animation-name:zap4;
   animation-delay:2.2s;
   animation-duration:.8s;
}

@keyframes zap1  {
   0% {
      width:0;
   }

   100% {
      width:20%;
   }

}

@keyframes zap2  {
   0% {
      height:0;
   }

   100% {
      height:100%;
   }

}

@keyframes zap3  {
   0% {
      width:0;
   }

   100% {
      width:100%;
   }

}

@keyframes zap4  {
   0% {
      width:0;
   }

   100% {
      width:80%;
    }
}