JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/theshock/atomjs/master/atom-full-compiled.js"></script>
<script src="https://raw.github.com/theshock/libcanvas/master/libcanvas-full-compiled.js"></script>
CSS
*{padding:0;margin:0}
body{overflow:hidden;background:black}
JavaScript
new function () {
var center, i, helper, stars;
LibCanvas.extract();
var width = document.width || 800,
height = document.height || 800;
helper = new App.Light(new Size( width, height), { intersection: 'full' });
center = helper.app.rectangle.center;
stars = [];
for(i = 0; i < 350; i++){
new function() {
var point = new Point(Number.random(width/2,width),height/2),
length = Number.random(50,150),
angle = Number.random(0,360),
coords = [
new Point(0,0),
new Point(0,0),
new Point(0,0)
],
path = helper.createVector( new Polygon(coords) ).setStyle({fill:"#fff",stroke:"#fff"});
point.rotate( - angle.degree(), center);
var star = {
point : point,
length : length,
angle : angle,
coords : coords,
live : 0,
setLength : function(live){
var degree = this.angle.degree(), sin = degree.sin(), cos = degree.cos();
if (live != null){
this.live = arguments[0];
}
this.coords[0].x = this.point.x;
this.coords[0].y = this.point.y;
this.coords[1].x = this.coords[0].x + this.live * cos;
this.coords[1].y = this.coords[0].y - this.live * sin;
this.coords[2].x = this.coords[1].x + 2 * sin;
this.coords[2].y = this.coords[1].y + 2 * cos;
},
path : path
};
star.setLength();
stars.push(star);
};
}
...