<div role="img" aria-label="animated word 'dot' drawn using dots"></div>

@keyframes swapColors {
  0%, 20% { color: white; }
  25% { color: red; }
  80%, 100% {
    color: red;
    background: red;
  }
}
div {
  --duration: 10s;
  --timing: ease-in-out;
  animation: swapColors var(--duration) var(--timing) 1 forwards;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  width: 1vmax;
  height: 1vmax;
  border-radius: 50%;
  font-size: 1vmax;
  box-shadow:
    /* o */
    -1em -3em 0 0.75em,
    -0.75em -1em 0 -0.25em,
    0.5em -1.4em 0 0.1em,
    1.2em -2.9em 0 0.25em,
    1.9em -1.5em,
    1.75em 0.25em 0 0.5em,
    2.9em 1.25em 0 -0.25em,
    1.25em 3.25em 0 1.25em,
    0.25em 1.125em 0 -0.125em,
    3em 2em 0 -0.25em,
    2.5em 5em 0 -0.25em,
    1.5em 6em 0 0.25em,
    0.6em 5.25em 0 -0.33em,
    -0.4em 5.25em 0 0.1em,
    0.25em 6.25em 0 -0.125em,
    0.75em 7.25em,
    -0.5em 8em 0 0.25em,
    -0.75em 6.5em 0 -0.125em,
    -2em 7em 0 0.2em,
    -1.5em 5.75em 0 -0.2em,
    -4em 7.8em 0 0.6em,
    -2.125em 8.5em 0 0.125em,
    -3.1em 6.5em 0 -0.3em,
    -5em 6.25em,
    -4em 6.25em 0 -0.4em,
    -6.2em 7.5em 0 0.25em,
    -6.25em 6em,
    -5.5em 8.5em 0 -0.25em,
    -8em 6em 0 0.4em,
    -7.5em 7.25em 0 -0.2em,
    -6.75em 4.75em 0 0.125em,
    -7.75em 2.75em 0 0.7em,
    -8.25em 4.5em 0 -0.2em,
    -9.5em 4.5em 0 0.2em,
    -9.5em 3.25em 0 -0.2em,
    -9.75em 2em 0 0.125em,
    -8.75em 0 0 0.9em,
    -7em 1em 0 -0.1em,
    -6.75em 0em 0 -0.1em,
    -6.5em -1.5em 0 0.2em,
    -8.75em -2.25em,
    -7.75em -1.8em 0 -0.15em,
    -7em -3.5em 0 0.6em,
    -5.5em -4.5em,
    -4.5em -3em 0 0.3em,
    -5.5em -2.2em 0 -0.2em,
    -4em -4.75em 0 0.2em,
    -3em -3em,
    -2.5em -4.5em,
    -3.25em -3.9em 0 -0.25em,
    -1.5em -4.6em 0 -0.3em,
    /* d */
    -15em 0 0 0.75em,
    -13.125em 0 0 -0.125em,
    -14em 1.75em,
    -13.1em 1em 0 -0.08em,
    -15.4em 2.25em 0 0.2em,
    -13em 2em 0 -0.25em,
    -14.5em 4.75em 0 1.125em,
    -13em 3em,
    -13.9em 2.75em 0 -0.3em,
    -13.25em -1.5em 0 0.25em,
    -14.5em -3em 0 0.5em,
    -16em -1.9em 0 0.125em,
    -15em -1.65em 0 -0.25em,
    -14.4em -1.5em 0 -0.3em,
    -13em -4em,
    -12.95em -2.85em 0 -0.1em,
    -13.5em -5.75em 0 0.5em,
    -14em -4.4em 0 -0.2em,
    -16em -3.25em 0 -0.1em,
    -15.5em -4.5em 0 0.2em,
    -15.5em -6em,
    -14.85em -5.5em 0 -0.3em,
    -14.65em -5em 0 -0.35em,
    -15em -8em 0 0.9em,
    -13em -9em,
    -13.2em -8em 0 -0.2em,
    -13.1em -7.2em 0 -0.1em,
    -12.7em 5.6em 0 -0.35em,
    -12.9em 6.3em 0 -0.1em,
    -12.9em 7em 0 -0.3em,
    -13.4em 8em 0 0.3em,
    -15.2em 8em 0 0.1em,
    -14.4em 8.5em 0 -0.3em,
    -14em 6.8em 0 -0.1em,
    -16.7em 6em,
    -14.8em 6.85em 0 -0.25em,
    -15.75em 6.75em 0 0.1em,
    -17.25em 7.3em 0 0.2em,
    -23.5em 0 0 1.2em,
    -18em 6.3em 0 -0.15em,
    -17.9em 8.3em 0 -0.25em,
    -20.25em 7.6em 0 1.5em,
    -23em 7.2em 0 0.1em,
    -22.5em 5.5em 0 0.3em,
    -24.4em 6.2em 0 -0.1em,
    -23.5em 6.3em 0 -0.2em,
    -24.05em 6.95em 0 -0.18em,
    -24.5em 5em 0 0.2em,
    -21.25em 5.5em 0 -0.3em,
    -23.6em 5.5em 0 -0.3em,
    -24em 3em 0 0.45em,
    -23.3em 4.4em 0 0em,
    -24.9em 4em 0 -0.2em,
    -25.1em 1.75em,
    -25.4em 2.8em 0 -0.125em,
    -22.3em 2.8em 0 0.125em,
    -22.15em 4.1em,
    -23em 2em 0 -0.2em,
    -22.3em 1.7em 0 -0.3em,
    -18em -3em 0 0.4em,
    -17.1em -1.9em 0 -0.1em,
    -16.6em -1em 0 -0.2em,
    -16.7em -2.7em 0 -0.2em,
    -16.7em -3.4em 0 -0.35em,
    -19em -4.25em,
    -18em -4.4em 0 -0.2em,
    -19.9em -3em 0 0.3em,
    -21.4em -1.9em 0 0.1em,
    -21.6em -0.9em 0 -0.2em,
    -20.4em -1.8em 0 -0.2em,
    -19em -2.2em 0 -0.3em,
    -21em -4.5em,
    -20em -4.4em 0 -0.1em,
    -22.25em -3.75em 0 0.2em,
    -21.35em -3em 0 -0.2em,
    -21em -3.6em 0 -0.25em,
    -24em -2.4em,
    -22.7em -2.4em 0 0.1em,
    -23.5em -3.2em 0 -0.2em,
    /* t */
    10.7em -3.5em 0 0.75em,
    8em -3em,
    4.75em -2.5em,
    6.25em -3.2em 0 0.4em,
    4.9em -3.5em 0 -0.2em,
    8em 6.5em 0 1.5em,
    11em 8em 0 0.2em,
    9.7em 8.5em 0 -0.1em,
    10.75em 6.6em,
    11.5em 7em 0 -0.3em,
    11.6em 6.4em 0 -0.35em,
    10em 7.8em 0 -0.35em,
    10.2em 7.3em 0 -0.25em,
    9em 4em,
    7em 4em,
    6.5em 4.65em 0 -0.3em,
    8em 2.85em 0 0.3em,
    8em -6.4em 0 0.6em,
    6.7em -7.65em,
    7.5em -8em 0 -0.25em,
    8.3em -8em 0 -0.15em,
    9.4em -7.6em 0 0.1em,
    8em 4.1em 0 -0.2em,
    9.4em 3em 0 -0.1em,
    6.7em 3em 0 -0.15em,
    8.6em 0.5em 0 0.8em,
    9.1em 2.2em 0 -0.2em,
    6.8em 1.7em 0 0.15em,
    6.66em 0.3em,
    7em -1.4em 0 0.4em,
    9em -2.1em 0 0.2em,
    9.5em -1em 0 -0.2em,
    8.4em -1.2em 0 -0.25em,
    8em -2.05em 0 -0.35em,
    6.8em -4.9em 0 0.14em,
    6.6em -6em 0 -0.2em,
    6.6em -6.8em 0 -0.3em,
    8.5em -4.5em 0 0.2em,
    7.5em -3.85em 0 -0.15em,
    8.95em -3.4em 0 -0.12em,
    4.8em -4.3em 0 -0.1em,
    5.6em -4.4em 0 -0.2em,
    9.5em -5em 0 -0.2em,
    9.58em -6.5em 0 -0.12em,
    9.48em -5.75em 0 -0.28em,
    9.05em -5.5em 0 -0.35em
}

