Skip to content

Instantly share code, notes, and snippets.

@KevinGutowski

KevinGutowski/index.html

Last active August 28, 2017 00:39
Show Gist options
  • Save KevinGutowski/18a46409383680292076c7efc9b6128d to your computer and use it in GitHub Desktop.
Save KevinGutowski/18a46409383680292076c7efc9b6128d to your computer and use it in GitHub Desktop.
Download ZIP
D3 Unconf Badge
Raw
index.html
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="1050" height="1500"></svg>
</body>
Raw
script.js
window.onload = function() {
start();
}
function start() {
var svg = d3.select("svg");
var initialWidth;
var initialHeight;
function getRectArray(scale, rotateAngle) {
var rect = {
centerX: +svg.attr("width")/2,
centerY: +svg.attr("height")/2,
width: +svg.attr("width")/1.3 * scale,
height: +svg.attr("width")/1.3 * scale,
cornerRadius: 0,
strokeWidth: 1,
rotateAngle: 0,
fill: 'none',
stroke: 'rgba(255,255,255,1)'
}
initialHeight = +svg.attr("width")/1.3 * scale;
initialWidth = +svg.attr("width")/1.3 * scale;
// Draw Params
var scaleWidth = scale;
var scaleHeight = scale;
var scaleStrokes = false;
var moveX = 0;
var moveY = 0;
var rotateAngle = rotateAngle;
var rectArray = [];
var numCopies = 60;
var scaledOrConstant = false;
for (var i=0; i < numCopies; i++) {
if (scaleStrokes) {
scaledOrConstant = rect.strokeWidth * Math.pow((scaleWidth + scaleHeight) / 2, i);
} else {
scaledOrConstant = rect.strokeWidth;
}
var tempRect = {
centerX: rect.centerX + (moveX * i),
centerY: rect.centerY + (moveY * i),
width: rect.width * Math.pow(scaleWidth, i),
height: rect.height * Math.pow(scaleHeight, i),
cornerRadius: rect.cornerRadius,
strokeWidth: scaledOrConstant,
rotateAngle: rotateAngle * i,
scale: scale,
fill: rect.fill,
stroke: rect.stroke
};
rectArray.push(tempRect);
}
return rectArray;
}
function update(data) {
var t = d3.transition().duration(4000);
//Join data with elements
var rect = svg.selectAll('rect')
.data(data);
// Exit old elements
rect.exit()
.attr('class', 'exit')
.transition(t)
.attr('stroke-width', 1e-6)
.remove();
// Update old elements
rect.attr('class', 'update')
.transition(t)
.attr('width', function(d) { return d.width})
.attr('height', function(d) { return d.height})
.attr("x", function(d) {
var dX = (1 - d.scale) * d.width / 2;
var x = (d.centerX / 4) + ((initialWidth - d.width) / 2) + dX - 10;
return x;
})
.attr('y', function(d) {
var dY = (1 - d.scale) * d.height / 2;
var y = (d.centerY / 4) + ((initialHeight - d.height) / 2) + dY + 230;
return y;
})
.attr('style', function(d) { return "transform-origin: center; transform: rotate(" + d.rotateAngle + "deg);"})
// Enter new elements
rect.enter().append('rect')
.attr('class', 'enter')
.attr("x", function(d) {
var dX = (1 - d.scale) * d.width / 2;
var x = (d.centerX / 4) + ((initialWidth - d.width) / 2) + dX - 10;
return x;
})
.attr('y', function(d) {
var dY = (1 - d.scale) * d.height / 2;
var y = (d.centerY / 4) + ((initialHeight - d.height) / 2) + dY + 230;
return y;
})
.attr('fill', function(d) { return d.fill})
.attr('stroke', function(d) { return d.stroke})
.attr('stroke-width', 1e-6)
.attr('style', function(d) { return "transform-origin: center; transform: rotate(" + d.rotateAngle + "deg);"})
.attr('width', function(d) { return d.width})
.attr('height', function(d) { return d.height})
.transition(t)
.attr('stroke-width', function(d) {return d.strokeWidth});
}
update(getRectArray(.92, 5));
var previousAngle = 5;
var ratio = 1.61803398875;
d3.interval(function() {
// var convert = d3.scaleLinear()
// .domain([0,1])
// .range([.985,1])
// var scale = convert(Math.random()*Math.random()*ratio);
// var newAngle = ( Math.random() - .5 )* 33 * ratio;
// var rotateAngle = newAngle + (previousAngle*10000) / 10001;
// previousAngle = newAngle;
update(getRectArray(.99, -4));
}, 4000);
}
Raw
style.css
body {
margin: 0;
background-color: black;
overflow: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment