JSFiddle - React, Tailwind, and code Playground

by Zevan

HTML

<div id="world"></div>

CSS

*{
 margin : 0 !important;
 padding : 0 !important;  
}
#world{
 width : 500px;
 height : 500px;
 border : 1px solid red; 
}

JavaScript

/*

http://freespace.virgin.net/hugo.elias/routines/3d_to_2d.htm

*/

var r = new Raphael("world");

var width = 500, height = 500;
var centerX = width / 2, centerY = height / 2;

var circles = [];
var CIRCLE_NUM = 10;
var zoom = 10;
var maxZ = 5;

for (var i = 0; i<CIRCLE_NUM; i++){
  circles[i] = new Circle(Math.random() * 200 - 100, Math.random() * 200 - 100, Math.random() * maxZ);   
}

function sortOnZ(a, b){
    return b.z - a.z;
}

var offX = 0, offY = 0;
document.onmousemove = function(e){
   // offX = e.pageX - width;
    // offY = e.pageY - height;
    offZ = e.pageX / 10;
}
    
var theta = 0;
var offZ = 0;
setInterval(function(){
   // offZ = ;// = 1 + 3 * Math.cos(theta);
    theta += 0.03;
    circles.sort(sortOnZ);
    for (var i = 0; i<CIRCLE_NUM; i++){
      circles[i].update();
    }
}, 30);

function Circle(x, y, z){
    
    var circle = r.circle(0, 0, 10).attr("fill", "#fff");
    var sx, sy;
    this.update = function(){
        if (z == 0) z = 1;
        var zp = (offZ + z);
        sx = (x + offX) / zp * zoom + centerX;
        sy = (y + offY) / zp * zoom + centerY;
        var newScale =  10 - z;
        circle.attr({cx : sx, cy: sy, scale : newScale + "," + newScale}).toFront();
        this.z = z;
    }
    this.update();
}

/*
screen.x = x / z * zoom
screen.y = y / z * zoom
*/