<def> and <use> arc path in ten-print header

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 || ''))

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;