Houdini CSS를 사용한 별 배경

나는 Houdini css로 놀고 있었고 이것을 만들었습니다. 백그라운드에서 별을 렌더링할 수 있는 워크렛입니다.
그것은 별의 수와 주어진 별의 최대 크기의 두 가지 속성을 취합니다. 다음과 같이 사용할 수 있습니다

.container {
  background: paint(stars), #282828;
  --star-count: 3500;
  --star-max-size: 0.5;
}

실제 worklet 코드는 다음과 같습니다.

class Stars {
  static get inputProperties() {
    return ['--star-count', '--star-max-size'];
  }

  getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  paint(ctx, geom, props) {
    const count = parseInt(props.get('--star-count').toString());
    const maxSize = parseInt(props.get('--star-max-size').toString());

    const colorrange = [0, 60, 240];
    for (let i = 0; i < count; i++) {
      const x = Math.random() * geom.width;
      const y = Math.random() * geom.height;

      const radius = maxSize ? this.getRandom(1, maxSize) : Math.random() * 1.2;

      const hue = colorrange[this.getRandom(0, colorrange.length - 1)];
      const sat = this.getRandom(50, 100);
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 360);
      ctx.fillStyle = 'hsl(' + hue + ', ' + sat + '%, 88%)';
      ctx.fill();
      ctx.closePath();
    }
  }
}

registerPaint('stars', Stars);

here이 호스팅되고 여기에 source code이 있습니다.