spiral path added

current_site/src/pages/svg_playground.pug

@@ -22,9 +22,9 @@ html(lang="ru")
                 input#cx_finish.anim-related(type="number", value="300", max="600", min="0")
                 br
                 label(for="cy") y:
-                input#cy.anim-related(type="number", value="300", max="600", min="0")
+                input#cy(type="number", value="300", max="600", min="0")
                 label.anim-related(for="cy_finish") до:
-                input#cy_finish(type="number", value="300", max="600", min="0")
+                input.anim-related#cy_finish(type="number", value="300", max="600", min="0")
 
             p.path-anim-related
                 | Пути перемещения

current_site/src/pages/svg_playground/path.js

@@ -41,14 +41,29 @@ function createPathCircle() {
     for (let t = 0 ; t <= Math.PI * 2; t += 0.1) {
         data.push(
             {x: width / 2 + width / 3 * Math.sin(t),
-             y: height / 2 + height / 3 * Math.cos(t)}
+             y: height / 2 + height / 3* Math.cos(t)}
+        );
+    }
+    return data
+}
+function createPathSpiral() {
+    const svg = d3.select("svg")
+	const width = svg.attr("width")
+	const height = svg.attr("height")
+    let data = [];
+    // используем параметрическую форму описания круга
+    // центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины
+    for (let t = 0 ; t <= Math.PI * 6; t += 0.1) {
+        data.push(
+            {x: width / 2 + width / 3 *(1-(t/(Math.PI * 6))) * -Math.sin(t),
+             y: height / 2 + height / 3*(1-(t/(Math.PI * 6))) * Math.cos(t)}
         );
     }
     return data
 }
 const drawPath =(typePath) => {
 	// создаем массив точек
-	const dataPoints = (typePath == 0)? createPathG() : createPathCircle();
+	const dataPoints = [ createPathG, createPathCircle,createPathSpiral][Number(typePath)]()
 
 	const line = d3.line()
 		.x((d) => d.x)