Light Sabers in line

by Luis Martin

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <canvas id="space"></canvas>
    <div class="light_sabers">
        
        
        <div class="light_saber">
            <div class="back">
                <div class="outer_glow" style="background-color: #ff0000;"></div>
                <div class="middle_glow" style="background-color: #ff9ca9;"></div>
                <div class="core_glow"></div>
                <div class="handle"><img src="https://zcode.io/sites/default/files/lightSaber.svg"></div>
            </div>
        </div>

        <div class="light_saber">
            <div class="back">
                <div class="outer_glow" style="background-color: #ff6e1d;"></div>
                <div class="middle_glow" style="background-color: #fad2cc;"></div>
                <div class="core_glow"></div>
                <div class="handle"><img src="https://zcode.io/sites/default/files/lightSaber.svg"></div>
            </div>
        </div>
        
        <div class="light_saber">
            <div class="back">
                <div class="outer_glow" style="background-color: #ffc11d;"></div>
                <div class="middle_glow" style="background-color: #fae1cc;"></div>
                <div class="core_glow"></div>
                <div class="handle"><img src="https://zcode.io/sites/default/files/lightSaber.svg"></div>
            </div>
        </div>
        
        <div class="light_saber">
            <div class="back">
                <div class="outer_glow" style="background-color: #abff1d;"></div>
                <div class="middle_glow" style="background-color: #f8facc;"></div>
                <div class="core_glow"></div>
                <div class="handle"><img src="https://zcode.io/sites/default/files/lightSaber.svg"></div>
            </div>
        </div>
        
        <div class="light_saber">
            <div class="back">
                <div class="outer_glow" style="background-color: #1dff56;"></div>
           ...

CSS

body{
    padding: 0;
    margin: 0;
}
#space{
    position: fixed;
}
.light_saber {
  height: 460px;
  width: 10px;
    position: fixed;
    left: 50%;
    top: 20%;
    transform-origin: 40% 111%;
}

.light_sabers .light_saber:nth-child(1){
    margin-left: -480px;
}
.light_sabers .light_saber:nth-child(2){
    margin-left: -400px;
}
.light_sabers .light_saber:nth-child(3){
   margin-left: -320px;
}
.light_sabers .light_saber:nth-child(4){
    margin-left: -240px;
}
.light_sabers .light_saber:nth-child(5){
    margin-left: -160px;
}
.light_sabers .light_saber:nth-child(6){
    margin-left: -80px;
}
.light_sabers .light_saber:nth-child(7){
    margin-left: -0px;
}
.light_sabers .light_saber:nth-child(8){
    margin-left: 80px;
}
.light_sabers .light_saber:nth-child(9){
    margin-left: 160px;
}
.light_sabers .light_saber:nth-child(10){
    margin-left: 240px;
}
.light_sabers .light_saber:nth-child(11){
   margin-left: 320px;
}
.light_sabers .light_saber:nth-child(12){
    margin-left: 400px;
}
.light_sabers .light_saber:nth-child(13){
    margin-left: 480px;
}















.back{
  height: 460px;
  width: 10px;
  position: relative;  
  transform: rotate(180deg);
}
.outer_glow{
  height: 0px;
  width: 26px;
  border-radius:5px;
  filter: blur(10px);
    position: absolute;
    left: -8px;
    top:85px;
    transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
    //animation: lightUp2 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
    //animation: glow_animation 0.8s infinite;
}
.middle_glow{
  height: 0px;
  width: 10px;
  border-radius:5px;
  position: absolute;
  top:85px;
  filter: blur(2px);
  transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  //animation: lightUp1 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  //animation: glow_animation 0.8s infinite ;
}
.core_glow{
  height: 0px;
  width: 6px;
  background-color: #fff;
  border-radius:5px;
  position: absolute;
  top:85px;
  filter: blur(1px);
  transition: all 0.9s...

JavaScript

window.requestAnimFrame = (function () { return window.requestAnimationFrame })();
var canvas = document.getElementById("space");
var c = canvas.getContext("2d");

var numStars = 1900;
var radius = '0.' + Math.floor(Math.random() * 9) + 1;
var focalLength = canvas.width * 2;
var warp = 0;
var centerX, centerY;

var stars = [], star;
var i;

var animate = true;

initializeStars();

function executeFrame() {

    if (animate)
        requestAnimFrame(executeFrame);
    moveStars();
    drawStars();
}

function initializeStars() {
    centerX = canvas.width / 2;
    centerY = canvas.height / 2;

    stars = [];
    for (i = 0; i < numStars; i++) {
        star = {
            x: Math.random() * 1920,
            y: Math.random() * 1080,
            z: Math.random() * 1920,
            o: '0.' + Math.floor(Math.random() * 99) + 1
        };
        stars.push(star);
    }
}

function moveStars() {
    for (i = 0; i < numStars; i++) {
        star = stars[i];
        star.z--;

        if (star.z <= 0) {
            star.z = 1920;
        }
    }
}

function drawStars() {
    var pixelX, pixelY, pixelRadius;

    // Resize to the screen
    if (canvas.width != window.innerWidth || canvas.width != window.innerWidth) {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        initializeStars();
    }

    c.fillStyle = "rgba(0,0,0,1)";
    c.fillRect(0, 0, canvas.width, canvas.height);
    c.fillStyle = "rgba(0, 0, 0, " + radius + ")";
    for (i = 0; i < numStars; i++) {
        star = stars[i];

        pixelX = (star.x - centerX) * (focalLength / star.z);
        pixelX += centerX;
        pixelY = (star.y - centerY) * (focalLength / star.z);
        pixelY += centerY;
        pixelRadius = 1 * (focalLength / star.z);

        c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
        c.fillStyle = "rgba(255, 255, 255, " + star.o + ")";
        //c.fill();
    }
}
executeFrame();


$("body").on("click",".handle",...