@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&display=swap");

:root {
  color-scheme: light dark;
  --bg: light-dark(white, black);
  --fg: light-dark(black, white);
}

body {
  margin: 0;
  height: 100vh;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-style: normal;
  box-sizing: border-box;
  overflow: clip;
}

@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}

h1 {
  --rotation: 0;
  --dotSize: 1px;
  --density: 6px;
  text-transform: uppercase;
  margin: 0;
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  text-wrap: nowrap;
  font-size: 16vw;
  line-height: 0.8em;
  -webkit-text-fill-color: transparent;
  background: conic-gradient(
    from var(--rotation) at 50% 120%,
    transparent 20%,
    var(--fg) 40%,
    var(--fg) 60%,
    transparent 80%
  );
  -webkit-background-clip: text;
  mask-origin: 0 0;
  -webkit-mask-origin: 0 0;
  mask-size: var(--density) var(--density);
  mask-position: 0 var(--dotSize);
  -webkit-mask-clip: text;
  mask-image: radial-gradient(
    white,
    white var(--dotSize),
    transparent var(--dotSize)
  );
  animation: gradientAnim 5s linear infinite, dotsMovement 100s linear infinite;
}

@keyframes gradientAnim {
  to {
    --rotation: 1turn;
  }
}

@keyframes dotsMovement {
  to {
    mask-position: -100% 0;
  }
}
Animated Text Mask
