Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 19, 2020 06:00 am GMT

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.


Original Link: https://dev.to/rafi993/star-background-using-houdini-css-2dog

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To