:root {
  --bg: #000;
  --ink: #fff;
  --size: min(70vmin, 420px);   /* outer ring size, scales with the window */
  --period: 3s;                  /* one full breath: grow then shrink */
  --amp: 0.18;                   /* how much bigger/smaller (18%) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  overflow: hidden;
}

.stage {
  height: 100%;
  display: grid;
  place-items: center;
}

/* The figure is a square box; everything inside is centred on it. */
.figure {
  position: relative;
  width: var(--size);
  height: var(--size);
}

.ring, .core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(var(--size) * var(--s));
  height: calc(var(--size) * var(--s));
  border-radius: 4px;
  animation: breathe var(--period) ease-in-out infinite;
  animation-delay: var(--d);
}

/* A ring is a white outline with a thin black line running through it,
   matching the white-black-white look of the attached image. */
.ring {
  border: calc(var(--size) * 0.018) solid var(--ink);
  box-shadow:
    inset 0 0 0 calc(var(--size) * 0.012) var(--bg),
    inset 0 0 0 calc(var(--size) * 0.030) var(--ink);
}

.r1 { --s: 1.00; --d: 0s; }
.r2 { --s: 0.78; --d: -0.25s; }
.r3 { --s: 0.56; --d: -0.50s; }
.r4 { --s: 0.36; --d: -0.75s; }

.core {
  --s: 0.18;
  --d: -1s;
  background: var(--ink);
  box-shadow: 0 0 0 calc(var(--size) * 0.012) var(--bg),
              0 0 0 calc(var(--size) * 0.024) var(--ink);
}

@keyframes breathe {
  0%, 100% { transform: scale(calc(1 - var(--amp))); }
  50%      { transform: scale(calc(1 + var(--amp))); }
}

@media (prefers-reduced-motion: reduce) {
  .ring, .core { animation-duration: 12s; }
}