drawings wip

script.js

@@ -109,15 +109,24 @@ var updateSvgPath = function () {
 const presets = document.querySelectorAll(".preset");
 
 for (const preset of presets) {
-	if (preset.dataset.path) {
+	let presetPath = preset.querySelector("path");
+	if (presetPath) {
 		let offset = preset.getBoundingClientRect();
-		let drawing = preset.dataset.path.split(" ");
+
+		let drawing = presetPath.getPathData();
 		let index = 1;
 
 		preset.addEventListener("mousemove", (e) => {
-			strPath += ` ${drawing[index]}`;
-			index += 1;
-			path.setAttribute("d", strPath);
+			if (index < drawing.length) {
+				let values = drawing[index].values
+					.map((value, index) => {
+						return index % 2 == 0 ? value + offset.x : value + offset.y;
+					})
+					.join(" ");
+				strPath += ` ${drawing[index].type} ${values}`;
+				index += 1;
+				path.setAttribute("d", strPath);
+			}
 		});
 	}
 }

style.css

@@ -7,7 +7,7 @@ body {
 }
 
 
-svg {
+#svg-canvas {
     position: absolute;
     top: 0;
     left: 0;
@@ -27,3 +27,6 @@ svg {
     z-index: 100;
 }
 
+.preset svg {
+    display: none;
+}