Add link to download SVG

src/main.ts

@@ -126,6 +126,18 @@ const input = (label: string, attrs: any) =>
 const select = (label: string, attrs: any, options: string[]) =>
   ["div", {}, ["label", {}, label, ["select", attrs, ...options.map(u => ["option", {value: u}, u])]]]
 
+const svg = sync({
+  src: {
+    scene,
+    size,
+    unit,
+  }
+}).map(({
+  scene,
+  size,
+  unit
+}) => asSvg(svgDoc({ width: `${size[0]}${unit}`, height: `${size[1]}${unit}`, viewBox: `0 0 ${size[0]} ${size[1]}` }, scene)))
+
 $compile(
   ["div.container", {},
    ["main", {},
@@ -168,20 +180,10 @@ $compile(
       oninput: $inputNum(height),
     }),
     select("Unit", { oninput: $input(unit) }, ["mm", "px"]),
-    ["h2", {}, "SVG Export"],
-    ["div", {}, ["textarea", {
-      value: sync({
-        src: {
-          scene,
-          size,
-          unit,
-        }
-      }).map(({
-        scene,
-        size,
-        unit
-      }) => asSvg(svgDoc({ width: `${size[0]}${unit}`, height: `${size[1]}${unit}`, viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))),
-      cols: 80,
-      rows: 20
-    }]]]]
+    ["h2", {}, "Export"],
+    ["div", {}, ["a", {
+      class: "button",
+      href: svg.map(svg => `data:text/svg,${encodeURI(svg)}`),
+      download: sync({ src: { xSeeds, ySeeds } }).map(({ xSeeds, ySeeds }) => `hitomezashi-pattern-${Date.now()}-${xSeeds.join('')}-${ySeeds.join('')}.svg`)
+    }, "Download SVG"]]]]
 ).mount(document.body)