alexander.nutz/website-build
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Alexander Nutz
2025-08-29 15:28:30 +02:00
parent 83b8df17fe
commit 591ea99899
143 changed files with 7773 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
build/article-favicon.typ.nano.html Normal file
View File

@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html>
<head>
<title>The making of the favicon</title>
<meta charset="utf-8">
</head>
<body>
<div style="
">
<p><br></p>
<h1>The making of the favicon</h1>
<p><span style="font-size: 9pt"><p>Last modified: 26. July 2025 15:04 (Git #<code><code style="white-space: pre-wrap">c80eb6ef</code></code>)</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></p>
<h2>Step 0: Designing the Circuit</h2>
<p>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></p>
<h2>Step 1: Sketching</h2>
<p>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></p>
<h2>Step 2: Preparation for coloring</h2>
<p>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></p>
<h2>Step 3: Coloring</h2>
<p>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></p>
<h2>Step 4: Outsourcing the coloring</h2>
<p>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>
<p><code><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></code></p>
<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="
">
<p><br></p>
<h2>Step 5: Digital Modifications</h2>
<p>As last step, I removed some of the sketch lines and some minor imperfections digitally.</p>
</div>
<div style="
">
<p><br></p>
<h2>Conclusion</h2>
<p>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>
</body>
</html>