<article class="hypnotic"></article>

body {
  background: #333;
}

@keyframes swing {
  0% { transform: rotate(-25deg); }
  100% { transform: rotate(25deg); }
}

.hypnotic {
  --s: 80vh;
  --r: 200px;
  height: var(--s);
  width: var(--s);
  position: absolute;
  top: 0;
  left: calc(50% - var(--s) / 2);
  transform-origin: 50% 0;
  animation: swing 2s alternate ease-in-out infinite;
  background:
    radial-gradient(circle at 50% calc(100% - var(--r) - 7px), #333 5px, #a90 0 10px, #0000 0),
    radial-gradient(farthest-side, #0000 30%, #dc1 0 55%, #0000 0) 50% 50% / 2.5% 6% repeat-y,
    radial-gradient(farthest-side, #0000 30%, #cb0 0 55%, #0000 0) 50% 53% / 2.5% 6% repeat-y;
}

@keyframes spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

.hypnotic::before {
  animation: spin 10s linear infinite;
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - var(--r) / 2);
  width: var(--r);
  height: var(--r);
  border-radius: 50%;
  background: 
    /* outer case */
    radial-gradient(farthest-side, #0000 90%, #0004 0, #0000 94%),
    radial-gradient(farthest-side, #0000 90%, #dc0 0, #a90),
    /* spiral */
    radial-gradient(farthest-side at 50% 100%, #fff 99.99%, #0000 0) 95px 95px / 10px 5px,
    radial-gradient(farthest-side at 50% 100%, #000 99.99%, #0000 0) 95px 90px / 20px 10px,
    radial-gradient(farthest-side at 50% 0%, #fff 99.99%, #0000 0) 85px 100px / 20px 10px,
    radial-gradient(farthest-side at 50% 0%, #000 99.99%, #0000 0) 75px 100px / 40px 20px,
    radial-gradient(farthest-side at 50% 100%, #fff 99.99%, #0000 0) 85px 80px / 40px 20px,
    radial-gradient(farthest-side at 50% 100%, #000 99.99%, #0000 0) 75px 70px / 60px 30px,
    radial-gradient(farthest-side at 50% 0%, #fff 99.99%, #0000 0) 65px 100px / 60px 30px,
    radial-gradient(farthest-side at 50% 0%, #000 99.99%, #0000 0) 55px 100px / 80px 40px,
    radial-gradient(farthest-side at 50% 100%, #fff 99.99%, #0000 0) 65px 60px / 80px 40px,
    radial-gradient(farthest-side at 50% 100%, #000 99.99%, #0000 0) 55px 50px / 100px 50px,
    radial-gradient(farthest-side at 50% 0%, #fff 99.99%, #0000 0) 45px 100px / 100px 50px,
    radial-gradient(farthest-side at 50% 0%, #000 99.99%, #0000 0) 35px 100px / 120px 60px,
    radial-gradient(farthest-side at 50% 100%, #fff 99.99%, #0000 0) 45px 40px / 120px 60px,
    radial-gradient(farthest-side at 50% 100%, #000 99.99%, #0000 0) 35px 30px / 140px 70px,
    radial-gradient(farthest-side at 50% 0%, #fff 99.99%, #0000 0) 25px 100px / 140px 70px,
    radial-gradient(farthest-side at 50% 0%, #000 99.99%, #0000 0) 15px 100px / 160px 80px,
    radial-gradient(farthest-side at 50% 100%, #fff 99.99%, #0000 0) 25px 20px / 160px 80px,
    radial-gradient(farthest-side at 50% 100%, #000 99.99%, #0000 0) 15px 10px / 180px 90px,
    radial-gradient(farthest-side at 50% 0%, #fff 99.99%, #0000 0) 5px 100px / 180px 90px,
    radial-gradient(farthest-side at 50% 0%, #000 99.99%, #0000 0) -5px 100px / 200px 100px,
    radial-gradient(farthest-side at 50% 100%, #fff 99.99%, #0000 0) 5px 0px / 200px 100px,
    radial-gradient(farthest-side at 50% 100%, #000 99.99%, #0000 0) -5px -0px / 220px 110px,
    #00f4;
  background-repeat: no-repeat;
}