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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
fonta22 profile image
Fonta22

Nice effect!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more