Project demo
Introduction:
In this project, we are creating a cool green snake that follows the movement of your mouse cursor on the screen. It looks like a real snake sliding smoothly wherever you move the cursor. We’ll build it using simple HTML, CSS, and JavaScript without using any external libraries. The snake has a glowing green body and bright eyes that make it look more alive and realistic. Each part of the snake moves smoothly, following the head in a natural motion. This small project is fun to make and helps you learn how animations and mouse tracking work together in web development.
SOURCE CODE 👉 Zip file available at the end of this project.
HTML:
The HTML code creates the main structure of our snake animation project. Inside the body, there’s a main container that holds everything on the screen. A heading is added at the top to show the title “Snake Follows Cursor,” and below it, there’s a message telling the user to move their mouse. The <div id="snake"> is the main element where all snake parts will appear dynamically using JavaScript. Finally, the script file is linked at the bottom to make the snake follow the cursor when the page loads.
..
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Green Snake Follower</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="title">Snake Follows Cursor</h1>
<div class="snake" id="snake"></div>
<div class="instructions">Move your mouse — the snake follows!</div>
</div>
<script src="script.js"></script>
</body>
</html>
.
CSS:
The CSS code styles the entire snake animation and gives it a dark, glowing look. The body has a smooth gradient background that creates a night-like theme. Each snake segment is circular, colored green, and given a glowing shadow to make it look alive. The head of the snake is slightly bigger with eyes and pupils styled in white and black for a realistic effect. The title and instructions are positioned at the top and bottom of the screen with glowing text for visibility. Overall, the CSS makes the snake smooth, shiny, and visually attractive against the dark background.
.
.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(to bottom, #1a2a3a, #0d1b2a);
height: 100vh;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.snake-segment {
position: absolute;
border-radius: 50%;
background: #4cd137;
/* green color */
box-shadow: 0 0 20px rgba(76, 209, 55, 0.5);
}
.head {
width: 60px;
height: 40px;
border-radius: 50% 50% 40% 40%;
background: #4cd137;
z-index: 10;
box-shadow: 0 0 25px rgba(76, 209, 55, 0.7);
}
.eye {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
top: 10px;
z-index: 11;
}
.eye.left {
left: 12px;
}
.eye.right {
right: 12px;
}
.pupil {
position: absolute;
width: 5px;
height: 5px;
background: black;
border-radius: 50%;
top: 2.5px;
left: 2.5px;
}
.title {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
color: #f1faee;
text-align: center;
font-size: 36px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
z-index: 20;
}
.instructions {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #f1faee;
text-align: center;
font-size: 18px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
z-index: 20;
}
.
.
JavaScript:
The JavaScript code makes the snake come alive and follow the cursor smoothly. It first creates multiple snake segments using a loop and stores them in an array. The first segment is the head, which has eyes and pupils added to it for a realistic look. Then, it constantly tracks the mouse position using an event listener. In the animation function, the head moves toward the cursor, and each following segment moves toward the one in front, creating a smooth, snake-like motion. The requestAnimationFrame function keeps the movement continuous and natural.
.
document.addEventListener("DOMContentLoaded", function () {
const snake = document.getElementById("snake");
const segmentCount = 25; // more segments = smoother snake
const segments = [];
// Create segments
for (let i = 0; i < segmentCount; i++) {
const segment = document.createElement("div");
segment.classList.add("snake-segment");
if (i === 0) {
segment.classList.add("head");
const leftEye = document.createElement("div");
leftEye.classList.add("eye", "left");
const leftPupil = document.createElement("div");
leftPupil.classList.add("pupil");
leftEye.appendChild(leftPupil);
segment.appendChild(leftEye);
const rightEye = document.createElement("div");
rightEye.classList.add("eye", "right");
const rightPupil = document.createElement("div");
rightPupil.classList.add("pupil");
rightEye.appendChild(rightPupil);
segment.appendChild(rightEye);
}
snake.appendChild(segment);
segments.push({
element: segment,
x: window.innerWidth / 2,
y: window.innerHeight / 2,
});
}
let mouseX = window.innerWidth / 2;
let mouseY = window.innerHeight / 2;
document.addEventListener("mousemove", (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
function animateSnake() {
const head = segments[0];
// Move head directly to cursor
head.x += (mouseX - head.x) * 0.2;
head.y += (mouseY - head.y) * 0.2;
head.element.style.left = head.x - 30 + "px";
head.element.style.top = head.y - 20 + "px";
// Move each body part smoothly to the previous part
for (let i = 1; i < segments.length; i++) {
const prev = segments[i - 1];
const curr = segments[i];
const dx = prev.x - curr.x;
const dy = prev.y - curr.y;
const distance = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx);
const segmentLength = 15; // tighter body, no visible gaps
curr.x = prev.x - Math.cos(angle) * segmentLength;
curr.y = prev.y - Math.sin(angle) * segmentLength;
const size = 40 - i * 1.2;
curr.element.style.width = `${Math.max(size, 10)}px`;
curr.element.style.height = `${Math.max(size, 10)}px`;
curr.element.style.left = curr.x - size / 2 + "px";
curr.element.style.top = curr.y - size / 2 + "px";
}
requestAnimationFrame(animateSnake);
}
animateSnake();
});
.
.
SOURCE CODE 👇
Download “Snake-Follows-Cursor.zip” Snake-Follows-Cursor.zip – Downloaded 2 times – 2.44 KB
