Mystery box

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Requested by Toph Tucker.
Less mysterious version

  

  

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

body {
  margin: 0;
  padding: 0;
}

.container {
    width: 300px;
    height: 500px;
    margin: 100px auto 0 auto;
    position: relative;
    perspective: 2000px;
    -webkit-perspective: 2000px;
}

.cube {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: spin 5s infinite linear;
    -webkit-animation: spin 5s infinite linear;
}

.questionmark {
  position: absolute;
  width: 300px;
  height: 300px;
  pointer-events: none;
  background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjExOSIgaGVpZ2h0PSIxMTQiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMEE2RTAiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNi4xLDQ1TDMxLDUuNkw5NC4yLDYuNUwxMTMsNTIuOAoJTDgwLjMsNjdMODAuNSw3Ni4xTDUwLjYsNzYuNkw1MC44LDU2LjZMNjkuOCw0Mi44TDcyLjYsMzkuOUw0OC4yLDM2LjZMNDAuMiw2My41WiI+PC9wYXRoPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMEE2RTAiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNDkuNiwxMTAuM0w4Mi45LDExMC4yTDgwLjcsODMuMgoJNTAuMyw4My40WiI+PC9wYXRoPgo8L3N2Zz4=") no-repeat center center;
  background-size: 178px 171px;
  animation: spin 5s infinite linear reverse;
  -webkit-animation: spin 5s infinite linear reverse;
}

.side {
  margin: 0;
  width: 300px;
  height: 300px;
  position: absolute;
  cursor: pointer;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+CjxyZWN0IGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yKSIgc3Ryb2tlPSJub25lIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjUiIGhlaWdodD0iMjUiPjwvcmVjdD4Kd2lkdGg9JzUwJyBoZWlnaHQ9JzUwJyZndDsKPHJlY3QgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjIpIiBzdHJva2U9Im5vbmUiIHg9IjI1IiB5PSIyNSIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1Ij48L3JlY3Q+Cjwvc3ZnPg==");
}

a {
  display: block;
  width: 100%;
  height: 100%;
}

.cube {
  transform: translateZ(-100px) rotateX(-90deg);
  -webkit-transform: translateZ(-100px) rotateX(-90deg);
}

.front {
  background-color: rgba(44,155,222,0.6);
  transform: rotateX(-12deg) rotateY(45deg) translateZ(150px);
  animation: fade 5s infinite linear -1.25s;
  -webkit-animation: fade 5s infinite linear -1.25s;
}

.back {
  background-color: rgba(43,236,136,0.6);
  transform: rotateX(168deg) rotateY(-45deg) rotateZ(180deg) translateZ(150px);
  animation: fade 5s infinite linear -3.75s;
  -webkit-animation: fade 5s infinite linear -3.75s;
}

.right {
  background-color: rgba(153,242,87,0.6);
  transform: rotateX(-12deg) rotateY(135deg) translateZ(150px);
  animation: fade 5s infinite linear;
  -webkit-animation: fade 5s infinite linear;
}

.left {
  background-color: rgba(255,135,58,0.6);
  transform: rotateX(-12deg) rotateY(-45deg) translateZ(150px);
  animation: fade 5s infinite linear -2.5s;
  -webkit-animation: fade 5s infinite linear -2.5s;
}

.top {
  background-color: rgba(239,67,148,0.6);
  transform: rotateX(78deg) rotateZ(-45deg) translateZ(150px);
}

.bottom {
  background-color: rgba(115,63,172,0.6);
  transform: rotateX(-102deg) rotateZ(45deg) translateZ(150px);
}

@keyframes fade {
  from { opacity: 1; }
  12.5% { opacity: 0.3; }
  62.5% { opacity: 0.3; }
  75% { opacity: 1; }
}

@-webkit-keyframes fade {
  from { opacity: 1; }
  12.5% { opacity: 0.3; }
  62.5% { opacity: 0.3; }
  75% { opacity: 1; }
}

@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

@-webkit-keyframes spin {
  from { -webkit-transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(-360deg); }
}

</style>
</head>
<body>
<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
    <div class="questionmark"></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script>

var user = "tophtucker";

// Ditching fetch() for Safari
d3.json("https://api.github.com/users/" + user + "/gists",function(err, gists){

  gists = gists.filter(function(gist){
    return gist.files && gist.files["index.html"];
  });

  d3.shuffle(gists);

  d3.selectAll(".side")
    .data(gists)
    .append("a")
      .attr("target", "_blank")
      .attr("href", function(gist){
        return "https://bl.ocks.org/" + user + "/" + gist.id;
      });

});

</script>
</body>
</html>

