各キューブの色（緑色と赤色）の表示パターンはランダムに決定されます。（ページを更新するたびにパターンが変わります）
HTMLとJavascript
<div>
<svg viewBox="0 0 64 64" style="width:320px;height:320px;" id="cubes">
<defs>
<g id="cubeg">
<path d="M0,1 l2,1 l2,-1 l-2,-1 z" style="fill:#8E4;stroke:#240;stroke-width:0.1"></path>
<path d="M0,1 l0,2 l2,1 l0,-2 z" style="fill:#6C2;stroke:#240;;stroke-width:0.1"></path>
<path d="M2,2 l0,2 l2,-1 l0,-2 z" style="fill:#4A0;stroke:#240;;stroke-width:0.1"></path>
</g>
<g id="cuber">
<path d="M0,1 l2,1 l2,-1 l-2,-1 z" style="fill:#E84;stroke:#420;stroke-width:0.1"></path>
<path d="M0,1 l0,2 l2,1 l0,-2 z" style="fill:#C62;stroke:#420;;stroke-width:0.1"></path>
<path d="M2,2 l0,2 l2,-1 l0,-2 z" style="fill:#A40;stroke:#420;;stroke-width:0.1"></path>
</g>
</defs>
</svg>
</div>
<script>
cube_elm=[],svg_cubes=null;
window.addEventListener("DOMContentLoaded",function(){
svg_cubes=document.getElementById("cubes");
for(y=6;y>=0;y--){
cubes[y]=[];
for(x=0;x<=6;x++){
cubes[y][x]=[];
for(z=0;z<=6;z++){
let xxyy=cube_conv(x,y,z);
let xx=xxyy[0];
let yy=xxyy[1];
let e=[];
e.elm=document.createElementNS("http://www.w3.org/2000/svg","use");
e.xx=e.x=x;
e.yy=e.y=y;
e.zz=e.z=z;
e.vx=(e.x-3)/40;
e.vz=(e.z-3)/40;
e.flag=0;
if(Math.random()<0.1){
e.elm.setAttributeNS(null,"href","#cuber");
e.v=0;
e.col=1;
}else{
e.elm.setAttributeNS(null,"href","#cubeg");
e.v=(Math.random())*0.3+0.1;
e.col=0;
}
e.elm.setAttributeNS(null,"x",xx);
e.elm.setAttributeNS(null,"y",yy);
svg_cubes.appendChild(e.elm);
cube_elm.push(e);
}
}
}
setTimeout(animate_cube,1000);
});
function animate_cube(){
for(let i=0;i<cube_elm.length;i++){
if(cube_elm[i].flag<2){
cube_elm[i].v+=0.01;
cube_elm[i].yy+=cube_elm[i].v;
cube_elm[i].xx+=cube_elm[i].vx;
cube_elm[i].zz+=cube_elm[i].vz;
}
if(cube_elm[i].yy>20&& cube_elm[i].flag==0){
cube_elm[i].v=-cube_elm[i].v;
cube_elm[i].yy+=cube_elm[i].v;
cube_elm[i].vx=-cube_elm[i].vx;
cube_elm[i].xx+=cube_elm[i].vx;
cube_elm[i].vz=-cube_elm[i].vz;
cube_elm[i].zz+=cube_elm[i].vz;
cube_elm[i].flag=1;
}else if(cube_elm[i].flag==1){
if(Math.round(cube_elm[i].yy*100)==cube_elm[i].y*100){
cube_elm[i].flag=2;
}
}
let xxyy=cube_conv(cube_elm[i].xx,cube_elm[i].yy,cube_elm[i].zz);
let xx=xxyy[0];
let yy=xxyy[1];
cube_elm[i].elm.setAttributeNS(null,"x",xx);
cube_elm[i].elm.setAttributeNS(null,"y",yy);
}
let flag=true;
for(let i=0;i<cube_elm.length;i++){
if(cube_elm[i].flag!=2){
flag=false;
}
}
if(flag){
cube_reset();
setTimeout(animate_cube,2000);
}else{
setTimeout(animate_cube,33);
}
}
function cube_reset(){
for(let i=0;i<cube_elm.length;i++){
cube_elm[i].xx=cube_elm[i].x;
cube_elm[i].yy=cube_elm[i].y;
cube_elm[i].zz=cube_elm[i].z;
cube_elm[i].flag=0;
if(cube_elm[i].col==1){
cube_elm[i].v=0;
}else{
cube_elm[i].v=(Math.random())*0.3+0.1;
}
cube_elm[i].vx=(cube_elm[i].x-3)/40;
cube_elm[i].vz=(cube_elm[i].z-3)/40;
}
}
function cube_conv(x,y,z){
let xx=28+z*(-2) +x*2 + y*0;
let yy=2+z*1 +x*1 + y*2;
return [xx,yy];
}
</script>