Simple clone of the Stripe element @ https://stripe.com/radar

I had some fun replicating the rotating icosahedron of the Stripe page, and in the end, it came out pretty good.

I know that on Stripe they have created their own solid using Cinema 4d.

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>  
<body>

   <div id="container">
      <canvas id="c"></canvas>
      <div class="vert" id="v1">
         <img src="https://unsplash.it/500"/>
      </div>
      <div class="vert" id="v2">
         <img src="https://unsplash.it/501"/>
      </div>
            <div class="vert" id="v3">
         <img src="https://unsplash.it/502"/>
      </div>
            <div class="vert" id="v4">
         <img src="https://unsplash.it/504"/>
      </div>
                  <div class="vert" id="v5">
         <img src="https://unsplash.it/505"/>
      </div>
   </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>

</body>  
</html>  
*{
   font-family:Helvetica
}
#container{   

   position:absolute;
   background:black;
}

#c{
   background:black;
}

.vert{
   transform: translateX(-50) translateY(-50%);
   transition:opacity 0.2s;
   /* border: 1px solid #555;
   background:white;
   padding:0.5em 1em; */

   position: absolute;
}

img{  
   min-width:60px;
   max-width:100px;   
   border-radius: 50%;
}
var c = document.getElementById("c")  
c.width = 400;  
c.height=400  
var renderer = new THREE.WebGLRenderer({  
   canvas: c
});
renderer.setSize(c.width, c.height);  
document.body.appendChild(renderer.domElement);

var camera = new THREE.PerspectiveCamera(45, c.width / c.height, 1, 500);  
camera.position.set(0, 0, 100);  
camera.lookAt(new THREE.Vector3(0, 0, 0));

var scene = new THREE.Scene();  
var light = new THREE.AmbientLight( 0x666666 ); // soft white light  
scene.add( light );  
var dirLight = new THREE.DirectionalLight(0xffffff, 1);  
var dirLight2 = new THREE.DirectionalLight(0xffffff, 2);  
dirLight.position.set(10, 10, 10);  
dirLight2.position.set(-10, -10, 50);  
scene.add(dirLight);  
scene.add(dirLight2);

var material = new THREE.MeshLambertMaterial({color: 0xff4444})  
var geometry = new THREE.IcosahedronGeometry(30);  
var I = new THREE.Mesh(geometry, material);  
var speedx = speedy = 0  
renderer.setClearColor( 0xffffff );  
var offsetX=170;  
var offsetY=150;  
scene.add(I)

// var v2 = document.getElementById("v2");

function createVert(id, vnum){  
   var v1 = document.getElementById(id);  
   var vector = I.geometry.vertices[vnum].clone();
   vector.applyMatrix4( I.matrixWorld );
   v1.style.top= ((-vector.y*5.5)+ offsetY) +"px";
   v1.style.left=((vector.x*5) + offsetX) +"px";
   v1.style.opacity= (vector.z<5) ? "0" : "1"
}

setInterval(()=>{  
   I.rotation.y = speedx+=0.05
   I.rotation.x = speedy+=0.005
   renderer.render(scene, camera);

   createVert("v1", 2)
   createVert("v2", 4)
   createVert("v3", 5)
   createVert("v4", 6)
   createVert("v5", 7)

},30)
—Read This Next—

Principal Component Analysis


PCA is an algorithm used to find the principal component of data. Principal components are the directions where there is the most variance,
—You Might Enjoy—

Using ARIMA and Box-Jenkins methodology for time series forecast - Part 1


The Box-Jenkins method, named after George Box and Gwilym Jenkins, is an approach used in time series analysis to find the best fit of a tim