Flowing lights

align back regular

by jshacker

HTML

<div class="lights"></div>

SCSS

.light {
  position: fixed;
  border-radius: 50%;
}

JavaScript

$(function () {
  var id
  var getRandomPlane = function () {
    return parseInt(Math.random() * 100)
  }

  var height = $(".lights").parent().height()
  var width = $(".lights").parent().width()
  ;(function (h, w) {
    $(".lights").css({
      height: h,
      width: w,
    })
  })(height, width)
  var getRandomLeft = function () {
    return Math.random() * width
  }
  var getRandomTop = function () {
    return Math.random() * height
  }
  var getRandomWidth = function () {
    var w
    w = Math.random() * 100
    if (w < 20) {
      w += 20
    }
    return parseInt(w)
  }

  id = 1

  var getNextId = function () {
    id++
    return id
  }

  var getRandom8BitInt = function () {
    return parseInt(Math.random() * 255)
  }

  var getRandomRValue = function () {
    return getRandom8BitInt()
  }
  var getRandomGValue = function () {
    return getRandom8BitInt()
  }
  var getRandomBValue = function () {
    return getRandom8BitInt()
  }

  function animation(light) {
    var val = function () {
      return [
        "-" + parseInt(Math.random() * height) + "px",
        "+" + parseInt(Math.random() * width) + "px",
      ][parseInt(Math.random() * 2) % 2]
    }

    var duration = 10000
    var v = val()
    light.animate(
      {
        top: v,
      },
      duration / 2,
    )
    light.animate(
      {
        left: v,
      },
      duration / 2,
    )

    setInterval(function () {
      v = val()
      light.animate(
        {
          left: v,
        },
        duration / 2,
      )
    }, duration)
    setInterval(function () {
      light.animate(
        {
          top: v,
        },
        duration / 2,
      )
    }, duration)
  }
  var getRandomColor = function () {
    return (
      "rgba(" +
      getRandomRValue() +
      ", " +
      getRandomGValue() +
      ", " +
      getRandomBValue() +
      ", " +
      Math.random() +
   ...