up
This commit is contained in:
243
build/article-favicon.typ.desktop.html
Normal file
243
build/article-favicon.typ.desktop.html
Normal file
@@ -0,0 +1,243 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The making of the favicon</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" sizes="512x512" href="res/favicon.png">
|
||||
<link rel="image_src" type="image/png" href="res/favicon.png">
|
||||
<link type="application/atom+xml" rel="alternate" title="alexs168's blog" href="atom.xml">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
|
||||
@font-face {
|
||||
font-family: 'DejaVu Sans Mono';
|
||||
src:local('DejaVu Sans Mono'),
|
||||
url('res/DejaVuSansMono.woff2') format('woff2'),
|
||||
local('Courier New'),
|
||||
local(Courier),
|
||||
local(monospace);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/*
|
||||
@font-face {
|
||||
font-family: 'DejaVu Sans Mono';
|
||||
src:local('DejaVu Sans Mono'),
|
||||
url('res/DejaVuSansMono-Bold.woff2') format('woff2'),
|
||||
local('Courier New'),
|
||||
local(Courier),
|
||||
local(monospace);
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DejaVu Sans';
|
||||
src:local('DejaVu Sans'),
|
||||
url('res/DejaVuSans-Bold.woff2') format('woff2'),
|
||||
local('Courier New');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DejaVu Sans';
|
||||
src:local('DejaVu Sans'),
|
||||
url('res/DejaVuSans.woff2') format('woff2'),
|
||||
local('Courier New');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}*/
|
||||
|
||||
body {
|
||||
font-family: DejaVu Sans Mono;
|
||||
font-size: 17pt;
|
||||
}
|
||||
|
||||
td {
|
||||
width: 100%;
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
margin-top: 1%;
|
||||
margin-bottom: 0.75%;
|
||||
margin-left: -0.75%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.75%;
|
||||
margin-bottom: 0.75%;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0%;
|
||||
}
|
||||
|
||||
.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3f51b5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #3f51b5;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td><span class="sidebar" style><span class="column-fixed" style="display: inline-flex; position: fixed; justify-content: center; width: 25%"><table><tr><td><span class="table-of-contents" style><div style="
|
||||
border:1.2pt solid black;
|
||||
border-radius:2pt;
|
||||
|
||||
|
||||
padding:3%;"><p><span style="text-decoration: underline">Table of contents</span><br></p><p style="line-height:1.1"><span class style="display:flex; text-indent:0pt;"><span class style="margin-right: 11pt;">├─</span> <span class style="flex:1;"><span class="headingr" id="headingr-0"><a href="#loc-1">Step 0: Designing the Circuit</a></span></span></span></p><p style="line-height:1.1"><span class style="display:flex; text-indent:0pt;"><span class style="margin-right: 11pt;">├─</span> <span class style="flex:1;"><span class="headingr" id="headingr-1"><a href="#loc-2">Step 1: Sketching</a></span></span></span></p><p style="line-height:1.1"><span class style="display:flex; text-indent:0pt;"><span class style="margin-right: 11pt;">├─</span> <span class style="flex:1;"><span class="headingr" id="headingr-2"><a href="#loc-3">Step 2: Preparation for coloring</a></span></span></span></p><p style="line-height:1.1"><span class style="display:flex; text-indent:0pt;"><span class style="margin-right: 11pt;">├─</span> <span class style="flex:1;"><span class="headingr" id="headingr-3"><a href="#loc-4">Step 3: Coloring</a></span></span></span></p><p style="line-height:1.1"><span class style="display:flex; text-indent:0pt;"><span class style="margin-right: 11pt;">├─</span> <span class style="flex:1;"><span class="headingr" id="headingr-4"><a href="#loc-5">Step 4: Outsourcing the coloring</a></span></span></span></p><p style="line-height:1.1"><span class style="display:flex; text-indent:0pt;"><span class style="margin-right: 11pt;">├─</span> <span class style="flex:1;"><span class="headingr" id="headingr-5"><a href="#loc-6">Step 5: Digital Modifications</a></span></span></span></p><p style="line-height:1.1"><span class style="display:flex; text-indent:0pt;"><span class style="margin-right: 11pt;">└─</span> <span class style="flex:1;"><span class="headingr" id="headingr-6"><a href="#loc-7">Conclusion</a></span></span></span></p></div></span><span class="table-of-contents" style><script>document.addEventListener('DOMContentLoaded', function() {
|
||||
let tags = ['h2', 'h3', 'h4'].flatMap(x => Array.from(document.getElementsByTagName(x))).sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
|
||||
let pageHeight = document.documentElement.scrollHeight-window.innerHeight;
|
||||
document.addEventListener('scroll', (event) => {
|
||||
let progress = -(document.documentElement.getBoundingClientRect().y / pageHeight);
|
||||
let delta = progress * window.innerHeight;
|
||||
let idx = tags.map(x => 0 > x.getBoundingClientRect().top - delta).lastIndexOf(true);
|
||||
Array.from(document.getElementsByClassName('headingr')).map(x => x.classList.remove('current'));
|
||||
if (idx != -1) {
|
||||
document.getElementById('headingr-' + idx).classList.add('current');
|
||||
}
|
||||
}
|
||||
);
|
||||
})</script><style>
|
||||
.table-of-contents > p > span { width: 100%; }
|
||||
</style></span></td></tr><tr><td><br>
|
||||
<a href="index.html"><b>Website Home</b></a> <br>
|
||||
</td></tr><tr><td><p>Renderings of this page:</p><ul><li><a href="#" onclick="gotoVariant(".min.pdf");">minimal PDF (printable)</a></li><li><a href="#" onclick="gotoVariant(".nano.html");">minimal HTML</a></li></ul></td></tr><tr><td><a href="atom.xml">Atom feed</a> <br>
|
||||
</td></tr><tr><td><style>
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.column-fixed {
|
||||
width: 0% !important;
|
||||
}
|
||||
|
||||
.body-column {
|
||||
left: 3% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1800px) {
|
||||
.body-column > span {
|
||||
width: 75% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.body-column {
|
||||
width: 97% !important;
|
||||
}
|
||||
.body-column > span {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hide { display: inline; background: black; transition: background 0.3s linear; }
|
||||
.hide:hover, .hide:focus { background: transparent; }
|
||||
</style></td></tr></table><style>
|
||||
.column-fixed > table > tbody > tr > td > * { width: 100%; }
|
||||
</style></span></span></td>
|
||||
<td><span class="body-column" style="position: absolute; left: 28%; width: 72%"><span style="
|
||||
|
||||
|
||||
width:50%;
|
||||
|
||||
display:inline-block"><div style="
|
||||
|
||||
|
||||
|
||||
|
||||
"><p><br></p><h1>The making of the favicon</h1><p><span style="font-size: 14pt"><p>Git revision <a href="https://github.com/alex-s168/website/tree/c80eb6ef20acd402096f38d45bb40779fa15149b">#c80eb6ef</a><br>Modified at 26. July 2025 15:04</p><p>Written by <a href="https://alex.vxcc.dev">alex_s168</a></p></span></p></div><div style="
|
||||
|
||||
|
||||
|
||||
|
||||
"><p><br>The favicon of my website currently is:</p><img src="res/favicon.png" alt="image" style="width:38%;"></div><div style="
|
||||
|
||||
|
||||
|
||||
|
||||
"><br>This represents an <a href="https://www.sciencedirect.com/science/article/pii/S0890540197926432">interaction combinator</a> tree, that can be interpreted as a <a href="https://en.wikipedia.org/wiki/Lambda_calculus">lambda calculus</a> expression.</div><div style="
|
||||
|
||||
|
||||
|
||||
|
||||
"><p><br><span id="loc-1" style="text-decoration: underline"><h2>Step 0: Designing the Circuit</h2></span> I ended up with this:</p><img src="res/article-favicon/step0.png" alt="image" style="width:32%;"><p>(this is the second attempt at layouting the circuit)</p></div><div style="
|
||||
|
||||
|
||||
|
||||
|
||||
"><p><br><span id="loc-2" style="text-decoration: underline"><h2>Step 1: Sketching</h2></span> While starting doing this, I realised that one wire always overlaps with one node triangle, unless I cheated. Here is a visual representation of this (inaccurate):</p><img src="res/article-favicon/step1_0.png" alt="image" style="width:18%;"><p><br>This means that I have to modify the layouting from step 0 a bit, which is unfortunate, but in retrospect, I think that it makes the result look better:</p><img src="res/article-favicon/step1_1.png" alt="image" style="width:25%;"><p><br>That however takes up too much space, so I did another variation:</p><img src="res/article-favicon/step1_2.png" alt="image" style="width:25%;"><p><br>I also did another variation here, but decided to not use that.</p></div><div style="
|
||||
|
||||
|
||||
|
||||
|
||||
"><p><br><span id="loc-3" style="text-decoration: underline"><h2>Step 2: Preparation for coloring</h2></span> I colored the back side of the piece of paper which contains the sketeches with a pencil, put a white piece of paper behind it, and then re-traced the line, to get a lighter version of the sketch onto the white paper.</p><img src="res/article-favicon/step2.png" alt="image" style="width:25%;"><p><br>Then I used modern technology (a copier) to copy that piece of paper multiple times, and also scale it up (to allow for more details).</p></div><div style="
|
||||
|
||||
|
||||
|
||||
|
||||
"><p><br><span id="loc-4" style="text-decoration: underline"><h2>Step 3: Coloring</h2></span> It was a disaster…</p><img src="res/article-favicon/step3_0.png" alt="image" style="width:70%;"><p><br></p><img src="res/article-favicon/step3_1.png" alt="image" style="width:70%;"><p><br>Some variants actually look nice, but only parts of it.</p></div><div style="
|
||||
|
||||
|
||||
|
||||
|
||||
"><p><br><span id="loc-5" style="text-decoration: underline"><h2>Step 4: Outsourcing the coloring</h2></span> After some time, I just gave up, and decided to ask my sister for help…</p><img src="res/article-favicon/step4_0.png" alt="image" style="width:70%;"><p><br>I only told her (translated):</p><div class style="margin-top:4pt;"><span style="
|
||||
border:1pt solid black;
|
||||
border-radius:2pt;
|
||||
|
||||
|
||||
padding:1.6pt;display:inline-block"><pre><code>Can you please color this?<br>It's supposed to be a circuit, and it will be a small logo for a website.<br>The website is mainly black and white, but this (context: persian blue) blue would work too.</code></pre></span></div><p>And less than half a minute later, she came up with this:</p><img src="res/article-favicon/step4_1.png" alt="image" style="width:38%;"><p><br>We considered that the logo will end up being quite small, so “we” wanted it to look good when zoomed out. This is a pretty nice idea, because the different colored wires end up blending together nicely.</p><p><br>I put that into the scanner, and meanwhile she experimented with different filling styles.</p><p><br>Then she came up with this (the final version):</p><img src="res/article-favicon/step4_2.png" alt="image" style="width:38%;"><p>Filling the drawing only took her about 20 seconds!</p></div><div style="
|
||||
|
||||
|
||||
|
||||
|
||||
"><br><span id="loc-6" style="text-decoration: underline"><h2>Step 5: Digital Modifications</h2></span> As last step, I removed some of the sketch lines and some minor imperfections digitally.</div><div style="
|
||||
|
||||
|
||||
|
||||
|
||||
"><p><br><span id="loc-7" style="text-decoration: underline"><h2>Conclusion</h2></span> I like the final result a lot (as small logo), but it’s a bit too detailed as favicon.</p><p>I will re-visit this topic in the future.</p></div></span></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<script>
|
||||
|
||||
function gotoVariant(variant) {
|
||||
window.location.href = window.location.href.replace(/\.\w+.html/g, variant);
|
||||
}
|
||||
|
||||
window.addEventListener('beforeprint', (event) => {
|
||||
gotoVariant('.min.pdf');
|
||||
});
|
||||
|
||||
</script>
|
||||
<script src="coffee.js" async>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user