1wheel/index.html

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

<style>
body{
	background-color: rgb(38, 38, 38);
	margin: 0px;
}

path{
	stroke: white;
	stroke-width: 2px;
	fill: none;
}

circle{
	fill: white;
}


</style>

<body></body>

<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>


<script>

var s = 20,
		l = s/2
		width  = 960 - 0*2
		height = 500 - 0*2


//offset from center for each num
var x1 = [ l,  l, -l, -l]
var y1 = [-l,  l,  l, -l]
var x2 = [ l, -l, -l,  l]
var y2 = [ l,  l, -l, -l]


var x1 = [ l,  l, -l,  l]
var y1 = [-l,  l, -l, -l]
var x2 = [ l, -l, -l, -l]
var y2 = [ l,  l,  l, -l]


var svg = d3.select('body')
	.append('svg')
		.attr({height: height + 0*2, width: width + 0*2})

var grid = []
d3.range(0, width + s, s*6).map(function(x, i){
	d3.range(0, height + s, s*3).map(function(y, j){
		d3.range(0, 4).map(function(sideNum){
			grid.push({
				x: 	x + (j % 2)*s*3,
				y: 	y,
				n: 	sideNum
			})
		})
	})
})


svg.dataAppend(grid, 'circle')
		.attr('r', 3)
		.attr('cx', ƒ('x'))
		.attr('cy', ƒ('y'))

var lines = svg.dataAppend(grid, 'path')
		.attr('d', pointToPath)


function cycleAnimation(){
	grid.forEach(pushLinesOut)
	lines
		.transition().delay(500).duration(1500)
			.attr('d', pointToPath)

	// lines.attr('d', pointToPathReverse)
	// grid.forEach(rotateLines)
	// lines
	// 	.transition().delay(2500).duration(1500)
	// 		.attr('d', pointToPathReverse)

	setTimeout(cycleAnimation, 4000)
}
cycleAnimation()


function pushLinesOut(d){
	if (d.n % 2){
		d.y += d.n == 1 ? 3*s : -3*s
	} else{
		d.x += d.n == 0 ? 3*s : -3*s
	}

	d.n = (d.n + 2) % 4
}

function rotateLines(d){
	d.n = (d.n - 1 + 4) % 4
}

function pointToPath(d){
	return 'M' + [d.x + x1[d.n], d.y + y1[d.n]] +
				 'L' + [d.x + x2[d.n], d.y + y2[d.n]] + 'Z'
}

function pointToPathReverse(d){
	return 'M' + [d.x + x2[d.n], d.y + y2[d.n]] +
				 'L' + [d.x + x1[d.n], d.y + y1[d.n]]
}


</script>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

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

	<style>
	body{
	background-color: rgb(38, 38, 38);
	margin: 0px;
	}

	path{
	stroke: white;
	stroke-width: 2px;
	fill: none;
	}

	circle{
	fill: white;
	}



	</style>

	<body></body>

	<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
	<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
	<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
	<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>


	<script>

	var s = 20,
	l = s/2
	width = 960 - 0*2
	height = 500 - 0*2


	//offset from center for each num
	var x1 = [ l, l, -l, -l]
	var y1 = [-l, l, l, -l]
	var x2 = [ l, -l, -l, l]
	var y2 = [ l, l, -l, -l]


	var x1 = [ l, l, -l, l]
	var y1 = [-l, l, -l, -l]
	var x2 = [ l, -l, -l, -l]
	var y2 = [ l, l, l, -l]



	var svg = d3.select('body')
	.append('svg')
	.attr({height: height + 02, width: width + 02})

	var grid = []
	d3.range(0, width + s, s*6).map(function(x, i){
	d3.range(0, height + s, s*3).map(function(y, j){
	d3.range(0, 4).map(function(sideNum){
	grid.push({
	x: x + (j % 2)s3,
	y: y,
	n: sideNum
	})
	})
	})
	})


	svg.dataAppend(grid, 'circle')
	.attr('r', 3)
	.attr('cx', ƒ('x'))
	.attr('cy', ƒ('y'))

	var lines = svg.dataAppend(grid, 'path')
	.attr('d', pointToPath)



	function cycleAnimation(){
	grid.forEach(pushLinesOut)
	lines
	.transition().delay(500).duration(1500)
	.attr('d', pointToPath)

	// lines.attr('d', pointToPathReverse)
	// grid.forEach(rotateLines)
	// lines
	// .transition().delay(2500).duration(1500)
	// .attr('d', pointToPathReverse)

	setTimeout(cycleAnimation, 4000)
	}
	cycleAnimation()


	function pushLinesOut(d){
	if (d.n % 2){
	d.y += d.n == 1 ? 3s : -3s
	} else{
	d.x += d.n == 0 ? 3s : -3s
	}

	d.n = (d.n + 2) % 4
	}

	function rotateLines(d){
	d.n = (d.n - 1 + 4) % 4
	}

	function pointToPath(d){
	return 'M' + [d.x + x1[d.n], d.y + y1[d.n]] +
	'L' + [d.x + x2[d.n], d.y + y2[d.n]] + 'Z'
	}

	function pointToPathReverse(d){
	return 'M' + [d.x + x2[d.n], d.y + y2[d.n]] +
	'L' + [d.x + x1[d.n], d.y + y1[d.n]]
	}



	</script>