Star background using Houdini CSS

showdev css houdini

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;
}

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);

it is hosted here and here is the source code.

This post is also available on DEV.