Dynamically generated bullshit with CSS, HTML, and a browser

March 13, 2026

Last night I figured I'd remake web buttons for my personal site once again, and like a totally normal person I installed GIMP, but then the bug bit me again, big time, and I fired up Vim instead, I also had the browser open too, so I wound up doing something like this:

<style>
@font-face {
        font-family: 'Ume UI Gothic';
        src: url('/usr/pkg/share/fonts/X11/TTF/ume-ugo4.ttf') format('truetype');
}

.banner {
        background: url('/home/shinyoukai/Pages/madness/img/bg.gif');
        font-family: 'Ume UI Gothic';
        width: 200px;
        height: 50px;
        border: 5px double silver;
}
img.avatar_left {
        height: 50px;
        width: 50px;
        float: left;
}
b.top_text {
        padding-top: -10px;
        font-size: 15px;
        color: white;
}
i.bottom_text {
        font-size: 15px;
        color: white;
        padding-bottom: 10px;
}
</style>
<div class="banner">
        <img src="/home/shinyoukai/Pages/madness/img/avatar.png" class="avatar_left"><b class="top_text">「水無月しんやの狂気」</b><br><i class="bottom_text">The Madness of Shin'ya Minazuki</i>
</div>

To summarize the mess above, most of the file is a made up style sheet that does 90% of the work, alongside picking up stuff from Madoka's filesystem, and hitting refresh profusely until I managed to crash the browser.

But that wasn't all, I also did the extra step of animating the button, with this awful trick:

magick -delay 600 -loop 10 input-1 -delay 600 -loop 10 input-2 output.gif

Though it took me virtually bashing my head against the chair (Madoka is placed on a chair rather than a table, let alone a desk) until I figured out the above command.

It's so bad it could be easily confused with SVGs, without the awful mess that is dealing with XML.

That's all.