How to generate a cool moving box border.

[Jia]

https://codepen.io/yuanchuan/pen/ePpGXP
I'm trying to change this to a square. But it becomes a line.

[Yuan Chuan]

Try

@grid: 8x1 / 400px;

--bg: #051626;
--shape: @shape(points:4; rotate:45);
--c: @pd(#78E7D4, #E3383F, #EFF4DD, #F2A341);
--s: 4px;

@size: calc(100% - 3%*@i);
@place: center;
clip-path: @p(--shape);

:after {
  content: '';
  @size: calc(100% - @p(--s));
  clip-path: @p(--shape);
  background: var(--bg);
}

:before {
  content: '';
  position: absolute;
  @size: 200%;
  background: conic-gradient(
    @p(--c) @p(10%, 40%), #fff0 0
  );
  animation: cycle @r(3s, 5s) linear infinite;
  animation-delay: @r(-8s);
}

@keyframes cycle {
  to { transform: rotate(1turn); }
}

[Jia]

Thanks.