Reports

<!DOCTYPE html> <html lang="en">

<head>

<title>Blinking Caret Trail</title>

<style>

body { margin: 0; background: #111; overflow: hidden; }  

svg { width: 100vw; height: 100vh; display: block; }  /\* blinking effect \*/

rect {

fill: lime;

rx: 2;

animation: blink 1s step-start infinite;

}

@keyframes blink {

50% { opacity: 0; }

}

</style>

</head>

<body>

const svg = document.getElementById("canvas");

const width = window.innerWidth;

const height = window.innerHeight;

const N = 25; // number of carets

const rad = 150;

let frm = 0;

const pointer = { x: 0, y: 0 };

const elems = [];

// create SVG rects as carets

for (let i = 0; i < N; i++) {

const use = document.createElementNS("http://www.w3.org/2000/svg", "rect");

use.setAttribute("x", -2);

use.setAttribute("y", -15);

use.setAttribute("width", 4);

use.setAttribute("height", 30);

svg.appendChild(use);

elems.push({ x: width/2, y: height/2, use });

}

window.addEventListener("mousemove", e => {

pointer.x = e.clientX - width / 2;

pointer.y = e.clientY - height / 2;

});

const run = () => {

requestAnimationFrame(run);

frm += 0.02;

let e = elems[0];

const ax = (Math.cos(3 * frm) * rad * width) / height;

const ay = (Math.sin(4 * frm) * rad * height) / width;

e.x += (ax - pointer.x - e.x) / 10;

e.y += (ay - pointer.y - e.y) / 10;

e.use.setAttribute("transform", `translate(${e.x + width/2}, ${e.y + height/2})`);

for (let i = 1; i < N; i++) {

let e = elems\[i\];  

let ep = elems\[i - 1\];  

const a = Math.atan2(e.y - ep.y, e.x - ep.x);  

e.x -= (ep.x - e.x - (Math.cos(a) \* (100 - i)) / 5) / 4;  

e.y -= (ep.y - e.y - (Math.sin(a) \* (100 - i)) / 5) / 4;  



e.use.setAttribute("transform",  

  \`translate(${e.x + width/2}, ${e.y + height/2}) rotate(${(180/Math.PI)\*a})\`  

);

}

};

run();

</script> </body>

</html> ( pydhroid 3)

79766116