1wheel/index.html

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

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

</style>
<body>
<script src="http://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>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

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

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

	</style>
	<body>
	<script src="http://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)40speed + 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 + d1000 + r1000 + (d && !r)10002 + 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 = speed40 + 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>