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
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1) + min) ;
}
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(getRandomInt(width/2,width),height/2),
length = getRandomInt(50,150),
angle = getRandomInt(0,360),
coords = [
new Point(0,0),
new Point(0,0),
new Point(0,0)
],
path = helper.createVector( new Path()
.moveTo( coords[0] )
.lineTo( coords[1] )
.lineTo( coords[2] )
.lineTo( coords[0] )).setStyle({fill:"#fff",stroke:"#fff"});
point.rotate( - angle.degree(), center);
var star = {
point : point,
length : length,
angle : angle,
coords : coords,
live : 0,
setLength : function(){
if (arguments.length > 0){
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 * Math.cos( this.angle.degree() );
this.coords[1].y = this.coords[0].y - this.live * Math.sin( this.angle.degree() );
this.coords[2].x = this.coords[1].x + 2 *...