index.html
1. <canvas id="canvas"></canvas>
This is the main drawing surface where all the tentacle animation is rendered.
2. <svg> ... </svg>
A decorative SVG monster outline placed on top of the canvas.
3. <link rel="stylesheet" href="./style.css">
Loads the CSS file that sets the background and removes margins.
4. <script src="./script.js"></script>
Loads and runs all the animation logic.
style.css
1. body, html { margin: 0; padding: 0; }
Removes default browser spacing so the canvas can cover the full screen.
2. position: fixed;
Prevents the page from scrolling.
3. background: black;
Sets the page background to pure black, making the tentacle glow effect visible.
script.js
1. function init(elemid) { ... }
Initializes the canvas, sets its width/height to the screen size, and fills the background.
2. class segment { ... }
Each tentacle is made of many segments that follow each other like inverse kinematics.
3. class tentacle { ... }
Creates a tentacle made of segments, handles movement, updates positions, and draws it.
4. tent[i].move(last_target, target);
The core animation logic: each tentacle moves toward the target (mouse or auto-motion).
5. function loop() { ... requestAnimFrame(loop); }
Infinite animation loop that clears the screen and redraws all tentacles every frame.
