canvas-squares

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  margin: 0;
  background: #111;
  min-width: 960px;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var blue  = '#2800d7'
var Lblue = '#6381ff'
var purple = '#c63eff'
var Lpurple = '#fc99ff'
var green = '#00c770'
var Lgreen = '#91f29b'
var red = '#f94600'

var colorArray = [blue, purple, green, red, Lblue, Lpurple, Lgreen]

var width = Math.max(960, innerWidth),
    height = Math.max(500, innerHeight);

var x = width / 2,
    y = height / 2;

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height)

var ctx = canvas.node().getContext("2d");

var shapes = [],
    curTime = 0,
    l = 15

d3.timer(function(t){
  curTime = t

shapes.forEach(function(s){
    if (t < s.start) return
    
    var u = (t - s.start)/(s.end - s.start)

if (u > 1){
      u = 1
      s.done = true
    }

ctx.fillStyle = s.fill
    if (s.type == 'rect'){
      var a0 = s.sV[0]*(1 - u) + s.eV[0]*u
      var a1 = s.sV[1]*(1 - u) + s.eV[1]*u
      var a2 = s.sV[2]*(1 - u) + s.eV[2]*u
      var a3 = s.sV[3]*(1 - u) + s.eV[3]*u
      ctx.fillRect(a0, a1, a2, a3)
    }
  })

shapes = shapes.filter(function(s){ return !s.done })
})

// // wave squares
// var colors = colorArray.slice(1, 4)
// var offset = 1
// setInterval(function(){
//   var speed = Math.random()*.5 + .5
//   offset++
//   d3.range(0, width + l, l).forEach(function(x, i){
//     d3.range(0, height + l, l).forEach(function(y, j){
//       if (!!((i + j + offset) % 4)) return
//       if (Math.random() < .3) return
//       var shape = 
//         { x: x, 
//           y: y, 
//           i: i, 
//           j: j,
//           type: 'rect',
//           start: curTime + (i + j)*40*speed + Math.random()*200,
//           sV: [x, y, 0, 0],
//           eV: [x, y, l, l],
//           fill: offset % 10 ? colors[offset % 3] : 'black'
//         }
//       shape.end = shape.start + 500 
//       shapes.push(shape)
//     })
//   })

// }, 1000)

//sprial squares
// var colors = colorArray.slice(0, 3)
// var offset = 1
// setInterval(function(){
//   offset++
//   d3.range(0, width + l, l).forEach(function(x, i){
//     d3.range(0, height + l, l).forEach(function(y, j){
//       if (!!((i + j + offset) % 2)) return
//       if (Math.random() < .3) return

//       var d = Math.random() < .5  //shape moves down
//       var r = Math.random() < .5  //shape moves up

//       var shape = 
//         { x: x, 
//           y: y, 
//           i: i, 
//           j: j,
//           type: 'rect',
//           start: curTime + d*1000 + r*1000 + (d && !r)*1000*2 + Math.random()*400,
//           sV: [r ? x : x + l, d ? y : y + l, 0, 0],
//           eV: [x, y, l, l],
//           fill: offset % 18 ? colors[offset % 3] : 'black'
//         }
//       shape.end = shape.start + 500 
//       shapes.push(shape)
//     })
//   })

// }, 5/4*1000)

//down wave
var colors = colorArray.slice(2, 5)
var offset = 1
setInterval(function(){
  var speed = Math.random()*.5 + .5
  speed = 1
  offset++
  var m = offset % 4
  d3.range(0, width + l, l).forEach(function(x, i){
    d3.range(0, height + l, l).forEach(function(y, j){
      if (!((i + j + offset) % 5)) return
      if (Math.random() < .6) return

var stagger = speed*40 + Math.random()*5
      var start = curTime
      var sV = []
      if        (m == 0){
        start += j*stagger
        sV = [x, y, l, 0]
      } else if (m == 1){
        start += (width /l - i)*stagger
        sV = [x + l, y, 0, l]
      } else if (m == 2){
        start += (height/l - j)*stagger
        sV = [x, y + l, l, 0]
      } else if (m == 3){
        start += i*stagger
        sV = [x, y, 0, l]
      }

var shape = 
        { x: x, 
          y: y, 
          i: i, 
          j: j,
          type: 'rect',
          start: start,
          sV: sV,
          eV: [x, y, l, l],
          fill: offset % 10 ? colors[offset % 3] : 'black'
        }
      shape.end = shape.start + 200*Math.random() 
      shapes.push(shape)
    })
  })

}, 2000)

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js