Dragon - Cursor Animation

AI Overview: Dragon Cursor Animation

This project creates an interactive, fluid "dragon" or sea-serpent animation that follows the user's mouse or touch movements across the screen. The dragon is composed of multiple individual segments that move with a "follow-the-leader" physics effect, creating a graceful, organic motion as it curves and stretches.

The project is built using a combination of SVG (Scalable Vector Graphics) for the visuals and JavaScript for the physics engine. Instead of drawing a single static image, the code defines three distinct parts—a head, fins, and spine segments—inside the HTML. JavaScript then clones these parts 40 times and links them together in a chain.

The core logic relies on a continuous animation loop that calculates the distance and angle between each segment. When the user moves the pointer, the "head" segment moves toward that coordinate. Every subsequent segment then calculates the angle to the piece in front of it using trigonometry, rotating and shifting its position to maintain a consistent body shape.

Key Code Snippets

1. Defining the Dragon Parts
The HTML uses the <defs> tag to store the shapes of the dragon's body parts so they can be reused multiple times without rewriting the path data.

<g id="Cabeza" transform="matrix(1, 0, 0, 1, 0, 0)">
  <path style="fill:#000000;fill-opacity:1" d="M-21.05,-8.25Q-13.6 -15.95 -1.3 -12.1..." />
</g>

2. Building the Body Chain
This JavaScript loop determines the order of the dragon's body, placing the head first, fins at specific intervals, and spine segments everywhere else.

for (let i = 1; i < N; i++) {
	if (i === 1) prepend("Cabeza", i);
	else if (i === 8 || i === 14) prepend("Aletas", i);
	else prepend("Espina", i);
}

3. Calculating Movement and Rotation
Inside the animation loop, Math.atan2 is used to find the angle between the current segment (e) and the one before it (ep), ensuring the segment faces the right direction.

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;

4. Dynamic Scaling and Positioning
This snippet applies the calculated coordinates, rotation, and a tapering scale to each SVG element to make the tail appear smaller than the head.

const s = (162 + 4 * (1 - i)) / 50;
e.use.setAttributeNS(
	null,
	"transform",
	`translate(${(ep.x + e.x) / 2},${(ep.y + e.y) / 2}) rotate(${(180 / Math.PI) * a}) scale(${s},${s})`
);