## preview.png

      
        

          Raw
        
        
          
            
          
          
            
              preview.png
            
          
        
      
    

  
      
          
      
  

  

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<style>

	body {
	margin: 0;
	padding: 0;
	}

	.container {
	width: 300px;
	height: 500px;
	margin: 100px auto 0 auto;
	position: relative;
	perspective: 2000px;
	-webkit-perspective: 2000px;
	}

	.cube {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	animation: spin 5s infinite linear;
	-webkit-animation: spin 5s infinite linear;
	}

	.questionmark {
	position: absolute;
	width: 300px;
	height: 300px;
	pointer-events: none;
	background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjExOSIgaGVpZ2h0PSIxMTQiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMEE2RTAiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNi4xLDQ1TDMxLDUuNkw5NC4yLDYuNUwxMTMsNTIuOAoJTDgwLjMsNjdMODAuNSw3Ni4xTDUwLjYsNzYuNkw1MC44LDU2LjZMNjkuOCw0Mi44TDcyLjYsMzkuOUw0OC4yLDM2LjZMNDAuMiw2My41WiI+PC9wYXRoPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMEE2RTAiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNDkuNiwxMTAuM0w4Mi45LDExMC4yTDgwLjcsODMuMgoJNTAuMyw4My40WiI+PC9wYXRoPgo8L3N2Zz4=") no-repeat center center;
	background-size: 178px 171px;
	animation: spin 5s infinite linear reverse;
	-webkit-animation: spin 5s infinite linear reverse;
	}

	.side {
	margin: 0;
	width: 300px;
	height: 300px;
	position: absolute;
	cursor: pointer;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+CjxyZWN0IGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yKSIgc3Ryb2tlPSJub25lIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjUiIGhlaWdodD0iMjUiPjwvcmVjdD4Kd2lkdGg9JzUwJyBoZWlnaHQ9JzUwJyZndDsKPHJlY3QgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjIpIiBzdHJva2U9Im5vbmUiIHg9IjI1IiB5PSIyNSIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1Ij48L3JlY3Q+Cjwvc3ZnPg==");
	}

	a {
	display: block;
	width: 100%;
	height: 100%;
	}

	.cube {
	transform: translateZ(-100px) rotateX(-90deg);
	-webkit-transform: translateZ(-100px) rotateX(-90deg);
	}

	.front {
	background-color: rgba(44,155,222,0.6);
	transform: rotateX(-12deg) rotateY(45deg) translateZ(150px);
	animation: fade 5s infinite linear -1.25s;
	-webkit-animation: fade 5s infinite linear -1.25s;
	}

	.back {
	background-color: rgba(43,236,136,0.6);
	transform: rotateX(168deg) rotateY(-45deg) rotateZ(180deg) translateZ(150px);
	animation: fade 5s infinite linear -3.75s;
	-webkit-animation: fade 5s infinite linear -3.75s;
	}

	.right {
	background-color: rgba(153,242,87,0.6);
	transform: rotateX(-12deg) rotateY(135deg) translateZ(150px);
	animation: fade 5s infinite linear;
	-webkit-animation: fade 5s infinite linear;
	}

	.left {
	background-color: rgba(255,135,58,0.6);
	transform: rotateX(-12deg) rotateY(-45deg) translateZ(150px);
	animation: fade 5s infinite linear -2.5s;
	-webkit-animation: fade 5s infinite linear -2.5s;
	}

	.top {
	background-color: rgba(239,67,148,0.6);
	transform: rotateX(78deg) rotateZ(-45deg) translateZ(150px);
	}

	.bottom {
	background-color: rgba(115,63,172,0.6);
	transform: rotateX(-102deg) rotateZ(45deg) translateZ(150px);
	}

	@keyframes fade {
	from { opacity: 1; }
	12.5% { opacity: 0.3; }
	62.5% { opacity: 0.3; }
	75% { opacity: 1; }
	}

	@-webkit-keyframes fade {
	from { opacity: 1; }
	12.5% { opacity: 0.3; }
	62.5% { opacity: 0.3; }
	75% { opacity: 1; }
	}

	@keyframes spin {
	from { transform: rotateY(0deg); }
	to { transform: rotateY(-360deg); }
	}

	@-webkit-keyframes spin {
	from { -webkit-transform: rotateY(0deg); }
	to { -webkit-transform: rotateY(-360deg); }
	}

	</style>
	</head>
	<body>
	<div class="container">
	<div class="cube">
	<div class="side front"></div>
	<div class="side back"></div>
	<div class="side right"></div>
	<div class="side left"></div>
	<div class="side top"></div>
	<div class="side bottom"></div>
	<div class="questionmark"></div>
	</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
	<script>

	var user = "tophtucker";

	// Ditching fetch() for Safari
	d3.json("https://api.github.com/users/" + user + "/gists",function(err, gists){

	gists = gists.filter(function(gist){
	return gist.files && gist.files["index.html"];
	});

	d3.shuffle(gists);

	d3.selectAll(".side")
	.data(gists)
	.append("a")
	.attr("target", "_blank")
	.attr("href", function(gist){
	return "https://bl.ocks.org/" + user + "/" + gist.id;
	});

	});

	</script>
	</body>
	</html>