<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<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>
<svg id="canvas"></svg> <script>
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)
