Something went wrong. Try again.
Browser extension: detect and subscribe to standard.site publications on ATProto
Something went wrong. Try again.
1.8 kB · 45 lines
JavaScript
12345678910111213141516171819202122232425262728293031323334353637383940414243444546// Shared SVG composition helpers for the brand render scripts. Compositions// are assembled at render time by nesting the canonical brand SVGs into a// paper-colored canvas, so derived art can never drift from the logo files.
import { readFileSync } from 'node:fs'import { resolve } from 'node:path'
export const PAPER = '#f4f3ee'
/** Inline a brand SVG as a nested <svg> positioned inside a composition. */export function nest(file, x, y, width, height = width) { return readFileSync(resolve(file), 'utf8') .replace('<?xml', '<!--') .replace( '<svg ', `<svg x="${x}" y="${y}" width="${width}" height="${height}" `, )}
/** * Nest the generated wordmark at a target width, centered on cy. Its * viewBox varies with the measured text, so the height follows the file. */export function nestWordmark(x, cy, width) { const svg = readFileSync(resolve('brand/wordmark.svg'), 'utf8') const [, vw, vh] = svg.match(/viewBox="0 0 (\d+) (\d+)"/) const height = Math.round((width * Number(vh)) / Number(vw)) return nest('brand/wordmark.svg', x, Math.round(cy - height / 2), width, height)}
/** Embed a PNG capture (not a brand SVG) as a positioned data-URI image. */export function nestPng(file, x, y, width, height) { const b64 = readFileSync(resolve(file)).toString('base64') return `<image x="${x}" y="${y}" width="${width}" height="${height}" href="data:image/png;base64,${b64}"/>`}
/** Wrap a tile body ({ width, height, body }) in a paper-colored canvas. */export function compose(tile) { return ( `<svg xmlns="http://www.w3.org/2000/svg" width="${tile.width}" height="${tile.height}">` + `<rect width="${tile.width}" height="${tile.height}" fill="${PAPER}"/>` + tile.body() + '</svg>' )}