<div></div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  --sz: 5px; /*** size ***/
  --sp: 10s; /*** speed ***/
  --b1: #3c3532;
  --b2: #1c1b18;
  --b3: #0c0b0a;
  --b4: #0c0b0ae0;
  --c1: #e399ff;
  --ts: 50%/calc(var(--sz) * 17.5) calc(var(--sz) * 29.5);
}

div {
  height: 100vh;
  background:
    /* black shadows */
    radial-gradient(circle at 50% 50%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
    radial-gradient(circle at 0% 0%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
    radial-gradient(circle at 0% 100%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
    radial-gradient(circle at 100% 0%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
    radial-gradient(circle at 100% 100%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
    /* border bottom */
    conic-gradient(from 90deg at 97.5% 67%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts), /*repeated*/
    conic-gradient(from 90deg at 97.5% 67%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts),
    conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%) var(--ts), 
    /* border top */
    conic-gradient(from 270deg at 2.5% 33%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts), /*repeated*/
    conic-gradient(from 270deg at 2.5% 33%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts),
    conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%) var(--ts),
    /* bottom */
    conic-gradient(from 116.5deg at 50% 85.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from 116.5deg at 50% 85.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from 116.5deg at 50% 85.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts),
    conic-gradient(from 120deg at 50% 83%, var(--c1) 0 120deg, #fff0 0 100%) var(--ts),
    /* top */
    conic-gradient(from -63.5deg at 50% 14.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from -63.5deg at 50% 14.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from -63.5deg at 50% 14.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts),
    conic-gradient(from -60deg at 50% 17%, var(--c1) 0 120deg, #fff0 0 100%) var(--ts),
    /* central gradient */
    conic-gradient(
      from 0deg at 50% 50%, #fff0 0 2deg, 
      var(--b2) 2.5deg 57.5deg, 
      #fff0 58deg 62.5deg, 
      var(--b1) 63deg 117.5deg, 
      #fff0 118deg 122.5deg, 
      var(--b3) 123deg 177.5deg, 
      #fff0 178deg 182deg, 
      var(--b2) 182.5deg 237.5deg, 
      #fff0 0 242.5deg, 
      var(--b1) 243deg 297.5deg, 
      #fff0 298deg 302.5deg, 
      var(--b3) 303deg 357.5deg,
      #fff0 358deg 360deg
    ) var(--ts),
    /* bg */
    var(--c1);
  animation: colors var(--sp) linear 0s infinite;
}

@keyframes colors {
  100% { filter: hue-rotate(360deg); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.