From 6b4be4d7e3225268138568e3873609c01114608b Mon Sep 17 00:00:00 2001
From: arne <hi@arnes.space>
Date: Mon, 22 Jan 2024 21:12:08 +0100
Subject: [PATCH] <def> and <use> arc path in ten-print header

---
 src/_includes/filters/header.js | 22 +++++++++++++---------
 src/assets/style.scss           |  2 +-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/_includes/filters/header.js b/src/_includes/filters/header.js
index 322f9e3..d0c5eb5 100644
--- a/src/_includes/filters/header.js
+++ b/src/_includes/filters/header.js
@@ -40,7 +40,7 @@ const arc = (cx, cy, radius, start, end) => {
 const numTiles = 10
 const width = 500
 const height = 500
-const halfPi = Math.PI / 2
+const quarterTau = Math.PI / 2
 
 /**
  * Generates a unique SVG pattern for some given content.
@@ -55,19 +55,23 @@ const tenPrint = content => {
   const radius = width / numTiles / 2
   const xs = range(numTiles + 1).map(x => width * (x / numTiles))
   const ys = range(numTiles + 1).map(y => width * (y / numTiles))
+  const startAngle = random() < 0.5 ? quarterTau : 0
+
+  const template = arc(0, 0, radius, startAngle, startAngle + 3 * quarterTau)
+  template[1] = {...template[1], id: 'arc-a' }
 
   return ["svg.ten-print",
           {"viewBox": `${-radius} ${-radius} ${width + 2*radius} ${height + 2*radius}`,
            "xmlns": "http://www.w3.org/2000/svg",
            "style": "overflow: visible"},
-          ["style", "path { fill: none; stroke: none; }"], // avoid flash of unstyled content
-          ["g", {"transform": "translate(0.5 0.5)"},
-           ys.map(y =>
-             xs.map(x => {
-               const startAngle = random() < 0.5 ? halfPi : 0
-               return arc(x, y, radius, startAngle, startAngle + 3 * halfPi)
-             })
-           )]]
+          ["style", ".arc { fill: none; stroke: none; }"], // avoid flash of unstyled content
+          // pre-define our args
+          ["defs",
+           template,
+           ["use", {"href": "#arc-a", "id": "arc-b", "transform": "rotate(90)"}]],
+          // <use> the args with predefined rotations
+          ["g", {"transform": "translate(0.5 0.5)"}, ys.map(y => xs.map(x =>
+            ["use", {x, y, "class": "arc", "href": (random() < 0.5 ? "#arc-b" : "#arc-a") }]))]]
 }
 
 module.exports = content => serialize(tenPrint(content || ''))
diff --git a/src/assets/style.scss b/src/assets/style.scss
index f5e327e..35ba559 100644
--- a/src/assets/style.scss
+++ b/src/assets/style.scss
@@ -85,7 +85,7 @@ a {
   display: block;
   max-width: 100%;
 
-  path {
+  .arc {
     stroke: $highlight;
     fill: transparent;
     stroke-width: 1.5px * $factor;