DEV Community 👩‍💻👨‍💻

Rafi
Rafi

Posted on

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.

Top comments (1)

Collapse
 
fonta22 profile image
Fonta22

Nice effect!

Let's Get Wacky


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category

Join the Hackathon <-