* {
  margin: 0;
}

body {
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: hsl(var(--base-hue), 12%, 12%);
}

svg {
  filter: blur(0.2vw);
  width: min(100vw, 100vh);
  --half-spread: calc(var(--spread) / 2);
  --gradient-hue-start: calc(var(--base-hue) - var(--half-spread));
  --gradient-hue-end: calc(var(--base-hue) + var(--half-spread));
  --gradient-color-start: hsl(var(--gradient-hue-start), 80%, 40%);
  --gradient-color-end: hsl(var(--gradient-hue-end), 80%, 40%);
}

[scope-path] {
  stroke: url(#g);
  fill: transparent;
  stroke-width: 8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

figure {
  width: 100vw;
  height: 100vh;
  background-color: #00000088;
  position: absolute;
  display: grid;
  place-items: center;
}

figcaption {
  font-family: monospace;
  color: white;
  background-color: black;
  padding: .5rem;
}