EXPANDING CIRCLES YAY

2 files changed, 23 insertions, 4 deletions

diff --git a/script.js b/script.js
index 00140c1..188dbe3 100644
--- a/script.js
+++ b/script.js
@@ -38,12 +38,12 @@ document.querySelectorAll("svg").forEach(function(svg) {
 			a.cm.y += p.y
 			a.p.push(p)
 			// Show circles for debugging
-			let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+			/* let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 			circle.setAttribute("cx", p.x);
 			circle.setAttribute("cy", p.y);
 			circle.setAttribute("r", rad);
 			circle.setAttribute("fill", "red");
-			svg.appendChild(circle)
+			svg.appendChild(circle) */
 		}
 	})
 	a.cm.x /= a.p.length
@@ -201,8 +201,18 @@ function updatev(event) {
 		a.vy += 100 * (a.y - event.clientY) / d
 	}
 
-	// TODO: Display spreading out circles
-
+	// Display spreading out circles
+	let circle = document.createElement("div")
+	circle.style.width = circle.style.height = "10px"
+	circle.style.left = event.clientX - 5 + "px"
+	circle.style.top = event.clientY - 5 + "px"
+	document.body.appendChild(circle)
+	circle.offsetWidth
+	circle.style.transform = "scale(500)"
+	circle.style.opacity = "0"
+	setTimeout(function () {
+		document.body.removeChild(circle);
+	}, 1000);
 }
 
 cnt = 0
diff --git a/style.css b/style.css
index fe2652d..9a92d18 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,8 @@ body {
 	background-position: center;
 	background-repeat: no-repeat;
 	background-attachment: fixed;
+	overflow-y: hidden;
+	overflow-x: hidden;
 	touch-action: manipulation;
 }
 
@@ -43,3 +45,10 @@ svg {
 	animation: color 10s infinite linear;
 	position: absolute;
 }
+
+div {
+	position: absolute;
+	border-radius: 50%;
+	background-color: #007bff;
+	transition: transform 1000ms ease-in-out, opacity 1000ms ease-in-out;
+}