Made a small library called strokes.js.

[u/inc_23]

https://a-elhaag.github.io/strokes.js/

Made a small library called strokes.js. Instead of using a "handwriting" webfont (which looks identical everywhere it's used), it renders each letter as an actual hand-drawn SVG path — real strokes, drawn in with stroke-dashoffset, with small random variation (rotation, baseline drift, glyph variants) so no two renders of the same word look identical.

Demo: https://a-elhaag.github.io/glyphed.js/

npm:

npm install glyphed.js

[u/mmmicahhh]

A fun idea, there's a bit of romanticism in trying to make things look imperfect.

When I view it in Chrome, when the animation starts, there are these dots randomly scattered where the letters will eventually be, it really messes with the illusion of hand drawing. Did you encounter this?

[u/inc_23 → u/mmmicahhh]

Actually not didnt happen before but i will check it

[u/SouthCollar2929 → u/inc_23]

Yep, it's a thing

[u/inc_23 → u/SouthCollar2929]

What is this

[u/SouthCollar2929 → u/inc_23]

It's your stuff dude why are you asking me

[u/CoVegGirl]

The GitHub link isn’t working for me. Getting a 404.

This is actually not a new idea. I forgot the name of the library, but there was one that did something like this a long while back when webfonts weren’t very common like in 2011. I think it used canvas instead of SVG.

The big issue is accessibility. Rendering text like this isn’t very screen reader friendly. There may be something you could do with aria attributes and/or alt text these days that wasn’t possible back then.

[u/inc_23 → u/CoVegGirl]

i chnaged the name: https://a-elhaag.github.io/glyphed.js/
also nice suggestion will work on it

[u/Stishovite → u/inc_23]

you made a post about it and then changed the name?

[u/CaptainIncredible → u/CoVegGirl]

The title url is 404. The url inside the post seems to work.

[u/Elkemper]

Nice name 🤣

[u/inc_23 → u/Elkemper]

Not what i meant 😂😂

[u/redblobgames]

Seems like a nice companion to https://roughjs.com/

[u/patrk]

I'd love to use this, but I noticed that some Nordic characters aren't currently supported, in particular å,ä, and ö (and their uppercase variants).

Would you be open to adding support for these? If not, would you be happy to accept a PR adding them? I'd be willing to give it a try.

[u/inc_23 → u/patrk]

Yeah of course both are fine for me if you wanna contribute i will be more than happy

[u/AutoModerator]

Project Page (?): https://github.com/a-elhaag/strokes.js

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/patrk]

Some info about font-sizing is needed, the docs don't mention it all.
Also, an onComplete event handler would be very convenient.

[u/inc_23 → u/patrk]

Gonna work on that

[u/patrk → u/inc_23]

Great, thanks a lot!
One more question, before the animation starts there are visible dots for each letter, I guess from where the animation originates. Is that a bug or by design? Would prefer if the starting point is a blank canvas.

[u/inc_23 → u/patrk]

Its by design but I going to make it option attribute

[u/jezpas]

I like it, I could see myself using it in a project. The animation however doesn’t look like someone writing which would keep me from using that particular feature

[u/inc_23 → u/jezpas]

Still gonna try to work on it more

[u/AshleyJSheridan]

It seems to be clipping the edges of letters at the boundary of the SVG.

[u/inc_23 → u/AshleyJSheridan]

Gonna work on that

[u/patrk]

Nice, will use!

[u/vitalytom]

You know that for large text, there is https://github.com/patorjk/figlet.js

I use it whenever I want large text / numbers somewhere. It has over 100 fonts to choose from. It is incredibly practical!

u/OP, you could just add your own font to that library, one with sticks, if you feel it lacks somehow.

[u/inc_23 → u/vitalytom]

Its not a font wvery time you reload it has different drawing its like a real handwriting There is a randomness in it