Simplify arc fn in header
This commit is contained in:
parent
6b4be4d7e3
commit
e470b9d615
1 changed files with 3 additions and 6 deletions
|
|
@ -29,12 +29,12 @@ const polarToCartesian = (cx, cy, radius, alpha) =>
|
|||
* @param alpha number
|
||||
* @return hiccup
|
||||
*/
|
||||
const arc = (cx, cy, radius, start, end) => {
|
||||
const arc = (_, { shape: { cx, cy, radius, start, end }, ...props }) => {
|
||||
const isLargeArc = end - start <= Math.PI
|
||||
const [ x1, y1 ] = polarToCartesian(cx, cy, radius, end)
|
||||
const [ x2, y2 ] = polarToCartesian(cx, cy, radius, start)
|
||||
const f = n => n.toFixed(2)
|
||||
return ["path", {"d": `M ${f(x1)} ${f(y1)} A ${radius} ${radius} 0 ${isLargeArc ? '0' : '1'} 0 ${f(x2)} ${f(y2)}`}]
|
||||
return ["path", {"d": `M ${f(x1)} ${f(y1)} A ${radius} ${radius} 0 ${isLargeArc ? '0' : '1'} 0 ${f(x2)} ${f(y2)}`, ...props}]
|
||||
}
|
||||
|
||||
const numTiles = 10
|
||||
|
|
@ -57,9 +57,6 @@ const tenPrint = content => {
|
|||
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",
|
||||
|
|
@ -67,7 +64,7 @@ const tenPrint = content => {
|
|||
["style", ".arc { fill: none; stroke: none; }"], // avoid flash of unstyled content
|
||||
// pre-define our args
|
||||
["defs",
|
||||
template,
|
||||
[arc, {"id": "arc-a", "shape": {"cx": 0, "cy": 0, "start": startAngle, "end": startAngle + 3 * quarterTau, radius}}],
|
||||
["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 =>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue