console
"use strict";
const screen = document.getElementById("screen");
const xmlns = "http://www.w3.org/2000/svg";
const xlinkns = "http://www.w3.org/1999/xlink";
window.addEventListener(
"pointermove",
(e) => {
pointer.x = e.clientX;
pointer.y = e.clientY;
rad = 0;
},
false
);
const resize = () => {
width = window.innerWidth;
height = window.innerHeight;
};
let width, height;
window.addEventListener("resize", () => resize(), false);
resize();
const prepend = (use, i) => {
const elem = document.createElementNS(xmlns, "use");
elems[i].use = elem;
elem.setAttributeNS(xlinkns, "xlink:href", "#" + use);
elem.setAttributeNS(null, "opacity", 1 - 1 / N * i);
screen.prepend(elem);
};
const N = 60;
const elems = [];
for (let i = 0; i < N; i++) elems[i] = { use: null, x: width / 2, y: 0 };
const pointer = { x: width / 2, y: height / 2 };
const radm = Math.min(pointer.x, pointer.y) - 20;
let frm = 1 + Math.random();
let rad = 0;
let a = 0;
let b = 0;
for (let i = 1; i < N; i++) {
if (i === 1) prepend("Cabeza", i);
else if (i === 4 || i === 14 || i === 26) prepend("Aletas", i);
else prepend("Espina", i);
}
const run = () => {
requestAnimationFrame(run);
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;
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) / 4;
e.y += (ep.y - e.y) / 4;
const s = (102 - 6 * (1 - i)) / (10000 / radm);
e.use.setAttributeNS(
null,
"transform",
`translate(${(ep.x + e.x) / 2},${(ep.y + e.y) / 2}) rotate(${
(180 / Math.PI) * a
}) translate(${0},${0}) scale(${s},${s})`
);
}
if (rad < radm) rad++;
frm += 0.003;
if (rad > 60) {
pointer.x += (width / 2 - pointer.x) * 0.05;
pointer.y += (height / 2 - pointer.y) * 0.05;
}
};
run();
<svg>
<defs>
<g id="Cabeza" transform="matrix(1, 0, 0, 1, 0, 0)">
<path style="fill:#FFFF00;fill-opacity:1" d="M-11.45,-6.65Q-10.25 -6.4 -10.05 -5.7Q-9.9 -5.05 -10.8 -4.3Q-11.7 -3.5 -13.15 -3.05L-15.9 -2.9Q-17.05 -3.15 -17.2 -3.8Q-17.4 -4.5 -16.5 -5.3Q-15.6 -6.05 -14.1 -6.45L-11.45 -6.65M-10.55,4.25Q-9.65 5.05 -9.8 5.75Q-10 6.45 -11.15 6.65L-13.85 6.5Q-15.35 6.05 -16.25 5.25Q-17.15 4.5 -16.95 3.85Q-16.8 3.15 -15.6 2.9L-12.9 3.1Q-11.45 3.5 -10.55 4.25" />
<radialGradient id="RadialGradID_2" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0462036, 0, 0, 0.0462036, -18.7, -0.85)" spreadMethod="pad" cx="0" cy="0" r="819.2" fx="0" fy="0">
<stop offset="0" style="stop-color:#F70000;stop-opacity:1" />
<stop offset="1" style="stop-color:#0068A0;stop-opacity:1" />
</radialGradient>
<path style="fill:url(#RadialGradID_2) " d="M5.95,-11.6L2.45 -9.3Q-2.6 -5.7 2.6 -4.45L11.7 -2.65Q18.8 -1.1 18.8 -0.05Q18.8 1 11.7 2.6L2.6 4.4Q-2.6 5.6 2.45 9.25L5.95 11.5L17.75 17.6Q28.7 23.15 28.3 23.2Q27.4 23.15 13.35 16.9L-4.8 8.9Q-5.55 8.6 -4.8 12.05Q-4.25 14.75 -5.25 13.1Q-6.05 11.75 -9.9 9.9L-14.7 7.75Q-15.1 7.55 -16.45 6.9L-18.45 5.65L-25.4 4.25Q-31.8 3.3 -32.25 2.65L-32.95 1.25L-33.3 0L-33.15 -1.5L-32.8 -3.1Q-32.55 -3.55 -29.6 -4.35L-23.45 -5.45Q-19.75 -6 -18.7 -6.7L-17.05 -7.65L-15.4 -8.2Q-10.75 -9.7 -4.7 -14.2Q-3.7 -14.75 -5 -11.5Q-6.3 -8.2 -4.8 -8.95Q-0.65 -11 13.9 -16.3Q28.25 -21.55 29.45 -21.5Q29.8 -21.5 18.3 -16.8L5.95 -11.6M-14.1,-6.45Q-15.6 -6.05 -16.5 -5.3Q-17.4 -4.5 -17.2 -3.8Q-17.05 -3.15 -15.9 -2.9L-13.15 -3.05Q-11.7 -3.5 -10.8 -4.3Q-9.9 -5.05 -10.05 -5.7Q-10.25 -6.4 -11.45 -6.65L-14.1 -6.45M-12.9,3.1L-15.6 2.9Q-16.8 3.15 -16.95 3.85Q-17.15 4.5 -16.25 5.25Q-15.35 6.05 -13.85 6.5L-11.15 6.65Q-10 6.45 -9.8 5.75Q-9.65 5.05 -10.55 4.25Q-11.45 3.5 -12.9 3.1" />
</g>
<g id="Aletas" transform="matrix(1, 0, 0, 1, 0, 0)">
<radialGradient id="RadialGradID_3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0462036, 0, 0, 0.0462036, -18.7, -0.85)" spreadMethod="pad" cx="0" cy="0" r="819.2" fx="0" fy="0">
<stop offset="0" style="stop-color:#FFD71C;stop-opacity:1" />
<stop offset="0.341176" style="stop-color:#F70000;stop-opacity:1" />
<stop offset="1" style="stop-color:#0068A0;stop-opacity:1" />
</radialGradient>
<path style="fill:url(#RadialGradID_3) " d="M29.35,-60Q29.85 -60 18.25 -36.05Q6.7 -12.1 5.95 -11.6L2.45 -9.3L25.6 -22.65Q49.2 -36.25 44.5 -32.65Q18.55 -12.9 19.9 -10.6Q20.3 -9.9 23.6 -10.9L27.25 -12Q29.15 -11.65 19.9 -7.3Q10.6 -2.9 11.7 -2.65Q20 -0.8 20 0Q20 0.75 11.7 2.6L21.75 8.5Q30.15 13.5 20 10.5Q11.7 8.1 28.2 18.55L45.55 29.95Q43.5 30.4 21.45 19Q1.9 8.85 2.45 9.25L5.95 11.5Q6.7 12 17.95 36Q29.25 59.95 28.75 60L9.2 37.65Q-9.35 16.3 -9.75 20Q-10.3 24.5 -11.95 15.8Q-14.05 4.95 -15.1 4.4Q-18.8 2.55 -18.8 -0.05Q-18.8 -2.65 -15.1 -4.45Q-13.95 -5.05 -11.45 -14.5Q-9.35 -22.4 -9.1 -20Q-8.2 -11.9 10.1 -35L22.9 -51.9Q28.95 -60 29.35 -60" />
</g>
<g id="Espina" transform="matrix(1, 0, 0, 1, 0, 0)">
<radialGradient id="RadialGradID_1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0462036, 0, 0, 0.0462036, -18.7, -0.85)" spreadMethod="pad" cx="0" cy="0" r="819.2" fx="0" fy="0">
<stop offset="0.00784314" style="stop-color:#F70000;stop-opacity:1" />
<stop offset="0.521569" style="stop-color:#F99F09;stop-opacity:1" />
<stop offset="1" style="stop-color:#FFD71C;stop-opacity:1" />
</radialGradient>
<path style="fill:url(#RadialGradID_1) " d="M11.7,-2.65Q18.8 -1.1 18.8 -0.05Q18.8 1 11.7 2.6L2.6 4.4Q-2.6 5.6 2.45 9.25L5.95 11.5Q7.35 12.45 6.3 12.5L-1.7 9Q-7.75 6.3 -4.8 8.9Q-2.45 10.95 -7.7 8.3L-15.1 4.4Q-18.8 2.55 -18.8 -0.05Q-18.8 -2.65 -15.1 -4.45L-7.75 -8.35Q-2.5 -11 -4.8 -8.95Q-7.25 -6.7 -1.4 -9.3L6.3 -12.55Q7.35 -12.55 5.95 -11.6L2.45 -9.3Q-2.6 -5.7 2.6 -4.45L11.7 -2.65" />
</g>
</defs>
<g id="screen" />
</svg>
body, html {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
touch-action: none;
}
svg {
position: absolute;
width: 100%;
height: 100%;
background: #000;
cursor: crosshair;
}