@keyframes dotdotdot {
  0%,45% { 
    color: white; 
    box-shadow:
      15.4em 7.5em 0 1em,
      15.4em 7.5em 0 1em,
      15.4em 7.5em 0 1em
  }
  50% {
    color: red;
    box-shadow:
      15.4em 7.5em 0 1em,
      15.4em 7.5em 0 1em,
      15.4em 7.5em 0 1em
  }
  55%,60% {
    box-shadow:
      15.4em 7.5em 0 1em,
      19.4em 7.5em 0 1em,
      19.4em 7.5em 0 1em
  }
  65%,100% {
    color: red;
    box-shadow:
      15.4em 7.5em 0 1em,
      19.4em 7.5em 0 1em,
      23.4em 7.5em 0 1em
  }
}

div::before {
  animation: dotdotdot var(--duration) var(--timing) 1 forwards;
  content: "";
  display: block;
  position: absolute;
  color: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow:
    15.4em 7.5em 0 1em,
    19.4em 7.5em 0 1em,
    23.4em 7.5em 0 1em
}

@keyframes growdot {
  0% { 
    box-shadow: 0 0 0 0vmax; 
    background-color: white; 
  }
  5% { background-color: red; }
  10% { background-color: white; }
  15% { background-color: red; }
  20% { background-color: white; }
  25%,75% { background-color: red; }
  80% { background-color: #6a6a6a; }
  90% { box-shadow: 0 0 0 0vmax; }
  100% { background-color: #6a6a6a; box-shadow: 0 0 0 30vmax; }
}

div::after {
  animation: growdot var(--duration) var(--timing) 1 forwards;
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: red;
  color: black;
  box-shadow: 0 0 0 0vmax;
  mix-blend-mode: hue;
}