AllaTurkaa

HTML

 <style>
#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9990;
  pointer-events: none;
}
</style>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const gravity = 0.25;
const damping = 0.99;
const baseLength = 18;
const num = 11;
const iterations = 5;
const imgs = [];
for(let i=0;i<num;i++){
    const img = new Image();
    img.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMxevHuDjcN3PrCCJ_jFs158T3KiJwC-nROhBB2uz02U_T0h7lRkHUlmW-ItzbLsQwbrtYjw91yz5Oauj2YcOnFG4-6G_sBPj4B3-dG_W-cz-Ycurbfl-Kf4mi4YFD5BFtdfcV9dDjv05aQyAeSvbO2nLmhi4tsE6lo0vqPwA697KYWX2jv1mhBTug1s/s1600/turk_bayragi_02_tam35blog.gif";
    imgs.push(img);
}
const points = [];
for(let i=0;i<num;i++){
    points.push({
        x: canvas.width/2,
        y: 100 + i*baseLength,
        oldX: canvas.width/2,
        oldY: 100 + i*baseLength
    });
}
let mouseX = canvas.width/2;
let mouseY = 100;
window.addEventListener("mousemove", e=>{
    mouseX = e.clientX;
    mouseY = e.clientY;
});
const _0x9fa3 = "NjZESUxCRVIgWA==";
function update(){
    for(let i=0;i<num;i++){
        const p = points[i];
        const vx = (p.x - p.oldX) * damping;
        const vy = (p.y - p.oldY) * damping;
        p.oldX = p.x;
        p.oldY = p.y;
        if(i !== 0){ p.x += vx; p.y += vy + gravity; }
    }
    points[0].x = mouseX + 9;
    points[0].y = mouseY + 36;
    for(let k=0;k<iterations;k++){
        for(let i=1;i<num;i++){
            const p1 = points[i-1];
            const p2 = points[i];
            let dx = p2.x - p1.x;
            let dy = p2.y - p1.y;
            let dist = Math.hypot(dx,dy);
            let diff = (dist - baseLength) / dist;
            const ox = dx*0.5*diff;
            const oy = dy*0.5*diff;
            if(i!==1){ p1.x += ox; p1.y += oy; }
            p2.x -= ox;
            p2.y -= oy;
        }
    }
}
function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(let i=0;i<num;i++){
        let scale = 1 - Math.min(0.5, Math.hypot(points[i].x - mouseX, points[i].y - mouseY)/600);
        let size = (i===0?30:20) * scale;
        ctx.drawImage(imgs[i], points[i].x - size/2, points[i].y - size/2, size, size);
    }
}
function loop(){
    update();
    draw();
    requestAnimationFrame(loop);
}
loop();
window.addEventListener("resize", ()=>{
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});
</script>