There's actually a slight difference between the golfed and un-golfed version: the un-golfed adds the avatar to the beginning of the line with the username, whereas the golfed version adds it right next to the username. I actually find it to be more visually appealing at the beginning of the line, so I'm sticking with that in my Greasemonkey script.

To anyone interested, I've added links to how the un-golfed version looks with Dark Reader enabled[1] and how it looks without Dark Reader[2]. To clarify, I've set my zoom level for Hacker News to 150% as I find the default to not be conducive to reading.

---

[1]: https://i.imgur.com/hw9pn0l.png

[2]: https://i.imgur.com/z3jV2NZ.png

Yup, i noticed an opportunity to make it smaller while golfing.

There is one advantage of the golfed version, which is that it will also inject avatars wherever it finds the .hnuser class, including on other pages.

I've never heard of dweets/dwitter before; thanks for sharing. For anyone else:

Dwitter.net is a challenge to see what awesomeness you can create when limited to only 140 characters of javascript and a canvas. Give it a go!

https://www.dwitter.net/

further ungolfed:

  for (const huser of document.querySelectorAll(".hnuser")) {
    const s = huser.innerText;
    const p = 2;
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");

    canvas.width = p * 7;
    canvas.height = p * 7;

    huser.parentElement.prepend(canvas);

    {
      const xorshift32 = (n) => {
        n ^= n << 13;
        n ^= n >>> 17;
        n ^= n << 5;
        return n;
      };

      const seedSteps = 28;

      let seed = 1;
      for (let i = seedSteps + s.length; i >= seedSteps; i--) {
        seed = xorshift32(seed);
        seed += s.charCodeAt(i - seedSteps);
      }

      context.fillStyle =
        "#" + ((seed >> 8) & 0xffffff).toString(16).padStart(0, 6);

      for (let i = seedSteps - 1; i > 0; i--) {
        // continue the seed
        seed = xorshift32(seed);

        const X = i & 3;
        const Y = i >> 2;

        if (seed >>> (seedSteps + 1) > (X * X) / 3 + Y / 2) {
          context.fillRect(p * 3 + p * X, p * Y, p, p);
          context.fillRect(p * 3 - p * X, p * Y, p, p);
        }
      }
    }
  }

You're off by one in the initial seed step. Change

for (let i = seedSteps + s.length; i >= seedSteps; i--) to for (let i = seedSteps + s.length - 1; i >= seedSteps; i--)

The original is not using the for loop in the usual way so i starts off one smaller than expected.

Your minified version lacks the .padStart(0, 6) you have in this comment, without which colour selection fails in just under 1⁄16 of cases, yielding black. (Or in just under 1⁄256 of cases, a semi-transparent colour!)

Thanks, I know it's absent (it's golfed not minified), which means I manually manipulated it to make as small as possible which sometimes means making "concessions" where things are not ideally preserved - But in retrospect you're probably right, I was being too aggressive and should have either left the padding in or replaced it with some guarantee of formatting length length like "&FFF|0x111"

I've been following Frank Force (KilledByAPixel) for quite some time now, he's on the forefront of generative design via HTML canvas.

Yeah! he's done a deep dive into it more recently. Attempting to follow his twitter thread at the moment is like trying to consume a fire-hydrant of generative art :D hard to keep up, but looks amazing.