.flow-line{position:relative;width:200px;height:200px}.flow-line .square{width:100%;height:100%;position:absolute}.flow-line .square span{position:absolute;inset:10px;overflow:hidden;transform:rotate(calc(90deg * var(--i)))}.flow-line .square span::before{content:"";position:absolute;width:100%;height:4px;background-color:#0f0;transform:translateX(-100%);animation:animateFlow 4s linear infinite;animation-delay:calc(1s * var(--i))}@keyframes animateFlow{0%{transform:translateX(-100%)}100%,50%{transform:translateX(100%)}}.flow-line .square::before{content:"";position:absolute;width:20px;height:20px;background-color:#0f0;box-shadow:0 0 0 8px rgba(0,255,0,.2),0 0 0 15px rgba(0,255,0,.0666666667);animation:animateSquare 4s linear infinite}.flow-line .square:nth-child(2){transform:translate(-25%,-25%) rotateX(180deg);filter:hue-rotate(60deg)}.flow-line .square:nth-child(3){transform:translate(25%,25%) rotate(180deg);filter:hue-rotate(180deg)}.flow-line .square:nth-child(4){transform:translate(50%,50%) rotate(360deg);filter:hue-rotate(270deg)}@keyframes animateSquare{0%{transform:translate(2px,2px)}25%{transform:translate(178px,2px)}50%{transform:translate(178px,178px)}75%{transform:translate(2px,178px)}100%{transform:translate(2px,2px)}}