near/arnes.space
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
arne 2024-01-22 21:12:08 +01:00
commit 6b4be4d7e3
2 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/_includes/filters/header.js
View file

@ -40,7 +40,7 @@ const arc = (cx, cy, radius, start, end) => {
const numTiles = 10 const numTiles = 10
const width = 500 const width = 500
const height = 500 const height = 500
const halfPi = Math.PI / 2 const quarterTau = Math.PI / 2
/** /**
* Generates a unique SVG pattern for some given content. * Generates a unique SVG pattern for some given content.
@ -55,19 +55,23 @@ const tenPrint = content => {
const radius = width / numTiles / 2 const radius = width / numTiles / 2
const xs = range(numTiles + 1).map(x => width * (x / numTiles)) const xs = range(numTiles + 1).map(x => width * (x / numTiles))
const ys = range(numTiles + 1).map(y => width * (y / 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", return ["svg.ten-print",
{"viewBox": `${-radius} ${-radius} ${width + 2*radius} ${height + 2*radius}`, {"viewBox": `${-radius} ${-radius} ${width + 2*radius} ${height + 2*radius}`,
"xmlns": "http://www.w3.org/2000/svg", "xmlns": "http://www.w3.org/2000/svg",
"style": "overflow: visible"}, "style": "overflow: visible"},
["style", "path { fill: none; stroke: none; }"], // avoid flash of unstyled content ["style", ".arc { fill: none; stroke: none; }"], // avoid flash of unstyled content
["g", {"transform": "translate(0.5 0.5)"}, // pre-define our args
ys.map(y => ["defs",
xs.map(x => { template,
const startAngle = random() < 0.5 ? halfPi : 0 ["use", {"href": "#arc-a", "id": "arc-b", "transform": "rotate(90)"}]],
return arc(x, y, radius, startAngle, startAngle + 3 * halfPi) // <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 || '')) module.exports = content => serialize(tenPrint(content || ''))

2
src/assets/style.scss
View file

@ -85,7 +85,7 @@ a {
display: block; display: block;
max-width: 100%; max-width: 100%;
path { .arc {
stroke: $highlight; stroke: $highlight;
fill: transparent; fill: transparent;
stroke-width: 1.5px * $factor; stroke-width: 1.5px * $factor;