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;
}
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.
Top comments (1)
Nice effect!