I tried a similar approach but via CSS for my "medieval content farm" (https://tidings.potato.horse), but for perf. reasons ended up only randomising the opacity and tint of its individual characters and removed the transforms.
My next step is to add those little padded areas hiding the empty spaces on the right side of the text[1][2], so the column of the text feels neater (horror vacui was a big thing then it seems).
Weirdly enough, this gets much easier with container queries and stable diffusion:
1. feed SD with some examples of patterns, then scale them to 10 or so sizes
2. then use those images as backgrounds for elements fitting the empty space in each line
3. select the right image using a container query
This should give them a neat but organic look. And hey I can brag about not using any JS!
If you haven't yet, you should play Pentiment. It's set in the early 1500s as the printing press is spreading across Europe, and each character's dialog text reflects how they would write (or print, for the people who operate presses). The text rendering is truly beautifully done, the ink dries a few moments after the text is written out and everything. I've been hoping for a technical blog on their text rendering techniques but haven't seen one yet.
Unrelated, and sorry in advance if this is unwanted advice... but I see on your homepage that you say your name is pronounced /'rafau pastoohshak/. But that's an English interpretation and /.../ is typically used to refer to the International Phonetic Alphabet. (/.../ is approximate and [...] is the precise version.)
I think the IPA one is /rafaw pastuʂak/ (note: /ʂ/ is very similar to /ʃ/).
My next step is to add those little padded areas hiding the empty spaces on the right side of the text[1][2], so the column of the text feels neater (horror vacui was a big thing then it seems).
Weirdly enough, this gets much easier with container queries and stable diffusion:
1. feed SD with some examples of patterns, then scale them to 10 or so sizes
2. then use those images as backgrounds for elements fitting the empty space in each line
3. select the right image using a container query
This should give them a neat but organic look. And hey I can brag about not using any JS!
[1] https://i.pinimg.com/originals/2f/46/2d/2f462df256f4bd509b48... [2] https://i.pinimg.com/originals/ac/68/a8/ac68a86da5ec457960d0...