.manga-lines {
  --center-x: 50%;
  --center-y: 50%;
  --size-x: 25%;
  --size-y: 25%;
  --speed: 1s;
  /*******/
  --end3: #0000, black 0.50deg 1.75deg, #0000 2.0deg;
  --end2: #0000, black 0.25deg 2.25deg, #0000 2.5deg;
  --end1: #0000, black 0.25deg 1.25deg, #0000 1.5deg;
  position: relative;
  
  &.slow {
    --speed: 1.5s;
  }
  
  &.fast {
    --speed: 0.75s;
  }
  
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  &::before {
    --x: 1.1;
    --y: 1.1;
    --space: 10deg;
    --from: 2deg;
    --width: 0.7deg;
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      repeating-conic-gradient(from calc(var(--from) * 1.75 * var(--x)) at var(--center-x) var(--center-y), #000 0 var(--width), #0000 0 var(--space)),
      repeating-conic-gradient(from var(--from) at var(--center-x) var(--center-y), #000 0 calc(var(--width) * var(--x)), #0000 0 calc(var(--space) * var(--y) * 2.5)),
      repeating-conic-gradient(from calc(var(--from) * 13) at var(--center-x) var(--center-y), #000 0 calc(var(--width) * var(--x)), #0000 0 calc(var(--space) * var(--y) * 2.5))
      ;
     
    mask: radial-gradient(calc(var(--size-x) * var(--x)) calc(var(--size-y) * var(--y)) at var(--center-x) var(--center-y), #f000 99%, #000);
    animation: moveAfter var(--speed) -0.33s infinite;
  }
  
  &::after {
    --x: 1.1;
    --y: 1.1;
    --space: 10deg;
    --from: 2deg;
    --width: 0.7deg;
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      repeating-conic-gradient(from var(--from) at var(--center-x) var(--center-y), #000 0 var(--width), #0000 0 var(--space)),
      repeating-conic-gradient(from var(--from) at var(--center-x) var(--center-y), #000 0 calc(var(--width) * var(--y)), #0000 0 calc(var(--space) * var(--x) * 2.5))
      ;
    mask: radial-gradient(calc(var(--size-x) * var(--x)) calc(var(--size-y) * var(--y)) at var(--center-x) var(--center-y), #f000 99%, #000);
    animation: moveAfter calc(var(--speed) * var(--x)) steps(10, start) infinite;
  }
}

@keyframes moveAfter {
    0% { --x: 1.1; --y: 1.1; --from:  5deg; --width: 0.7deg; --space: 10deg) }
   10% { --x: 1.2; --y: 1.3; --from:  2deg; --width: 0.8deg; --space: 11deg) }
   20% { --x: 1.0; --y: 1.1; --from:  4deg; --width: 0.6deg; --space: 13deg) }
   30% { --x: 1.1; --y: 1.2; --from:  2deg; --width: 0.3deg; --space: 10deg) }
   40% { --x: 0.9; --y: 1.0; --from: -1deg; --width: 0.9deg; --space: 13deg) }
   50% { --x: 1.1; --y: 1.0; --from:  2deg; --width: 1.0deg; --space: 11deg) }
   60% { --x: 1.2; --y: 0.9; --from:  3deg; --width: 0.7deg; --space: 10deg) }
   70% { --x: 1.1; --y: 1.0; --from: -2deg; --width: 0.8deg; --space:  9deg) }
   80% { --x: 1.1; --y: 0.9; --from:  5deg; --width: 0.5deg; --space: 10deg) }
   90% { --x: 1.0; --y: 1.0; --from:  9deg; --width: 0.6deg; --space: 11deg) }
  100% { --x: 0.9; --y: 1.1; --from:  7deg; --width: 0.7deg; --space: 10deg) }
}

@media (prefers-reduced-motion) {
  .manga-lines::before,
  .manga-lines::after {
    animation-play-state: paused;
  }
}


/** demo */
.cat {
  width: 400px;
  margin: 30px;
  aspect-ratio: 759 / 464;
  --center-x: 35%;
  --center-y: 47%;
  --size-x: 20%;
  --size-y: 33%;
}

.person {
  width: 400px;
  margin: 30px;
  aspect-ratio: 626 / 417;
  --center-x: 51%;
  --center-y: 46%;
  --size-x: 25%;
  --size-y: 40%;
}