adding svg to site

2026-03-13 12:39:25 +10:00
parent 52b800df5c
commit 300d5664cb
7 changed files with 291 additions and 2 deletions
--- a/current_site/src/pages/svg_playground.pug
+++ b/current_site/src/pages/svg_playground.pug
@@ -0,0 +1,75 @@
+include ../components/mixins.pug
+
+doctype html
+html(lang="ru")
+    head
+        meta(charset="utf-8")
+        title Трансформация и анимация
+        script(src="svg_playground/d3.v7.min.js")
+        script(src="svg_playground/main.js")
+        script(src="svg_playground/image.js")
+        script(src="svg_playground/path.js")
+    body
+        +navbarMixin("SVG Playground")
+
+        form#setting
+            p.path-anim-related-inverse
+                | Координаты рисунка
+                br
+                label(for="cx") x:
+                input#cx(type="number", value="300", max="600", min="0")
+                label.anim-related(for="cx_finish") до:
+                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")
+                label.anim-related(for="cy_finish") до:
+                input#cy_finish(type="number", value="300", max="600", min="0")
+
+            p.path-anim-related
+                | Пути перемещения
+                br
+                select#pathSelect
+                    option(value="0") Буквой "Г"
+                    option(value="1") По кругу
+                    option(value="2") Спиралью
+
+            p.path-anim-related-inverse
+                | Масштаб
+                br
+                label(for="sx") по x:
+                input#sx(type="number", value="1", max="100", min="-100")
+                label.anim-related(for="sx_finish") до:
+                input#sx_finish.anim-related(type="number", value="1.5", max="100", min="-100")
+                br
+                label(for="sy") по y:
+                input#sy(type="number", value="1", max="100", min="-100")
+                label.anim-related(for="sy_finish") до:
+                input#sy_finish.anim-related(type="number", value="1.5", max="100", min="-100")
+
+            p.path-anim-related-inverse
+                | Поворот
+                br
+                label(for="r") x:
+                input#r(type="number", value="0", max="360", min="-360")
+                label.anim-related(for="r_finish") до:
+                input#r_finish.anim-related(type="number", value="360", max="360", min="-360")
+
+            p
+                input#applyButton.anim-related-inverse(type="button", value="Нарисовать")
+                input#clearButton(type="button", value="Отчистить")
+
+            p
+                | Включить Анимацию?
+                input#enableAnimCheckbox(type="checkbox")
+                br
+                label.anim-related(for="animAlongPathCheckbox")  Перемещение вдоль пути?
+                input#animAlongPathCheckbox.anim-related(type="checkbox")
+                select#animTypeSelect.anim-related
+                    option(value="0") linear
+                    option(value="1") elastic
+                    option(value="2") bounce
+                br
+                input#startAnimButton.anim-related(type="button", value="Анимировать")
+
+        svg