DEV Community

Rafi
Rafi

Posted on

9 3

Star background using Houdini CSS

I was playing with Houdini css and built this. It is a worklet that allows you to render stars in the background.
It takes in two properties number of star and maximum size of a given star. you can use it as follows

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

Stars

here is the actual worklet code

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);
Enter fullscreen mode Exit fullscreen mode

it is hosted here and here is the source code.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (1)

Collapse
 
fonta22 profile image
Fonta22 •

Nice effect!

Image of Datadog

Learn how to monitor AWS container environments at scale

In this eBook, Datadog and AWS share insights into the changing state of containers in the cloud and explore why orchestration technologies are an essential part of managing ever-changing containerized workloads.

Download the eBook