73 lines
3.1 KiB
HTML
73 lines
3.1 KiB
HTML
<!doctype html>
|
|
<!--
|
|
App icon artwork for Marks. Rendered to PNG by generate.sh — do not edit the
|
|
PNGs in AppIcon.appiconset directly, they are build output.
|
|
|
|
The path below is the same geometry as ScallopMark in
|
|
Marks/Views/Library/MarksMark.swift, in the same canonical 88 x 98 box. If you
|
|
change one, change the other; there is no shared source between Swift and SVG.
|
|
|
|
Three variants, per Apple's iOS 18+ app icon model:
|
|
light — full-bleed artwork on the paper ground, flattened (icons may not
|
|
carry an alpha channel).
|
|
dark — artwork only, on transparency. The system supplies the dark
|
|
background, so the bands are the palette's dark counterparts,
|
|
which are lifted rather than dimmed.
|
|
tinted — greyscale on transparency. The system maps luminance to the user's
|
|
chosen tint, so the three bands are carried as three greys whose
|
|
relative luminance matches the colour version. Flattening them to
|
|
one grey would throw away the band reading in exactly the mode
|
|
that has nothing else left.
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Marks app icon</title>
|
|
<style>
|
|
html,body{margin:0;padding:0;background:transparent}
|
|
#tile{width:1024px;height:1024px;display:flex;align-items:center;justify-content:center}
|
|
svg{display:block}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="tile"></div>
|
|
<script>
|
|
// 88 x 98 canonical box. 4 tails => 3 steps of 88/3.
|
|
const W = 88, H = 98, R = 10, DEPTH = 16, TAILS = 4
|
|
const step = W / (TAILS - 1)
|
|
|
|
let d = `M${R} 0 H${W - R} A${R} ${R} 0 0 1 ${W} ${R} V${H}`
|
|
for (let i = 1; i < TAILS; i++) {
|
|
d += ` L${(W - step * (i - 0.5)).toFixed(3)} ${H - DEPTH}`
|
|
d += ` L${(W - step * i).toFixed(3)} ${H}`
|
|
}
|
|
d += ` V${R} A${R} ${R} 0 0 1 ${R} 0 Z`
|
|
|
|
const VARIANTS = {
|
|
// navy, vermilion, yellow on the paper sheet
|
|
light: {ground: '#F8F5EF', bands: ['#001A55', '#ED663F', '#FECD00']},
|
|
// the palette's dark counterparts, lifted so they carry on a dark ground
|
|
dark: {ground: null, bands: ['#5B8FD0', '#E07A5C', '#D8AD10']},
|
|
// greys ordered by the colour version's relative luminance
|
|
tinted: {ground: null, bands: ['#737373', '#B8B8B8', '#F2F2F2']},
|
|
}
|
|
|
|
const v = VARIANTS[new URLSearchParams(location.search).get('v') || 'light']
|
|
// Mark occupies 62% of the tile's height, which lands it inside Apple's grid
|
|
// with the margin the squircle mask wants.
|
|
const markH = 1024 * 0.62
|
|
|
|
const svg = [`<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">`]
|
|
if (v.ground) svg.push(`<rect width="1024" height="1024" fill="${v.ground}"/>`)
|
|
svg.push(`<defs><clipPath id="mark"><path d="${d}"/></clipPath></defs>`)
|
|
svg.push(`<g transform="translate(${512 - markH * W / H / 2} ${512 - markH / 2}) scale(${markH / H})">`)
|
|
svg.push(`<g clip-path="url(#mark)">`)
|
|
v.bands.forEach((color, i) => {
|
|
svg.push(`<rect x="${(W / 3 * i).toFixed(3)}" y="0" width="${(W / 3).toFixed(3)}" height="${H}" fill="${color}"/>`)
|
|
})
|
|
svg.push(`</g></g></svg>`)
|
|
document.getElementById('tile').innerHTML = svg.join('')
|
|
</script>
|
|
</body>
|
|
</html>
|