diff --git a/Cursor Animation/Script.js b/Cursor Animation/Script.js
new file mode 100644
index 0000000..ec7f4e9
--- /dev/null
+++ b/Cursor Animation/Script.js	
@@ -0,0 +1,11 @@
+var cursor = document.getElementById("Cursor");
+
+document.onmousemove = function(e){
+    cursor.style.left = (e.pageX-23)+"px";
+    cursor.style.top = (e.pageY-23)+"px";
+    cursor.style.background = "darkslateblue";
+    cursor.style.display = "block";
+}
+document.onclick = function(e){
+    cursor.style.background = "white";
+}
\ No newline at end of file
diff --git a/Cursor Animation/back.jpg b/Cursor Animation/back.jpg
new file mode 100644
index 0000000..fa36fab
Binary files /dev/null and b/Cursor Animation/back.jpg differ
diff --git a/Cursor Animation/index.html b/Cursor Animation/index.html
new file mode 100644
index 0000000..93ebf57
--- /dev/null
+++ b/Cursor Animation/index.html	
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cursor Animation</title>
+</head>
+
+<body>
+    <div class="cursor" id="Cursor"></div>
+</body>
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    body {
+        background: url(back.jpg);
+        background-size: cover;
+        cursor:grab;
+    }
+
+    .cursor {
+        width: 40px;
+        height: 40px;
+        border-radius: 100%;
+        position: absolute;
+        transition: 0.05s all ease;
+        background-color: darkslateblue;
+    }
+</style>
+<script src="Script.js">
+</script>
+
+</html>
\ No newline at end of file
