©2024 David Timber <dxdt🐌dev. /insert domain here/ >
Welcome! You probably just noticed that how dog shite the performance was because of the animation. That's why I decided not to use the animated version, but I wanted to showcase this cool animation I made for the company branding.
The logos are handcrafted by myself using Inkscape. Inkscape provides a special tooling that can be used to inject custom CSS to the exported SVG document. (Yes, it's exactly what it sounds like: it's a hack. Inkscape has no official animation support as of 2024. If you're looking for something serious, Blender is your friend.). The custom CSS I made can be found here. The idea was to structure the CSS and SVG elements so that renderers that do not understand CSS animation can just produce the final product. However, the commonly used implementations like librsvg do understand CSS animation but the higher level applications like ImageMagick and FFmpeg don't bother to set up the context to skip the animation. When this happens, you'll end up with the 12 dots... What an L take for me.
Firefox has this two-decade-old
bug of animated images not being restarted when cached. If you're using
Firefox, use Ctrl + Shift + R to invalidate the cache to
restart the animation. I really can't be fucked. I won't write JS code for this.
This is just one of many pains you have to live with as a Firefox user. If I
ever get serious as to use the animated version on production, then I will write
hacks for reanimation triggers. Just like Arelion did with
theirs.
It has been almost a decade since CSS animation has been standardised, but the obvious cues are that it's still taking baby steps. Or perhaps CSS animation is just a solution to a non-existent problem no one asked for. Animation in web is not quite there yet.
The Full Logo
Lacking the artistic talent, this was what I could gather on me own.
I'm a sole trader with the passion in anything "tech". From the nitty-gritty bare metal electronics to SaaS. My specialties involves utilising electronics, which use silicon as a basic building block, hence the name. This is my first attempt to symbolise it. The animation is broken down to 4 sets of keyframes. The pins symbolise early floorplanning, the square packaging of the components, the curly brackets and the wand the coding work to make the magic possible. The engineering doesn't always happen in that particular order, but it's enough to give you an idea on how it usually goes.
There is only so much I can do with CSS animation and SVG so the scope had to be limited first. For the full logo, I went for the mid 2000's UI look as seen in SimCity and Sims from early days, and the UI on many self-checkout kiosks still in operation today. The good old dithered RGB565 texture look. Filters are used to achieve the look.
The Emblem and Favicon
These are the simplified versions of the full logo for avatar, favicon, desktop icon and thumbnail use. The data input goes into the blackbox where all the magic happens and out comes the result. The colors were strictly picked from the IBM VGA pallet to give it an exotic look that doesn't mix well in modern web apps like Github and Gmail. Ugly but practical.
