:root {
  --p: orange;
  --s: teal;
  overflow: hidden;
  margin: 0;
  height: 100vh;

  &::before, &::after {
    --size: 6em;
    content: "";
    font-size: 1vmin;
    position: absolute;
    width: 50em;
    aspect-ratio: 1;
    top: 50%;
    left: calc(50% - min(55em, 50vw));
    translate: 0 -50%;
    background:
      radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p1) var(--p1) / var(--size2) var(--size2),
      radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p3) var(--p1) / var(--size2) var(--size2),
      radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p2) var(--p1) / var(--size2) var(--size2),
      radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p1) var(--p3) / var(--size2) var(--size2),
      radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p2) var(--p3) / var(--size2) var(--size2),
      radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p1) var(--p2) / var(--size2) var(--size2),
      radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p3) var(--p2) / var(--size2) var(--size2),
      radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p2) var(--p2) / var(--size2) var(--size2),
      radial-gradient(farthest-side, var(--p) 99%, #0000 0) 50% 50% / var(--size) var(--size);
    background-repeat: no-repeat;
    transition: left, top, translate;
    transition-duration: 1s;
  }

  &::before {
    --size2: calc(var(--size) * 1);
    --p1: calc(50% - var(--size2) * 1.2);
    --p2: calc(50% - var(--size2) * -1.2);
    --p3: 50%;
  }

  &::after {
    left: calc(50% + min(55em, 50vw));
    translate: -100% -50%;
    --size2: calc(var(--size) * 2.5);
    --p1: 0;
    --p2: 100%;
    --p3: 50%;
  }
  
  &:hover {
    &::before, &::after {
    left: 50%;
    top: 50%;
      translate: -50% -50%;
    }
  }

  @media(aspect-ratio < 1) {
    &::before {
      font-size: 1.1vmin;
      left: 50%;
      top: calc(50% - min(55em, 50vh));
      translate: -50% 0%;
    }

    &::after {
      font-size: 1.1vmin;
      left: 50%;
      top: calc(50% + min(55em, 50vh));
      translate: -50% -100%;
    }
  }
}