-
Notifications
You must be signed in to change notification settings - Fork 0
/
favicon.html
53 lines (47 loc) · 1.59 KB
/
favicon.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html lang="en">
<head>
<title>Code Art Favicon</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&family=Anonymous+Pro&family=B612+Mono&family=Courier+Prime&family=Cutive+Mono&family=Inconsolata&family=JetBrains+Mono&family=Noto+Sans+Mono&family=Nova+Mono&family=Share+Tech+Mono&family=Syne+Mono&family=Ubuntu+Mono&display=swap" rel="stylesheet">
<style>
#main {
background: #0000;
}
html, body {
height: 100vh;
margin: 0;
padding: 0;
width: 100vw;
}
body {
align-items: center;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<canvas id="main" height="128" width="128"></canvas>
<script>
main();
async function main() {
const canvas = document.getElementById('main');
const s = Number(canvas.width);
const ctx = canvas.getContext('2d');
// ctx.fillStyle = '#007a43';
ctx.fillStyle = '#240dd0';
ctx.beginPath();
ctx.arc(s/2, s/2, s/2, 0, 2 * Math.PI);
ctx.fill();
const fontSize = s * 1.2;
const fontCssStr = `${fontSize}px 'Ubuntu Mono'`;
const text = 'a';
await document.fonts.load(fontCssStr, text)
ctx.fillStyle = 'white';
ctx.font = fontCssStr;
const m = ctx.measureText('a');
const height = m.actualBoundingBoxAscent + m.actualBoundingBoxDescent;
ctx.fillText(text, (s - m.width) / 2, ((s - height) / 2 + height) * .98);
}
</script>
</body>
</html>