apollo-elements/apollo-elements

:host {
  display: block;
  overflow: hidden;
  cursor: none;
  height: 100%;
  width: 100%;
  background:
    linear-gradient(to bottom, hsla(0 100% 50% / 0%), hsla(0 0% 50% / 100%)),
    linear-gradient(to right,
      hsl(0 100% 50%) 0%,
      hsl(0.2turn 100% 50%) 20%,
      hsl(0.3turn 100% 50%) 30%,
      hsl(0.4turn 100% 50%) 40%,
      hsl(0.5turn 100% 50%) 50%,
      hsl(0.6turn 100% 50%) 60%,
      hsl(0.7turn 100% 50%) 70%,
      hsl(0.8turn 100% 50%) 80%,
      hsl(0.9turn 100% 50%) 90%,
      hsl(1turn 100% 50%) 100%
    );
}

#loupe {
  --cursor-size: 15px;
  position: relative;
  display: block;
  position: relative;
  height: 40px;
  width: 40px;
  border: 3px solid black;
  border-radius: 100%;
  background: hsl(var(--hue) var(--saturation) 50%);
  transform: translate(var(--x), var(--y));
}

#cursor {
  user-select: none;
  font-family: monospace;
  display: block;
  font-size: var(--cursor-size);
  line-height: var(--cursor-size);
  position: absolute;
  top: calc(-0.5 * var(--cursor-size));
  left: calc(-0.5 * var(--cursor-size));
  width: var(--cursor-size);
  height: var(--cursor-size);
  transform-origin: center;
}