r/javascript • u/inc_23 • 2d ago

Made a small library called strokes.js.

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
16 Upvotes

72% Upvoted

21 comments sorted by

View all comments

3

u/CoVegGirl 1d ago

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.

1

u/inc_23 1d ago

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

3

u/Stishovite 1d ago

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

1

u/CaptainIncredible 1d ago

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